51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { Suspense } from 'react';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
// Dynamically import the 3D component to avoid SSR issues
|
|
const HeroModel = dynamic(() => import('@/components/3d/HeroModel'), {
|
|
ssr: false,
|
|
loading: () => <div className="w-full h-[300px] md:h-[400px] flex items-center justify-center">
|
|
<div className="animate-pulse text-pink-500">Loading 3D model...</div>
|
|
</div>
|
|
});
|
|
|
|
export default function HeroSection() {
|
|
return (
|
|
<section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
|
|
<div className="space-y-4 max-w-3xl">
|
|
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
|
|
Streamlined E-commerce <span className="text-[#D53F8C]">Management</span>
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
|
|
Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 3D Model */}
|
|
<div className="w-full max-w-xl my-8">
|
|
<Suspense fallback={<div className="h-[300px] w-full bg-gray-900 animate-pulse rounded-lg"></div>}>
|
|
<HeroModel />
|
|
</Suspense>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link href="/dashboard">
|
|
<Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
|
|
Go to Dashboard
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<Link href="/auth/register">
|
|
<Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
|
|
Create Account
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|