← back to Handbag Auth Nextjs
src/app/page.tsx
521 lines
'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
export default function Home() {
const [stats, setStats] = useState<any>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchStats()
}, [])
const fetchStats = async () => {
try {
const res = await fetch('/api/stats')
const data = await res.json()
if (data.success) {
setStats(data)
}
} catch (error) {
console.error('Failed to fetch stats:', error)
} finally {
setLoading(false)
}
}
return (
<div className="min-h-screen bg-black text-white">
{/* Navigation */}
<nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-xl border-b border-white/10">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 bg-gradient-to-br from-yellow-400 via-amber-500 to-orange-600 rounded-xl flex items-center justify-center shadow-2xl shadow-amber-500/50">
<span className="text-2xl">💎</span>
</div>
<div>
<div className="text-xl font-bold tracking-tight">LUXVAULT</div>
<div className="text-xs text-gray-400 tracking-wide">Fractional Luxury</div>
</div>
</div>
<div className="hidden md:flex items-center space-x-8">
<Link href="/deals" className="text-gray-300 hover:text-white transition-colors font-medium">🔥 Top Deals</Link>
<Link href="/search" className="text-gray-300 hover:text-white transition-colors font-medium">🔍 Search</Link>
<Link href="/marketplace" className="text-gray-300 hover:text-white transition-colors font-medium">Marketplace</Link>
<Link href="/museum" className="text-gray-300 hover:text-white transition-colors font-medium">Museum</Link>
<Link href="#how-it-works" className="text-gray-300 hover:text-white transition-colors font-medium">How It Works</Link>
</div>
<div className="flex items-center space-x-4">
<button className="px-6 py-2.5 text-sm font-semibold text-white hover:text-gray-300 transition-colors">
Sign In
</button>
<button className="px-6 py-2.5 bg-gradient-to-r from-yellow-400 to-amber-500 rounded-xl text-black font-bold text-sm hover:shadow-2xl hover:shadow-amber-500/50 transition-all transform hover:scale-105">
Get Started
</button>
</div>
</div>
</div>
</nav>
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32">
{/* Animated Background Grid */}
<div className="absolute inset-0 bg-gradient-to-br from-black via-gray-900 to-black">
<div className="absolute inset-0 opacity-20">
<div className="absolute inset-0" style={{
backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
backgroundSize: '50px 50px',
animation: 'grid-flow 20s linear infinite'
}}></div>
</div>
</div>
{/* Floating Particles */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(20)].map((_, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-amber-400 rounded-full opacity-40"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animation: `float ${5 + Math.random() * 10}s ease-in-out infinite`,
animationDelay: `${Math.random() * 5}s`
}}
/>
))}
</div>
<div className="relative z-10 max-w-7xl mx-auto px-8 lg:px-12 py-24 text-center">
{/* Premium Badge */}
<div className="inline-flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border border-amber-500/30 rounded-full mb-8 backdrop-blur-sm">
<span className="text-amber-400 text-sm font-bold tracking-wide">🔒 SEC-COMPLIANT</span>
<span className="text-gray-400 text-sm">|</span>
<span className="text-gray-300 text-sm">Blockchain-Verified Ownership</span>
</div>
{/* Main Headline */}
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold mb-6 leading-tight">
Own a Piece of
<br />
<span className="bg-gradient-to-r from-yellow-400 via-amber-500 to-orange-600 bg-clip-text text-transparent">
Luxury History
</span>
</h1>
{/* Subheadline */}
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
Invest in fractional shares of authenticated luxury handbags.
<br className="hidden md:block" />
From Hermès Birkins to Chanel Classics — curated, insured, and blockchain-verified.
</p>
{/* Stats Row */}
<div className="flex flex-wrap items-center justify-center gap-8 mb-12 text-sm">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span className="text-gray-400">
<span className="text-white font-bold">{stats?.total_listings?.toLocaleString() || '27,000+'}</span> Assets Available
</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-amber-400 rounded-full"></div>
<span className="text-gray-400">
<span className="text-white font-bold">14.2%</span> Avg. Annual Return
</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
<span className="text-gray-400">
<span className="text-white font-bold">$10</span> Minimum Investment
</span>
</div>
</div>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<button className="w-full sm:w-auto px-10 py-4 bg-gradient-to-r from-yellow-400 via-amber-500 to-orange-600 rounded-2xl text-black font-bold text-lg hover:shadow-2xl hover:shadow-amber-500/50 transition-all transform hover:scale-105">
Start Investing Now
</button>
<Link href="/marketplace" className="w-full sm:w-auto px-10 py-4 bg-white/10 backdrop-blur-sm border-2 border-white/20 rounded-2xl text-white font-bold text-lg hover:bg-white/20 transition-all inline-block text-center">
View Marketplace
</Link>
<Link href="/museum" className="w-full sm:w-auto px-10 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl text-white font-bold text-lg hover:shadow-2xl hover:shadow-purple-500/50 transition-all transform hover:scale-105 inline-block text-center">
Explore Museum
</Link>
</div>
{/* Featured Asset Preview */}
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 px-4">
{/* Hermès Birkin Card */}
<a
href="https://www.fashionphile.com/shop/hermes?search=birkin+25"
target="_blank"
rel="noopener noreferrer"
className="group relative bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-3xl overflow-hidden hover:border-amber-500/50 transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/20 transform hover:-translate-y-2"
>
<div className="absolute top-6 right-6 z-10 px-4 py-2 bg-green-500/90 backdrop-blur-sm rounded-full text-xs font-bold text-black">
+12.4%
</div>
<div className="relative w-full h-64 bg-gradient-to-br from-gray-800 to-gray-900 overflow-hidden">
<Image
src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=800&q=80"
alt="Hermès Birkin 25"
fill
className="object-cover group-hover:scale-110 transition-transform duration-500"
unoptimized
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
</div>
<div className="p-8">
<h3 className="text-2xl font-bold mb-3">Hermès Birkin 25</h3>
<p className="text-base text-gray-400 mb-6">Togo Leather • Gold Hardware</p>
<div className="flex items-center justify-between mb-4">
<div>
<div className="text-sm text-gray-500 mb-1">Price per Share</div>
<div className="text-3xl font-bold text-amber-400">$25</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-500 mb-1">Total Value</div>
<div className="text-2xl font-bold">$42,000</div>
</div>
</div>
<div className="pt-4 border-t border-white/10 text-sm text-amber-400 font-semibold flex items-center justify-center gap-2">
View on Fashionphile
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
</div>
</a>
{/* Chanel Card */}
<a
href="https://www.rebag.com/shop/chanel?q=classic+flap"
target="_blank"
rel="noopener noreferrer"
className="group relative bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-3xl overflow-hidden hover:border-amber-500/50 transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/20 transform hover:-translate-y-2"
>
<div className="absolute top-6 right-6 z-10 px-4 py-2 bg-blue-500/90 backdrop-blur-sm rounded-full text-xs font-bold text-white">
HOT
</div>
<div className="relative w-full h-64 bg-gradient-to-br from-gray-800 to-gray-900 overflow-hidden">
<Image
src="https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=800&q=80"
alt="Chanel Classic Flap"
fill
className="object-cover group-hover:scale-110 transition-transform duration-500"
unoptimized
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
</div>
<div className="p-8">
<h3 className="text-2xl font-bold mb-3">Chanel Classic Flap</h3>
<p className="text-base text-gray-400 mb-6">Medium • Caviar • Gold</p>
<div className="flex items-center justify-between mb-4">
<div>
<div className="text-sm text-gray-500 mb-1">Price per Share</div>
<div className="text-3xl font-bold text-amber-400">$15</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-500 mb-1">Total Value</div>
<div className="text-2xl font-bold">$12,500</div>
</div>
</div>
<div className="pt-4 border-t border-white/10 text-sm text-amber-400 font-semibold flex items-center justify-center gap-2">
View on Rebag
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
</div>
</a>
{/* Louis Vuitton Card */}
<a
href="https://www.therealreal.com/designers/louis-vuitton/handbags?keywords=neverfull"
target="_blank"
rel="noopener noreferrer"
className="group relative bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-3xl overflow-hidden hover:border-amber-500/50 transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/20 transform hover:-translate-y-2"
>
<div className="absolute top-6 right-6 z-10 px-4 py-2 bg-purple-500/90 backdrop-blur-sm rounded-full text-xs font-bold text-white">
NEW
</div>
<div className="relative w-full h-64 bg-gradient-to-br from-gray-800 to-gray-900 overflow-hidden">
<Image
src="https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=800&q=80"
alt="Louis Vuitton Neverfull"
fill
className="object-cover group-hover:scale-110 transition-transform duration-500"
unoptimized
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
</div>
<div className="p-8">
<h3 className="text-2xl font-bold mb-3">Louis Vuitton Neverfull</h3>
<p className="text-base text-gray-400 mb-6">MM • Monogram • Classic</p>
<div className="flex items-center justify-between mb-4">
<div>
<div className="text-sm text-gray-500 mb-1">Price per Share</div>
<div className="text-3xl font-bold text-amber-400">$10</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-500 mb-1">Total Value</div>
<div className="text-2xl font-bold">$2,800</div>
</div>
</div>
<div className="pt-4 border-t border-white/10 text-sm text-amber-400 font-semibold flex items-center justify-center gap-2">
View on The RealReal
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
</div>
</a>
</div>
{/* Trust Badges */}
<div className="mt-16 pt-12 border-t border-white/10">
<p className="text-sm text-gray-500 mb-6">SECURE & COMPLIANT</p>
<div className="flex flex-wrap items-center justify-center gap-12 opacity-50">
<div className="text-gray-600 font-bold text-sm">🔒 SEC-REGULATED</div>
<div className="text-gray-600 font-bold text-sm">🛡️ INSURED VAULTS</div>
<div className="text-gray-600 font-bold text-sm">🔗 BLOCKCHAIN VERIFIED</div>
<div className="text-gray-600 font-bold text-sm">✓ AUTHENTICATED</div>
</div>
</div>
</div>
</section>
{/* How It Works Section */}
<section id="how-it-works" className="relative py-32 bg-gradient-to-b from-black via-gray-900 to-black">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-20">
<h2 className="text-4xl md:text-6xl font-extrabold mb-6">
How It <span className="bg-gradient-to-r from-amber-400 to-orange-500 bg-clip-text text-transparent">Works</span>
</h2>
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
Invest in luxury handbags in 3 simple steps
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
{/* Step 1 */}
<div className="text-center">
<div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center text-3xl font-bold text-black shadow-2xl shadow-amber-500/30">
1
</div>
<h3 className="text-2xl font-bold mb-4">Browse & Discover</h3>
<p className="text-gray-400 leading-relaxed">
Explore our curated collection of authenticated luxury handbags from top brands like Hermès, Chanel, and Louis Vuitton.
</p>
</div>
{/* Step 2 */}
<div className="text-center">
<div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center text-3xl font-bold text-black shadow-2xl shadow-amber-500/30">
2
</div>
<h3 className="text-2xl font-bold mb-4">Invest Fractionally</h3>
<p className="text-gray-400 leading-relaxed">
Buy shares starting at just $10. Own a piece of luxury without the full price tag. Blockchain-verified ownership.
</p>
</div>
{/* Step 3 */}
<div className="text-center">
<div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center text-3xl font-bold text-black shadow-2xl shadow-amber-500/30">
3
</div>
<h3 className="text-2xl font-bold mb-4">Earn & Trade</h3>
<p className="text-gray-400 leading-relaxed">
Watch your investment grow as luxury prices appreciate. Trade shares anytime on our secondary marketplace.
</p>
</div>
</div>
</div>
</section>
{/* Why Luxury Handbags Section */}
<section className="relative py-32 bg-black">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<h2 className="text-4xl md:text-5xl font-extrabold mb-6">
Why Luxury <span className="bg-gradient-to-r from-amber-400 to-orange-500 bg-clip-text text-transparent">Handbags?</span>
</h2>
<p className="text-xl text-gray-400 mb-8 leading-relaxed">
Luxury handbags have historically outperformed traditional investments, with Hermès Birkins appreciating an average of 14.2% annually — beating the S&P 500.
</p>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
<span className="text-2xl">📈</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2">Proven Returns</h3>
<p className="text-gray-400">Hermès Birkin bags have appreciated 500% over the last 35 years.</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
<span className="text-2xl">🛡️</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2">Tangible Assets</h3>
<p className="text-gray-400">Unlike stocks, luxury bags are physical assets stored in secure, insured vaults.</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
<span className="text-2xl">🔗</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2">Blockchain Verified</h3>
<p className="text-gray-400">Every share is backed by an NFT certificate of fractional ownership.</p>
</div>
</div>
</div>
</div>
<div className="relative">
<div className="bg-gradient-to-br from-gray-900 to-black border border-white/10 rounded-3xl p-8">
<h3 className="text-2xl font-bold mb-6">Performance Comparison</h3>
<div className="space-y-4">
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-gray-400">Hermès Birkin</span>
<span className="font-bold text-green-400">+14.2%</span>
</div>
<div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-green-500 to-emerald-400" style={{ width: '95%' }}></div>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-gray-400">S&P 500</span>
<span className="font-bold text-blue-400">+10.2%</span>
</div>
<div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-blue-500 to-cyan-400" style={{ width: '68%' }}></div>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-gray-400">Real Estate</span>
<span className="font-bold text-purple-400">+8.5%</span>
</div>
<div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-purple-500 to-pink-400" style={{ width: '57%' }}></div>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-gray-400">Gold</span>
<span className="font-bold text-yellow-400">+5.1%</span>
</div>
<div className="w-full h-3 bg-gray-800 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-yellow-500 to-amber-400" style={{ width: '34%' }}></div>
</div>
</div>
</div>
<p className="text-xs text-gray-500 mt-6">
*Average annual returns over 10 years. Past performance does not guarantee future results.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="relative py-16 bg-black border-t border-white/10">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div>
<div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-lg flex items-center justify-center">
<span className="text-xl">💎</span>
</div>
<span className="text-xl font-bold">LUXVAULT</span>
</div>
<p className="text-gray-400 text-sm">
Democratizing luxury investment through fractional ownership.
</p>
</div>
<div>
<h4 className="font-bold mb-4">Platform</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li><a href="#" className="hover:text-white transition-colors">How It Works</a></li>
<li><a href="#" className="hover:text-white transition-colors">Marketplace</a></li>
<li><a href="#" className="hover:text-white transition-colors">Pricing</a></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-4">Company</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li><a href="#" className="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" className="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" className="hover:text-white transition-colors">Press</a></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-4">Legal</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li><a href="#" className="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" className="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" className="hover:text-white transition-colors">Risk Disclosure</a></li>
</ul>
</div>
</div>
<div className="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between">
<p className="text-gray-500 text-sm mb-4 md:mb-0">
© 2025 LuxVault. All rights reserved. Securities offered through regulated broker-dealer.
</p>
<div className="flex items-center space-x-6">
<a href="#" className="text-gray-400 hover:text-white transition-colors">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</a>
<a href="#" className="text-gray-400 hover:text-white transition-colors">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
</footer>
<style jsx>{`
@keyframes grid-flow {
0% { transform: translateY(0); }
100% { transform: translateY(50px); }
}
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(10px);
}
}
`}</style>
</div>
)
}