85 lines
4.1 KiB
TypeScript
85 lines
4.1 KiB
TypeScript
import { Hero } from "@/components/hero";
|
|
import { Services } from "@/components/services";
|
|
import { Pricing } from "@/components/pricing";
|
|
import { ContactSection } from "@/components/contact-section";
|
|
import { Footer } from "@/components/footer";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { CheckCircle2 } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="bg-white text-neutral-900">
|
|
<Hero />
|
|
|
|
{/* Why Choose Us Section with Bright Background */}
|
|
<section className="relative py-32 overflow-hidden bg-neutral-50">
|
|
<div className="absolute inset-0 -z-10">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop"
|
|
alt="Bright Workspace"
|
|
fill
|
|
className="object-cover opacity-5"
|
|
/>
|
|
</div>
|
|
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
|
<div>
|
|
<Heading className="text-4xl md:text-5xl mb-6 text-neutral-900 font-bold">Why Choose Websitter?</Heading>
|
|
<Subheading className="mb-10 text-neutral-600 text-lg font-medium">
|
|
We don't just build websites; we build growth engines for your business. Our process is designed for speed, quality, and results.
|
|
</Subheading>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{[
|
|
"Modern & mobile-friendly designs",
|
|
"SEO-optimized for local search",
|
|
"Fast delivery (usually within 7 days)",
|
|
"Affordable pricing for small businesses",
|
|
"Free demo before you commit",
|
|
"24/7 Dedicated Support",
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3 group">
|
|
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary transition-colors">
|
|
<CheckCircle2 className="w-5 h-5 text-primary group-hover:text-white" />
|
|
</div>
|
|
<span className="font-bold text-neutral-800">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative group">
|
|
<div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-2xl opacity-50" />
|
|
<div className="relative aspect-video rounded-2xl overflow-hidden border border-neutral-200 shadow-2xl">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop"
|
|
alt="Analytics Preview"
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
<div className="absolute inset-0 bg-white/10 flex items-center justify-center">
|
|
<div className="p-8 bg-white/95 backdrop-blur-md rounded-2xl border border-neutral-200 shadow-2xl max-w-xs text-center transform group-hover:scale-105 transition-transform duration-500">
|
|
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
|
|
<div className="w-0 h-0 border-t-[10px] border-t-transparent border-l-[15px] border-l-white border-b-[10px] border-b-transparent ml-1" />
|
|
</div>
|
|
<p className="text-lg font-black text-neutral-900 mb-2 uppercase tracking-widest">Free Demo</p>
|
|
<p className="text-sm text-neutral-600 leading-relaxed font-medium">We build your site first. You pay only if you love it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Services />
|
|
<Pricing />
|
|
<ContactSection />
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|