Seed: services template (18 files)
This commit is contained in:
@@ -0,0 +1,269 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
ArrowRight, Palette, Code, Megaphone, Search, Smartphone, Cloud,
|
||||
Star, Linkedin, Compass, PenTool, Rocket, Award, Users
|
||||
} from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const services = [
|
||||
{ icon: Palette, title: "Brand & Design", desc: "Stunning visual identities, UI/UX design systems, and creative direction that captures your brand essence.", to: "/services" },
|
||||
{ icon: Code, title: "Web Development", desc: "Performant, accessible websites and web applications built with modern frameworks and best practices.", to: "/services" },
|
||||
{ icon: Megaphone, title: "Digital Marketing", desc: "Data-driven campaigns across paid, organic, and social channels that maximize your ROI.", to: "/services" },
|
||||
{ icon: Search, title: "SEO & Analytics", desc: "Technical SEO audits, keyword strategy, and analytics dashboards to grow your organic traffic.", to: "/services" },
|
||||
{ icon: Smartphone, title: "Mobile Apps", desc: "Native and cross-platform mobile applications designed for engagement and retention.", to: "/services" },
|
||||
{ icon: Cloud, title: "Cloud & DevOps", desc: "Scalable cloud infrastructure, CI/CD pipelines, and monitoring for reliable deployments.", to: "/services" },
|
||||
];
|
||||
|
||||
const processSteps = [
|
||||
{ icon: Compass, num: "01", title: "Discovery", desc: "We dive deep into your goals, audience, and competitors to shape the strategy." },
|
||||
{ icon: PenTool, num: "02", title: "Design", desc: "Wireframes, prototypes, and polished visuals crafted for usability and delight." },
|
||||
{ icon: Code, num: "03", title: "Develop", desc: "Clean, tested code delivered in agile sprints with full transparency." },
|
||||
{ icon: Rocket, num: "04", title: "Deliver", desc: "Launch, monitor, and iterate with ongoing support and optimization." },
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: "500+", label: "Projects Delivered" },
|
||||
{ value: "98%", label: "Client Satisfaction" },
|
||||
{ value: "$2M+", label: "Revenue Generated" },
|
||||
{ value: "50+", label: "Team Members" },
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{ company: "Acme Corp", quote: "Apex Studio transformed our online presence. Revenue increased 40% within three months of launching our new site.", name: "Emily Chen", title: "VP Marketing" },
|
||||
{ company: "Globex Inc", quote: "Their design process was collaborative and transparent. We felt like true partners from day one.", name: "Marcus Lee", title: "CEO" },
|
||||
{ company: "NovaTech", quote: "The mobile app they built exceeded every benchmark. Five stars is not enough.", name: "Sara Patel", title: "Product Director" },
|
||||
];
|
||||
|
||||
const team = [
|
||||
{ name: "Alex Rivera", role: "Creative Director", gradient: "from-violet-400 to-indigo-500" },
|
||||
{ name: "Jordan Wu", role: "Lead Developer", gradient: "from-rose-400 to-orange-500" },
|
||||
{ name: "Priya Sharma", role: "UX Strategist", gradient: "from-emerald-400 to-teal-500" },
|
||||
{ name: "David Kim", role: "Marketing Lead", gradient: "from-amber-400 to-pink-500" },
|
||||
];
|
||||
|
||||
const clientLogos = ["Stripe", "Vercel", "Notion", "Linear", "Figma", "Framer"];
|
||||
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden pt-20">
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/3 left-1/4 w-72 h-72 rounded-full bg-primary/10 blur-[100px]" />
|
||||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-violet-500/8 blur-[120px]" />
|
||||
<div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
|
||||
</div>
|
||||
<div className="relative z-10 mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-[1.1]">
|
||||
We build digital products that drive growth
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground leading-relaxed max-w-lg">
|
||||
Full-service digital agency delivering world-class design, development, and marketing solutions for ambitious brands.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-4">
|
||||
<Button asChild size="lg" className="active:scale-[0.98]">
|
||||
<Link to="/contact">Start a Project <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="active:scale-[0.98]">
|
||||
<Link to="/case-study">Our Work</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-8 text-sm text-muted-foreground flex items-center gap-2">
|
||||
<Award className="h-4 w-4 text-primary" />
|
||||
Trusted by Fortune 500 companies
|
||||
</p>
|
||||
<p className="flex items-center gap-2 text-sm text-muted-foreground mt-3">
|
||||
<Users className="h-4 w-4 text-primary" /> Trusted by 500+ companies worldwide
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden lg:flex justify-center">
|
||||
<div className="relative w-full max-w-md aspect-square rounded-3xl bg-gradient-to-br from-primary/20 via-violet-500/15 to-rose-500/10 border border-primary/10 flex items-center justify-center overflow-hidden animate-scale-in">
|
||||
<div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-violet-500/20 blur-2xl" />
|
||||
<div className="absolute -bottom-8 -left-8 w-32 h-32 rounded-full bg-primary/20 blur-2xl" />
|
||||
<div className="w-3/4 h-3/4 rounded-2xl bg-gradient-to-br from-primary/30 to-violet-500/20 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CLIENT LOGOS ── */}
|
||||
<section className="py-12 border-y bg-muted/20 animate-fade-in">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center">
|
||||
{clientLogos.map((name, i) => (
|
||||
<div key={i} className="text-center text-sm font-semibold text-muted-foreground/40 grayscale hover:grayscale-0 hover:text-foreground transition-all duration-300 cursor-default">
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── SERVICES ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Services tailored to your needs</h2>
|
||||
<p className="mt-4 text-muted-foreground max-w-2xl mx-auto">From concept to launch, we provide end-to-end solutions that transform your digital presence.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
|
||||
{services.map((s, i) => (
|
||||
<Card key={i} className="group relative border hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 hover-card-lift">
|
||||
<CardHeader>
|
||||
<span className="absolute top-4 right-4 text-4xl font-black text-primary/5">0{i+1}</span>
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors shadow-lg shadow-primary/10">
|
||||
<s.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-lg">{s.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="leading-relaxed">{s.desc}</CardDescription>
|
||||
<Link to={s.to} className="inline-flex items-center gap-1 text-sm font-medium text-primary mt-4 group-hover:gap-2 transition-all">
|
||||
Learn More <ArrowRight className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── PROCESS ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Our Process</h2>
|
||||
<p className="mt-4 text-muted-foreground max-w-xl mx-auto">A proven four-step methodology that turns your vision into reality.</p>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
|
||||
{processSteps.map((step, i) => (
|
||||
<div key={i} className="relative text-center group">
|
||||
<div className="mx-auto w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-lg font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
{step.num}
|
||||
</div>
|
||||
{i < 3 && (
|
||||
<div className="hidden lg:block absolute top-7 left-[60%] w-[80%] text-muted-foreground/40">
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</div>
|
||||
)}
|
||||
<step.icon className="mx-auto h-6 w-6 text-primary/70 mb-2" />
|
||||
<h3 className="font-semibold text-lg mb-2">{step.title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{step.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── RESULTS ── */}
|
||||
<section className="py-24 bg-foreground text-background">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Results That Speak</h2>
|
||||
<p className="mt-4 text-background/60 max-w-xl mx-auto">Numbers our clients love to share.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 stagger">
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} className="text-center animate-fade-up">
|
||||
<div className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-gradient-to-r from-violet-300 to-cyan-300 bg-clip-text text-transparent">
|
||||
{s.value}
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-background/60">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center mt-12">
|
||||
<Link to="/case-study" className="inline-flex items-center gap-2 text-sm font-medium text-background/80 hover:text-background transition-colors">
|
||||
View our case studies <ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TESTIMONIALS ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">What our clients say</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6 stagger">
|
||||
{testimonials.map((t, i) => (
|
||||
<Card key={i} className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
|
||||
<CardHeader>
|
||||
<div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-xs font-bold text-muted-foreground mb-2">
|
||||
{t.company.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
<div className="flex gap-0.5 mb-2">
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground italic">"{t.quote}"</p>
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<div className="font-semibold text-sm">{t.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{t.title} at {t.company}</div>
|
||||
</div>
|
||||
<Link to="/case-study" className="inline-flex items-center gap-1 text-xs font-medium text-primary mt-3 hover:gap-2 transition-all">
|
||||
View Case Study <ArrowRight className="h-3 w-3" />
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TEAM PREVIEW ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Meet the Team</h2>
|
||||
<p className="mt-4 text-muted-foreground max-w-xl mx-auto">Talented people who love what they do.</p>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
|
||||
{team.map((m, i) => (
|
||||
<div key={i} className="text-center group">
|
||||
<div className={`mx-auto w-24 h-24 rounded-full bg-gradient-to-br \${m.gradient} mb-4 hover:scale-110 hover:ring-4 hover:ring-primary/20 transition-all shadow-lg`} />
|
||||
<h3 className="font-semibold">{m.name}</h3>
|
||||
<p className="text-sm text-primary font-medium">{m.role}</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">Passionate about great work</p>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center mt-12">
|
||||
<Button asChild variant="outline" className="active:scale-[0.98]">
|
||||
<Link to="/team">Meet the Full Team <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="rounded-3xl bg-gradient-to-br from-primary via-violet-600 to-indigo-700 p-12 sm:p-16 text-center text-white">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Ready to start your next project?</h2>
|
||||
<p className="mt-4 text-white/80 max-w-lg mx-auto">Let’s create something extraordinary together. Get in touch for a free consultation.</p>
|
||||
<Button asChild size="lg" variant="secondary" className="mt-8 active:scale-[0.98]">
|
||||
<Link to="/contact">Get in Touch <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user