Initial commit

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/(public)/about/page.tsx

@@ -0,0 +1,84 @@
+import { Users, Target, Award, Zap } from "lucide-react"
+
+const values = [
+    {
+        icon: Target,
+        title: "Mission-Driven",
+        description: "Every project starts with understanding your goals. We align our expertise with your vision to deliver measurable results.",
+    },
+    {
+        icon: Users,
+        title: "Collaborative",
+        description: "We believe the best products are built together. You're involved at every step — from strategy to launch.",
+    },
+    {
+        icon: Award,
+        title: "Quality Obsessed",
+        description: "We don't cut corners. Every pixel, every line of code, every interaction is crafted to the highest standard.",
+    },
+    {
+        icon: Zap,
+        title: "Future-Ready",
+        description: "We build with tomorrow in mind — scalable architectures, modern frameworks, and forward-thinking design.",
+    },
+]
+
+export default function AboutPage() {
+    return (
+        <div className="py-20">
+            <div className="container">
+                {/* Hero */}
+                <div className="animate-fade-in-up text-center mb-20 max-w-3xl mx-auto">
+                    <p className="text-sm font-semibold text-primary uppercase tracking-[0.15em] mb-3">About Us</p>
+                    <h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6">
+                        A small team with{" "}
+                        <span className="text-primary">big ambitions</span>
+                    </h1>
+                    <p className="text-lg text-muted-foreground leading-relaxed">
+                        We&apos;re a passionate team of designers, developers, and strategists who love turning ideas into
+                        exceptional digital products. Founded with a simple belief: great software should be accessible to everyone.
+                    </p>
+                </div>
+
+                {/* Stats */}
+                <div className="animate-fade-in-up animate-delay-2 grid grid-cols-2 md:grid-cols-4 gap-8 mb-20">
+                    {[
+                        { value: "5+", label: "Years" },
+                        { value: "50+", label: "Projects" },
+                        { value: "30+", label: "Happy Clients" },
+                        { value: "98%", label: "Satisfaction" },
+                    ].map((stat) => (
+                        <div key={stat.label} className="text-center p-6 rounded-xl border bg-card">
+                            <div className="text-3xl font-bold text-primary mb-1">
+                                {stat.value}
+                            </div>
+                            <div className="text-sm text-muted-foreground">{stat.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Values */}
+                <div className="animate-fade-in-up animate-delay-3">
+                    <h2 className="text-2xl font-bold text-center mb-12">What We Stand For</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        {values.map((value, i) => (
+                            <div
+                                key={value.title}
+                                className="animate-fade-in-up flex gap-4 p-6 rounded-xl border bg-card hover:border-primary/20 hover:shadow-lg transition-all duration-500"
+                                style={{ animationDelay: `${0.4 + i * 0.1}s` }}
+                            >
+                                <div className="shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
+                                    <value.icon className="w-6 h-6" suppressHydrationWarning />
+                                </div>
+                                <div>
+                                    <h3 className="font-semibold mb-1">{value.title}</h3>
+                                    <p className="text-sm text-muted-foreground leading-relaxed">{value.description}</p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

app/(public)/blog/[slug]/page.tsx

@@ -0,0 +1,280 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, ArrowRight, CalendarDays, Share2, Linkedin, Twitter, Link as LinkIcon } from 'lucide-react'
+import { format } from 'date-fns'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api'
+
+// Define the shape of our BlogPost
+interface BlogPost {
+    id: string
+    title: string
+    slug: string
+    content: string
+    excerpt: string | null
+    featuredImage: string | null
+    tags: string | null
+    publishedAt: string | null
+    createdAt: string
+    author: {
+        name: string | null
+    }
+}
+
+// Fetch a single post by slug
+async function getPost(slug: string): Promise<BlogPost | null> {
+    try {
+        const res = await fetch(`${API_URL}/blog/${slug}`, {
+            next: { revalidate: 60 } // Revalidate every minute
+        })
+        if (!res.ok) {
+            if (res.status === 404) return null
+            throw new Error('Failed to fetch post')
+        }
+        return res.json()
+    } catch (error) {
+        console.error("Error fetching post:", error)
+        return null
+    }
+}
+
+// Fetch related posts
+async function getRelated(slug: string): Promise<BlogPost[]> {
+    try {
+        const res = await fetch(`${API_URL}/blog/${slug}/related`, {
+            next: { revalidate: 60 }
+        })
+        if (!res.ok) return []
+        return res.json()
+    } catch {
+        return []
+    }
+}
+
+// Dynamically generate metadata for SEO
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+    const resolvedParams = await params;
+    const post = await getPost(resolvedParams.slug)
+
+    if (!post) {
+        return {
+            title: 'Post Not Found | NexaFlow',
+        }
+    }
+
+    const plainTextExcerpt = post.excerpt || post.content.replace(/<[^>]*>?/gm, '').substring(0, 160)
+
+    return {
+        title: `${post.title} | NexaFlow Blog`,
+        description: plainTextExcerpt,
+        openGraph: {
+            title: post.title,
+            description: plainTextExcerpt,
+            type: 'article',
+            publishedTime: post.publishedAt || post.createdAt,
+            authors: [post.author?.name || 'NexaFlow Team'],
+            images: post.featuredImage ? [{ url: post.featuredImage }] : [],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: post.title,
+            description: plainTextExcerpt,
+            images: post.featuredImage ? [post.featuredImage] : [],
+        }
+    }
+}
+
+export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
+    const resolvedParams = await params;
+    const post = await getPost(resolvedParams.slug)
+
+    if (!post) {
+        notFound()
+    }
+
+    const relatedPosts = await getRelated(resolvedParams.slug)
+
+    const publishDate = post.publishedAt ? new Date(post.publishedAt) : new Date(post.createdAt)
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'BlogPosting',
+        headline: post.title,
+        image: post.featuredImage ? [post.featuredImage] : [],
+        datePublished: publishDate.toISOString(),
+        author: {
+            '@type': 'Person',
+            name: post.author?.name || 'NexaFlow Team',
+        },
+    }
+
+    const tags = post.tags ? JSON.parse(post.tags) : []
+
+    return (
+        <article className="py-20 animate-fade-in-up">
+            {/* Inject JSON-LD for SEO */}
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+            />
+
+            <div className="container max-w-4xl">
+                {/* Back Link */}
+                <div className="mb-10">
+                    <Button variant="ghost" asChild className="pl-0 hover:bg-transparent hover:text-primary">
+                        <Link href="/blog">
+                            <ArrowLeft className="mr-2 h-4 w-4" suppressHydrationWarning />
+                            Back to Blog
+                        </Link>
+                    </Button>
+                </div>
+
+                {/* Header */}
+                <header className="mb-12 text-center md:text-left">
+                    {tags.length > 0 && (
+                        <div className="flex flex-wrap items-center justify-center md:justify-start gap-2 mb-4">
+                            {tags.map((tag: string) => (
+                                <span key={tag} className="text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary">
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
+                    )}
+
+                    <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                        {post.title}
+                    </h1>
+
+                    <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-2">
+                            <span className="font-medium text-foreground">{post.author?.name || 'NexaFlow Team'}</span>
+                        </div>
+                        <span className="hidden sm:inline">•</span>
+                        <div className="flex items-center gap-1.5">
+                            <CalendarDays className="h-4 w-4" suppressHydrationWarning />
+                            <time dateTime={publishDate.toISOString()}>
+                                {format(publishDate, 'MMMM d, yyyy')}
+                            </time>
+                        </div>
+                    </div>
+                </header>
+
+                {/* Featured Image */}
+                {post.featuredImage && (
+                    <div className="relative w-full aspect-[16/9] mb-12 rounded-2xl overflow-hidden bg-muted">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            src={post.featuredImage}
+                            alt={post.title}
+                            className="object-cover w-full h-full"
+                        />
+                    </div>
+                )}
+
+                {/* Content & Sidebar Layout */}
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
+
+                    {/* Share Sidebar (Desktop) */}
+                    <div className="hidden lg:block lg:col-span-1">
+                        <div className="sticky top-24 flex flex-col gap-4">
+                            <div className="h-px w-full bg-border mb-2" />
+                            <p className="text-xs font-medium uppercase text-muted-foreground mb-1">Share</p>
+                            <Button variant="outline" size="icon" className="rounded-full w-10 h-10 shrink-0" aria-label="Share on Twitter">
+                                <Twitter className="h-4 w-4" suppressHydrationWarning />
+                            </Button>
+                            <Button variant="outline" size="icon" className="rounded-full w-10 h-10 shrink-0" aria-label="Share on LinkedIn">
+                                <Linkedin className="h-4 w-4" suppressHydrationWarning />
+                            </Button>
+                            <Button variant="outline" size="icon" className="rounded-full w-10 h-10 shrink-0" aria-label="Copy link to clipboard">
+                                <LinkIcon className="h-4 w-4" suppressHydrationWarning />
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* Main Content */}
+                    <div className="lg:col-span-9 prose prose-lg dark:prose-invert max-w-none prose-headings:font-bold prose-a:text-primary hover:prose-a:text-primary/80 prose-img:rounded-xl">
+                        {/* We use dangerouslySetInnerHTML to render the rich text (HTML generated by the frontend editor later) */}
+                        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+                    </div>
+                </div>
+
+                {/* Mobile Share (Bottom) */}
+                <div className="mt-12 pt-8 border-t lg:hidden">
+                    <p className="text-sm font-medium mb-4">Share this article</p>
+                    <div className="flex gap-3">
+                        <Button variant="outline" size="sm" aria-label="Share on Twitter">
+                            <Twitter className="mr-2 h-4 w-4" suppressHydrationWarning /> Twitter
+                        </Button>
+                        <Button variant="outline" size="sm" aria-label="Share on LinkedIn">
+                            <Linkedin className="mr-2 h-4 w-4" suppressHydrationWarning /> LinkedIn
+                        </Button>
+                        <Button variant="outline" size="sm" aria-label="Copy link to clipboard">
+                            <Share2 className="mr-2 h-4 w-4" suppressHydrationWarning /> Copy Link
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Related Articles Matrix */}
+                {relatedPosts.length > 0 && (
+                    <div className="mt-20 pt-16 border-t">
+                        <div className="flex items-center justify-between mb-8">
+                            <h2 className="text-3xl font-bold tracking-tight">Related Articles</h2>
+                            <Button variant="ghost" asChild className="hidden sm:flex">
+                                <Link href="/blog">
+                                    View all <ArrowRight className="ml-2 h-4 w-4" suppressHydrationWarning />
+                                </Link>
+                            </Button>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {relatedPosts.map((relatedPost) => {
+                                const wordCount = relatedPost.content ? relatedPost.content.split(/\s+/).length : 0
+                                const readTime = Math.max(1, Math.ceil(wordCount / 200))
+
+                                const relatedTags = relatedPost.tags ? JSON.parse(relatedPost.tags) : []
+                                const primaryCategory = relatedTags.length > 0 ? relatedTags[0] : "Article"
+
+                                return (
+                                    <Link key={relatedPost.id} href={`/blog/${relatedPost.slug}`} className="w-full">
+                                        <Card className="h-full flex flex-col group border hover:border-primary/20 hover:shadow-lg transition-all duration-500 cursor-pointer overflow-hidden bg-background">
+                                            {relatedPost.featuredImage && (
+                                                <div className="h-40 w-full bg-muted overflow-hidden">
+                                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                    <img
+                                                        src={relatedPost.featuredImage}
+                                                        alt={relatedPost.title}
+                                                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                                                    />
+                                                </div>
+                                            )}
+                                            <CardHeader className="flex-none pb-2">
+                                                <div className="flex items-center justify-between mb-2">
+                                                    <span className="text-xs font-semibold text-primary uppercase tracking-wider">{primaryCategory}</span>
+                                                    <span className="text-xs text-muted-foreground">{readTime} min read</span>
+                                                </div>
+                                                <CardTitle className="text-lg group-hover:text-primary transition-colors line-clamp-2">{relatedPost.title}</CardTitle>
+                                            </CardHeader>
+                                            <CardContent className="flex-grow flex flex-col justify-end pt-2">
+                                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-auto">
+                                                    <CalendarDays className="h-3.5 w-3.5" suppressHydrationWarning />
+                                                    {relatedPost.publishedAt ? format(new Date(relatedPost.publishedAt), 'MMM dd, yyyy') : format(new Date(relatedPost.createdAt), 'MMM dd, yyyy')}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    </Link>
+                                )
+                            })}
+                        </div>
+                        <Button variant="outline" asChild className="w-full mt-6 sm:hidden">
+                            <Link href="/blog">
+                                View all references
+                            </Link>
+                        </Button>
+                    </div>
+                )}
+
+            </div>
+        </article>
+    )
+}

app/(public)/blog/page.tsx

@@ -0,0 +1,99 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { CalendarDays } from "lucide-react"
+import Link from "next/link"
+import { format } from "date-fns"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+    title: "Blog | NexaFlow - Insights on Web Development & Design",
+    description: "Read our latest thoughts on Next.js, web development, UI/UX design, and building great digital products.",
+}
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+async function getPosts() {
+    try {
+        const res = await fetch(`${API_URL}/blog`, {
+            next: { revalidate: 60 } // Revalidate every minute
+        })
+        if (!res.ok) return []
+        return res.json()
+    } catch (error) {
+        console.error("Failed to fetch blog posts:", error)
+        return []
+    }
+}
+
+export default async function BlogPage() {
+    const posts = await getPosts()
+
+    return (
+        <div className="py-20">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16 max-w-3xl mx-auto">
+                    <p className="text-sm font-semibold text-primary uppercase tracking-[0.15em] mb-3">Blog</p>
+                    <h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6">
+                        Insights &{" "}
+                        <span className="text-primary">ideas</span>
+                    </h1>
+                    <p className="text-lg text-muted-foreground leading-relaxed">
+                        Thoughts on design, development, and building great digital products.
+                    </p>
+                </div>
+
+                {posts.length === 0 ? (
+                    <div className="text-center text-muted-foreground py-10">
+                        <p>No published articles found.</p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                        {posts.map((post: any, i: number) => {
+                            // Quick read time estimate: 1 min per 200 words
+                            const wordCount = post.content ? post.content.split(/\s+/).length : 0
+                            const readTime = Math.max(1, Math.ceil(wordCount / 200))
+
+                            // Safe tags
+                            const tags = post.tags ? JSON.parse(post.tags) : []
+                            const primaryCategory = tags.length > 0 ? tags[0] : "Article"
+
+                            return (
+                                <div key={post.id} className="animate-fade-in-up flex" style={{ animationDelay: `${i * 0.1}s` }}>
+                                    <Link href={`/blog/${post.slug}`} className="w-full">
+                                        <Card className="h-full flex flex-col group border hover:border-primary/20 hover:shadow-lg transition-all duration-500 cursor-pointer overflow-hidden">
+                                            {post.featuredImage && (
+                                                <div className="h-48 w-full bg-muted overflow-hidden">
+                                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                    <img
+                                                        src={post.featuredImage}
+                                                        alt={post.title}
+                                                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                                                    />
+                                                </div>
+                                            )}
+                                            <CardHeader className="flex-none">
+                                                <div className="flex items-center justify-between mb-2">
+                                                    <span className="text-xs font-semibold text-primary uppercase tracking-wider">{primaryCategory}</span>
+                                                    <span className="text-xs text-muted-foreground">{readTime} min read</span>
+                                                </div>
+                                                <CardTitle className="text-lg group-hover:text-primary transition-colors line-clamp-2">{post.title}</CardTitle>
+                                            </CardHeader>
+                                            <CardContent className="flex-grow flex flex-col justify-between">
+                                                <p className="text-sm text-muted-foreground leading-relaxed mb-4 line-clamp-3">
+                                                    {post.excerpt || post.content.replace(/<[^>]*>?/gm, '').substring(0, 150) + "..."}
+                                                </p>
+                                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-auto pt-4 border-t border-border/50">
+                                                    <CalendarDays className="h-3.5 w-3.5" suppressHydrationWarning />
+                                                    {post.publishedAt ? format(new Date(post.publishedAt), 'MMM dd, yyyy') : format(new Date(post.createdAt), 'MMM dd, yyyy')}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    </Link>
+                                </div>
+                            )
+                        })}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

app/(public)/contact/page.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Mail, MapPin, Phone, Send } from "lucide-react"
+
+export default function ContactPage() {
+    return (
+        <div className="py-20">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16 max-w-3xl mx-auto">
+                    <p className="text-sm font-semibold text-primary uppercase tracking-[0.15em] mb-3">Contact</p>
+                    <h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6">
+                        Let&apos;s{" "}
+                        <span className="text-primary">talk</span>
+                    </h1>
+                    <p className="text-lg text-muted-foreground leading-relaxed">
+                        Have a project in mind? We&apos;d love to hear about it. Drop us a message and we&apos;ll get back to you within 24 hours.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 max-w-5xl mx-auto">
+                    {/* Contact info */}
+                    <div className="animate-fade-in-up animate-delay-2 lg:col-span-2 flex flex-col gap-6">
+                        <div className="flex items-start gap-4 p-4 rounded-xl border bg-card">
+                            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0">
+                                <Mail className="w-5 h-5" suppressHydrationWarning />
+                            </div>
+                            <div>
+                                <h3 className="font-semibold text-sm">Email</h3>
+                                <p className="text-sm text-muted-foreground">hello@nexaflow.dev</p>
+                            </div>
+                        </div>
+                        <div className="flex items-start gap-4 p-4 rounded-xl border bg-card">
+                            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0">
+                                <Phone className="w-5 h-5" suppressHydrationWarning />
+                            </div>
+                            <div>
+                                <h3 className="font-semibold text-sm">Phone</h3>
+                                <p className="text-sm text-muted-foreground">+91 98765 43210</p>
+                            </div>
+                        </div>
+                        <div className="flex items-start gap-4 p-4 rounded-xl border bg-card">
+                            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0">
+                                <MapPin className="w-5 h-5" suppressHydrationWarning />
+                            </div>
+                            <div>
+                                <h3 className="font-semibold text-sm">Location</h3>
+                                <p className="text-sm text-muted-foreground">Hyderabad, India</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Contact form */}
+                    <form
+                        className="animate-fade-in-up animate-delay-3 lg:col-span-3 flex flex-col gap-5 p-8 rounded-2xl border bg-card"
+                        onSubmit={(e) => e.preventDefault()}
+                    >
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div className="flex flex-col gap-1.5">
+                                <label className="text-sm font-medium" htmlFor="name">Name</label>
+                                <input id="name" placeholder="John Doe" className="h-10 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50" />
+                            </div>
+                            <div className="flex flex-col gap-1.5">
+                                <label className="text-sm font-medium" htmlFor="email">Email</label>
+                                <input id="email" type="email" placeholder="john@example.com" className="h-10 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50" />
+                            </div>
+                        </div>
+                        <div className="flex flex-col gap-1.5">
+                            <label className="text-sm font-medium" htmlFor="subject">Subject</label>
+                            <input id="subject" placeholder="Project inquiry" className="h-10 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50" />
+                        </div>
+                        <div className="flex flex-col gap-1.5">
+                            <label className="text-sm font-medium" htmlFor="message">Message</label>
+                            <textarea id="message" rows={5} placeholder="Tell us about your project..." className="rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" />
+                        </div>
+                        <Button type="submit" size="lg" className="self-start group">
+                            Send Message
+                            <Send className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" suppressHydrationWarning />
+                        </Button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}

app/(public)/layout.tsx

@@ -0,0 +1,16 @@
+import { Header } from "@/components/layout/Header"
+import { Footer } from "@/components/layout/Footer"
+
+export default function PublicLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <div className="flex min-h-screen flex-col">
+            <Header />
+            <main className="flex-1">{children}</main>
+            <Footer />
+        </div>
+    )
+}

app/(public)/page.tsx

@@ -0,0 +1,19 @@
+import { HeroSection } from "@/components/home/HeroSection";
+import { TrustIndicators } from "@/components/home/TrustIndicators";
+import { ServicesOverview } from "@/components/home/ServicesOverview";
+import { FeaturedPortfolio } from "@/components/home/FeaturedPortfolio";
+import { TestimonialsCarousel } from "@/components/home/TestimonialsCarousel";
+import { CTASection } from "@/components/home/CTASection";
+
+export default function Home() {
+  return (
+    <>
+      <HeroSection />
+      <TrustIndicators />
+      <ServicesOverview />
+      <FeaturedPortfolio />
+      <TestimonialsCarousel />
+      <CTASection />
+    </>
+  );
+}

app/(public)/portfolio/[slug]/page.tsx

@@ -0,0 +1,156 @@
+import { notFound } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { ArrowLeft, Star, ExternalLink } from "lucide-react"
+import { projects } from "@/lib/portfolio-data"
+
+export function generateStaticParams() {
+    return projects.map((p) => ({ slug: p.slug }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params
+    const project = projects.find((p) => p.slug === slug)
+    if (!project) return {}
+    return {
+        title: `${project.title} — NexaFlow Portfolio`,
+        description: project.description,
+    }
+}
+
+export default async function CaseStudyPage({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params
+    const project = projects.find((p) => p.slug === slug)
+    if (!project) notFound()
+
+    return (
+        <article className="pb-24">
+            {/* Hero banner */}
+            <div className={`relative bg-gradient-to-br ${project.gradient} py-20 md:py-28`}>
+                <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:3rem_3rem]" />
+                <div className="container relative z-10">
+                    <Button asChild variant="outline" size="sm" className="mb-8 bg-white/10 border-white/20 text-white hover:bg-white/20">
+                        <Link href="/portfolio">
+                            <ArrowLeft className="mr-2 h-4 w-4" suppressHydrationWarning />
+                            Back to Portfolio
+                        </Link>
+                    </Button>
+                    <p className="text-white/70 text-sm font-semibold uppercase tracking-widest mb-3">{project.category}</p>
+                    <h1 className="text-white sm:text-5xl lg:text-6xl mb-4">{project.title}</h1>
+                    <p className="text-white/80 text-lg max-w-2xl leading-relaxed">{project.description}</p>
+
+                    {/* Technology tags (SF-015) */}
+                    <div className="flex flex-wrap gap-2 mt-6">
+                        {project.tags.map((tag) => (
+                            <span key={tag} className="bg-white/15 text-white px-3 py-1 rounded-full text-xs font-medium backdrop-blur-sm">
+                                {tag}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div className="container mt-16">
+                {/* Key results metrics */}
+                {project.results && project.results.length > 0 && (
+                    <div className="animate-fade-in-up grid grid-cols-2 md:grid-cols-4 gap-6 mb-16 -mt-8 relative z-20">
+                        {project.results.map((r) => (
+                            <div key={r.metric} className="rounded-2xl border bg-card p-6 text-center shadow-lg">
+                                <div className="text-2xl font-extrabold text-primary mb-1">{r.value}</div>
+                                <p className="text-caption">{r.metric}</p>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {/* Case study content */}
+                <div className="max-w-3xl mx-auto space-y-12">
+                    {/* Overview */}
+                    <section className="animate-fade-in-up">
+                        <h2 className="mb-4">Overview</h2>
+                        <p className="text-body text-muted-foreground leading-relaxed">{project.overview}</p>
+                    </section>
+
+                    {/* Challenge */}
+                    <section className="animate-fade-in-up animate-delay-1">
+                        <h2 className="mb-4">The Challenge</h2>
+                        <div className="rounded-2xl border-l-4 border-destructive bg-destructive/5 p-6">
+                            <p className="text-body text-muted-foreground leading-relaxed">{project.challenge}</p>
+                        </div>
+                    </section>
+
+                    {/* Solution */}
+                    <section className="animate-fade-in-up animate-delay-2">
+                        <h2 className="mb-4">Our Solution</h2>
+                        <div className="rounded-2xl border-l-4 border-primary bg-primary/5 p-6">
+                            <p className="text-body text-muted-foreground leading-relaxed">{project.solution}</p>
+                        </div>
+                    </section>
+
+                    {/* Technologies Used */}
+                    <section className="animate-fade-in-up animate-delay-3">
+                        <h2 className="mb-4">Technologies Used</h2>
+                        <div className="flex flex-wrap gap-3">
+                            {project.tags.map((tag) => (
+                                <span key={tag} className="bg-secondary text-secondary-foreground px-4 py-2 rounded-xl text-sm font-medium">
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
+                    </section>
+
+                    {/* Client Testimonial (SF-017) */}
+                    {project.testimonial && (
+                        <section className="animate-fade-in-up">
+                            <h2 className="mb-4">Client Feedback</h2>
+                            <Card className="bg-muted border">
+                                <CardContent className="pt-6">
+                                    <div className="flex gap-0.5 mb-4" role="img" aria-label={`${project.testimonial.rating} out of 5 stars`}>
+                                        {[...Array(project.testimonial.rating)].map((_, j) => (
+                                            <Star key={j} className="w-4 h-4 fill-amber-400 text-amber-400" suppressHydrationWarning />
+                                        ))}
+                                    </div>
+                                    <blockquote className="text-body text-foreground leading-relaxed">
+                                        &ldquo;{project.testimonial.content}&rdquo;
+                                    </blockquote>
+                                </CardContent>
+                                <CardFooter className="flex items-center gap-4 border-t pt-4">
+                                    <Avatar className="h-10 w-10">
+                                        <AvatarFallback className="bg-primary/10 text-primary text-sm font-semibold">
+                                            {project.testimonial.avatar}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div>
+                                        <p className="font-semibold text-sm">{project.testimonial.name}</p>
+                                        <p className="text-caption">{project.testimonial.role}, {project.testimonial.company}</p>
+                                    </div>
+                                </CardFooter>
+                            </Card>
+                        </section>
+                    )}
+                </div>
+
+                {/* CTA */}
+                <div className="animate-fade-in-up text-center mt-16 pt-12 border-t">
+                    <h2 className="mb-4">Ready to build something like this?</h2>
+                    <p className="text-body text-muted-foreground mb-8 max-w-lg mx-auto">
+                        Let&apos;s discuss your project and see how we can help you achieve similar results.
+                    </p>
+                    <div className="flex justify-center gap-4">
+                        <Button asChild size="xl">
+                            <Link href="/quote">Start Your Project</Link>
+                        </Button>
+                        <Button asChild variant="outline" size="lg">
+                            <Link href="/portfolio">
+                                <ArrowLeft className="mr-2 h-4 w-4" suppressHydrationWarning />
+                                Back to Portfolio
+                            </Link>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </article>
+    )
+}

app/(public)/portfolio/page.tsx

@@ -0,0 +1,50 @@
+import { ProjectGallery, Project } from "@/components/portfolio/ProjectGallery"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+async function getPortfolioItems() {
+    try {
+        const res = await fetch(`${API_URL}/portfolio`, { cache: 'no-store' })
+        if (!res.ok) return []
+        const data = await res.json()
+
+        return data.map((item: any) => ({
+            title: item.title,
+            slug: item.slug,
+            category: item.industry || "General",
+            description: item.description,
+            tags: item.technologies ? item.technologies.split(',').map((t: string) => t.trim()) : [],
+            imageUrl: item.imageUrl,
+            gradient: "from-gray-800 to-gray-600",
+            emoji: "✨",
+        }))
+    } catch (e) {
+        console.error("Failed to fetch public portfolio items", e)
+        return []
+    }
+}
+
+export default async function PortfolioPage() {
+    const projects: Project[] = await getPortfolioItems()
+
+    return (
+        <div className="py-20">
+            <div className="container">
+                {/* Hero header */}
+                <div className="animate-fade-in-up text-center mb-16 max-w-3xl mx-auto">
+                    <p className="text-overline text-primary mb-3">Our Work</p>
+                    <h1 className="sm:text-5xl mb-6">
+                        Projects that{" "}
+                        <span className="text-primary">speak for themselves</span>
+                    </h1>
+                    <p className="text-body text-muted-foreground">
+                        A curated selection of our best work across web development, mobile apps, and design.
+                    </p>
+                </div>
+
+                {/* Gallery with filters (SF-013) */}
+                <ProjectGallery projects={projects} />
+            </div>
+        </div>
+    )
+}

app/(public)/quote/page.tsx

@@ -0,0 +1,524 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+    ArrowRight,
+    ArrowLeft,
+    CheckCircle2,
+    Globe,
+    Smartphone,
+    Palette,
+    Search,
+    HelpCircle,
+    DollarSign,
+    Clock,
+    Zap,
+    CalendarDays,
+    Timer,
+    Infinity,
+    Upload,
+    Loader2,
+    PartyPopper,
+    FileText,
+    X,
+} from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+/* ─── Step data ─── */
+
+const projectTypes = [
+    { value: "website", label: "Website", desc: "Marketing sites, landing pages, corporate websites", icon: Globe },
+    { value: "webapp", label: "Web Application", desc: "SaaS platforms, dashboards, custom tools", icon: Zap },
+    { value: "mobile", label: "Mobile App", desc: "iOS, Android, or cross-platform apps", icon: Smartphone },
+    { value: "design", label: "UI/UX Design", desc: "User research, wireframes, prototypes", icon: Palette },
+    { value: "seo", label: "SEO Optimization", desc: "Audit, strategy, and ongoing optimization", icon: Search },
+    { value: "other", label: "Other", desc: "Custom requirements or multiple services", icon: HelpCircle },
+]
+
+const budgetRanges = [
+    { value: "$1K–$5K", label: "$1K – $5K", desc: "Small projects, MVPs, single-page sites", icon: DollarSign },
+    { value: "$5K–$15K", label: "$5K – $15K", desc: "Multi-page websites, mobile apps", icon: DollarSign },
+    { value: "$15K–$50K", label: "$15K – $50K", desc: "Complex platforms, enterprise solutions", icon: DollarSign },
+    { value: "$50K+", label: "$50K+", desc: "Large-scale projects, ongoing partnerships", icon: DollarSign },
+]
+
+const timelineOptions = [
+    { value: "ASAP", label: "ASAP", desc: "As soon as possible", icon: Zap },
+    { value: "1-2 months", label: "1–2 Months", desc: "Standard delivery timeline", icon: Clock },
+    { value: "3-6 months", label: "3–6 Months", desc: "Complex or phased rollout", icon: CalendarDays },
+    { value: "Flexible", label: "Flexible", desc: "No strict deadline", icon: Infinity },
+]
+
+const estimateMap: Record<string, Record<string, string>> = {
+    "$1K–$5K": { website: "$2K–$4K", webapp: "$3K–$5K", mobile: "$4K–$5K", design: "$1K–$3K", seo: "$1K–$3K", other: "$2K–$5K" },
+    "$5K–$15K": { website: "$6K–$12K", webapp: "$8K–$15K", mobile: "$8K–$14K", design: "$5K–$10K", seo: "$5K–$8K", other: "$6K–$12K" },
+    "$15K–$50K": { website: "$15K–$30K", webapp: "$20K–$45K", mobile: "$18K–$40K", design: "$12K–$25K", seo: "$10K–$20K", other: "$15K–$35K" },
+    "$50K+": { website: "$50K–$80K", webapp: "$50K–$120K", mobile: "$50K–$100K", design: "$30K–$60K", seo: "$25K–$50K", other: "$50K+" },
+}
+
+type FormState = {
+    projectType: string
+    description: string
+    budget: string
+    timeline: string
+    name: string
+    email: string
+    phone: string
+    company: string
+    files: File[]
+}
+
+const initialState: FormState = {
+    projectType: "",
+    description: "",
+    budget: "",
+    timeline: "",
+    name: "",
+    email: "",
+    phone: "",
+    company: "",
+    files: [],
+}
+
+const TOTAL_STEPS = 4
+
+export default function QuotePage() {
+    const [step, setStep] = useState(1)
+    const [form, setForm] = useState<FormState>(initialState)
+    const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({})
+    const [submitting, setSubmitting] = useState(false)
+    const [submitted, setSubmitted] = useState(false)
+    const [submitError, setSubmitError] = useState("")
+    const [inquiryId, setInquiryId] = useState("")
+
+    const set = useCallback(<K extends keyof FormState>(key: K, value: FormState[K]) => {
+        setForm((prev) => ({ ...prev, [key]: value }))
+        setErrors((prev) => ({ ...prev, [key]: undefined }))
+    }, [])
+
+    /* ─── Validation ─── */
+    const validateStep = (): boolean => {
+        const errs: typeof errors = {}
+        if (step === 1) {
+            if (!form.projectType) errs.projectType = "Please select a project type"
+            if (form.description.trim().length < 10) errs.description = "Please describe your project (min 10 characters)"
+        }
+        if (step === 2) {
+            if (!form.budget) errs.budget = "Please select a budget range"
+        }
+        if (step === 3) {
+            if (!form.timeline) errs.timeline = "Please select a timeline"
+        }
+        if (step === 4) {
+            if (form.name.trim().length < 2) errs.name = "Name is required"
+            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "A valid email is required"
+        }
+        setErrors(errs)
+        return Object.keys(errs).length === 0
+    }
+
+    const next = () => { if (validateStep()) setStep((s) => Math.min(s + 1, TOTAL_STEPS)) }
+    const back = () => setStep((s) => Math.max(s - 1, 1))
+
+    /* ─── File handling ─── */
+    const ACCEPTED = [".pdf", ".doc", ".docx", ".png", ".jpg", ".jpeg"]
+    const MAX_SIZE = 10 * 1024 * 1024 // 10 MB
+    const MAX_FILES = 3
+
+    const addFiles = (fileList: FileList | null) => {
+        if (!fileList) return
+        const newFiles = Array.from(fileList).filter((f) => {
+            const ext = "." + f.name.split(".").pop()?.toLowerCase()
+            if (!ACCEPTED.includes(ext)) return false
+            if (f.size > MAX_SIZE) return false
+            return true
+        })
+        set("files", [...form.files, ...newFiles].slice(0, MAX_FILES))
+    }
+    const removeFile = (idx: number) => set("files", form.files.filter((_, i) => i !== idx))
+
+    /* ─── Submit ─── */
+    const handleSubmit = async () => {
+        if (!validateStep()) return
+        setSubmitting(true)
+        setSubmitError("")
+        try {
+            // First fetch the CSRF token
+            const csrfRes = await fetch(`${API_URL}/csrf-token`, { method: "GET" })
+            if (!csrfRes.ok) throw new Error("Could not initialize secure session")
+            const { csrfToken } = await csrfRes.json()
+
+            const res = await fetch(`${API_URL}/inquiries`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-CSRF-Token": csrfToken
+                },
+                body: JSON.stringify({
+                    name: form.name.trim(),
+                    email: form.email.trim().toLowerCase(),
+                    phone: form.phone.trim() || null,
+                    company: form.company.trim() || null,
+                    projectType: form.projectType,
+                    budget: form.budget,
+                    timeline: form.timeline,
+                    description: form.description.trim(),
+                }),
+            })
+            const data = await res.json()
+            if (!res.ok) {
+                setSubmitError(data.error || "Something went wrong")
+                return
+            }
+            setInquiryId(data.id)
+            setSubmitted(true)
+        } catch (err: any) {
+            setSubmitError(err.message || "Network error. Please try again.")
+        } finally {
+            setSubmitting(false)
+        }
+    }
+
+    /* ─── Estimate ─── */
+    const estimate = form.budget && form.projectType
+        ? estimateMap[form.budget]?.[form.projectType] || null
+        : null
+
+    /* ─── Success screen ─── */
+    if (submitted) {
+        return (
+            <div className="py-20">
+                <div className="container max-w-2xl mx-auto text-center animate-fade-in-up">
+                    <div className="w-20 h-20 mx-auto rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-6">
+                        <PartyPopper className="h-10 w-10 text-green-600 dark:text-green-400" suppressHydrationWarning />
+                    </div>
+                    <h1 className="text-3xl font-bold mb-3">Quote Request Submitted!</h1>
+                    <p className="text-muted-foreground mb-2">
+                        Your reference number is <span className="font-mono font-semibold text-foreground">{inquiryId}</span>
+                    </p>
+                    <p className="text-muted-foreground mb-8">
+                        We&apos;ll review your request and get back to you within 24 hours.
+                    </p>
+
+                    {estimate && (
+                        <Card className="mb-8 border-primary/20 bg-primary/5">
+                            <CardContent className="py-6">
+                                <p className="text-sm text-muted-foreground mb-1">Estimated project range</p>
+                                <p className="text-3xl font-extrabold text-primary">{estimate}</p>
+                                <p className="text-xs text-muted-foreground mt-2">
+                                    This is a rough estimate — your actual quote may vary based on project details.
+                                </p>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    <div className="flex justify-center gap-4">
+                        <Button asChild size="lg">
+                            <Link href="/contact">Book a Consultation</Link>
+                        </Button>
+                        <Button asChild variant="outline" size="lg">
+                            <Link href="/">Back to Home</Link>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    /* ─── Form steps ─── */
+    return (
+        <div className="py-20">
+            <div className="container max-w-3xl mx-auto">
+                {/* Header */}
+                <div className="text-center mb-10 animate-fade-in-up">
+                    <p className="text-sm font-semibold text-primary uppercase tracking-[0.15em] mb-3">Get a Quote</p>
+                    <h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-4">
+                        Let&apos;s bring your <span className="text-primary">idea to life</span>
+                    </h1>
+                    <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+                        Answer a few questions and we&apos;ll send you a detailed proposal.
+                    </p>
+                </div>
+
+                {/* Progress indicator */}
+                <div className="flex items-center justify-center gap-2 mb-10" role="progressbar" aria-valuenow={step} aria-valuemin={1} aria-valuemax={TOTAL_STEPS}>
+                    {[1, 2, 3, 4].map((s) => (
+                        <div key={s} className="flex items-center gap-2">
+                            <div
+                                className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300 ${s < step
+                                    ? "bg-primary text-primary-foreground"
+                                    : s === step
+                                        ? "bg-primary text-primary-foreground ring-4 ring-primary/20"
+                                        : "bg-muted text-muted-foreground"
+                                    }`}
+                            >
+                                {s < step ? <CheckCircle2 className="h-5 w-5" suppressHydrationWarning /> : s}
+                            </div>
+                            {s < 4 && (
+                                <div className={`w-12 h-0.5 transition-colors duration-300 ${s < step ? "bg-primary" : "bg-muted"}`} />
+                            )}
+                        </div>
+                    ))}
+                </div>
+
+                {/* Step card */}
+                <Card className="animate-fade-in-up border shadow-lg">
+                    <CardContent className="p-8">
+                        {/* ─── STEP 1: Project Details ─── */}
+                        {step === 1 && (
+                            <fieldset className="space-y-6">
+                                <legend className="text-xl font-bold mb-1">What are you looking for?</legend>
+                                <p className="text-sm text-muted-foreground">Select the type of project and describe your vision.</p>
+
+                                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                                    {projectTypes.map((pt) => (
+                                        <button
+                                            key={pt.value}
+                                            type="button"
+                                            onClick={() => set("projectType", pt.value)}
+                                            className={`flex flex-col items-center gap-2 p-4 rounded-xl border text-center transition-all duration-200 hover:border-primary/40 hover:shadow-md ${form.projectType === pt.value
+                                                ? "border-primary bg-primary/5 ring-2 ring-primary/20 shadow-md"
+                                                : "border-border"
+                                                }`}
+                                        >
+                                            <pt.icon className={`h-6 w-6 ${form.projectType === pt.value ? "text-primary" : "text-muted-foreground"}`} suppressHydrationWarning />
+                                            <span className="font-medium text-sm">{pt.label}</span>
+                                            <span className="text-xs text-muted-foreground leading-tight hidden sm:block">{pt.desc}</span>
+                                        </button>
+                                    ))}
+                                </div>
+                                {errors.projectType && <p className="text-sm text-destructive">{errors.projectType}</p>}
+
+                                <div>
+                                    <label className="text-sm font-medium mb-1.5 block" htmlFor="description">
+                                        Tell us about your project *
+                                    </label>
+                                    <textarea
+                                        id="description"
+                                        className="flex min-h-[100px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
+                                        value={form.description}
+                                        onChange={(e) => set("description", e.target.value)}
+                                        placeholder="Describe your goals, target audience, key features, and any inspiration..."
+                                        maxLength={2000}
+                                    />
+                                    <div className="flex justify-between mt-1">
+                                        {errors.description ? (
+                                            <p className="text-sm text-destructive">{errors.description}</p>
+                                        ) : <span />}
+                                        <span className="text-xs text-muted-foreground">{form.description.length}/2000</span>
+                                    </div>
+                                </div>
+                            </fieldset>
+                        )}
+
+                        {/* ─── STEP 2: Budget ─── */}
+                        {step === 2 && (
+                            <fieldset className="space-y-6">
+                                <legend className="text-xl font-bold mb-1">What&apos;s your budget?</legend>
+                                <p className="text-sm text-muted-foreground">Select the range that best fits your project investment.</p>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                    {budgetRanges.map((b, i) => (
+                                        <button
+                                            key={b.value}
+                                            type="button"
+                                            onClick={() => set("budget", b.value)}
+                                            className={`flex items-center gap-4 p-5 rounded-xl border text-left transition-all duration-200 hover:border-primary/40 hover:shadow-md ${form.budget === b.value
+                                                ? "border-primary bg-primary/5 ring-2 ring-primary/20 shadow-md"
+                                                : "border-border"
+                                                }`}
+                                        >
+                                            <div className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-sm font-bold ${form.budget === b.value
+                                                ? "bg-primary text-primary-foreground"
+                                                : "bg-muted text-muted-foreground"
+                                                }`}>
+                                                {"$".repeat(i + 1)}
+                                            </div>
+                                            <div>
+                                                <p className="font-semibold">{b.label}</p>
+                                                <p className="text-xs text-muted-foreground">{b.desc}</p>
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                                {errors.budget && <p className="text-sm text-destructive">{errors.budget}</p>}
+                            </fieldset>
+                        )}
+
+                        {/* ─── STEP 3: Timeline ─── */}
+                        {step === 3 && (
+                            <fieldset className="space-y-6">
+                                <legend className="text-xl font-bold mb-1">When do you need it?</legend>
+                                <p className="text-sm text-muted-foreground">Select your preferred timeline.</p>
+
+                                <div className="grid grid-cols-2 gap-4">
+                                    {timelineOptions.map((t) => (
+                                        <button
+                                            key={t.value}
+                                            type="button"
+                                            onClick={() => set("timeline", t.value)}
+                                            className={`flex items-center gap-4 p-5 rounded-xl border text-left transition-all duration-200 hover:border-primary/40 hover:shadow-md ${form.timeline === t.value
+                                                ? "border-primary bg-primary/5 ring-2 ring-primary/20 shadow-md"
+                                                : "border-border"
+                                                }`}
+                                        >
+                                            <div className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${form.timeline === t.value
+                                                ? "bg-primary text-primary-foreground"
+                                                : "bg-muted text-muted-foreground"
+                                                }`}>
+                                                <t.icon className="h-5 w-5" suppressHydrationWarning />
+                                            </div>
+                                            <div>
+                                                <p className="font-semibold">{t.label}</p>
+                                                <p className="text-xs text-muted-foreground">{t.desc}</p>
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                                {errors.timeline && <p className="text-sm text-destructive">{errors.timeline}</p>}
+                            </fieldset>
+                        )}
+
+                        {/* ─── STEP 4: Contact & Upload ─── */}
+                        {step === 4 && (
+                            <fieldset className="space-y-5">
+                                <legend className="text-xl font-bold mb-1">Almost there!</legend>
+                                <p className="text-sm text-muted-foreground">How can we reach you?</p>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                    <div>
+                                        <label className="text-sm font-medium mb-1.5 block" htmlFor="name">Full Name *</label>
+                                        <Input
+                                            id="name"
+                                            value={form.name}
+                                            onChange={(e) => set("name", e.target.value)}
+                                            placeholder="John Doe"
+                                        />
+                                        {errors.name && <p className="text-sm text-destructive mt-1">{errors.name}</p>}
+                                    </div>
+                                    <div>
+                                        <label className="text-sm font-medium mb-1.5 block" htmlFor="email">Email *</label>
+                                        <Input
+                                            id="email"
+                                            type="email"
+                                            value={form.email}
+                                            onChange={(e) => set("email", e.target.value)}
+                                            placeholder="john@company.com"
+                                        />
+                                        {errors.email && <p className="text-sm text-destructive mt-1">{errors.email}</p>}
+                                    </div>
+                                </div>
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                    <div>
+                                        <label className="text-sm font-medium mb-1.5 block" htmlFor="phone">Phone (optional)</label>
+                                        <Input
+                                            id="phone"
+                                            type="tel"
+                                            value={form.phone}
+                                            onChange={(e) => set("phone", e.target.value)}
+                                            placeholder="+1 (555) 000-0000"
+                                        />
+                                    </div>
+                                    <div>
+                                        <label className="text-sm font-medium mb-1.5 block" htmlFor="company">Company (optional)</label>
+                                        <Input
+                                            id="company"
+                                            value={form.company}
+                                            onChange={(e) => set("company", e.target.value)}
+                                            placeholder="Your Company"
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* File upload */}
+                                <div>
+                                    <label className="text-sm font-medium mb-1.5 block">Attachments (optional)</label>
+                                    <div
+                                        className="border-2 border-dashed rounded-xl p-6 text-center transition-colors hover:border-primary/40 cursor-pointer"
+                                        onDragOver={(e) => e.preventDefault()}
+                                        onDrop={(e) => { e.preventDefault(); addFiles(e.dataTransfer.files) }}
+                                        onClick={() => document.getElementById("file-input")?.click()}
+                                        role="button"
+                                        tabIndex={0}
+                                        onKeyDown={(e) => { if (e.key === "Enter") document.getElementById("file-input")?.click() }}
+                                    >
+                                        <Upload className="h-8 w-8 mx-auto text-muted-foreground mb-2" suppressHydrationWarning />
+                                        <p className="text-sm text-muted-foreground">
+                                            Drag & drop or <span className="text-primary font-medium">browse files</span>
+                                        </p>
+                                        <p className="text-xs text-muted-foreground mt-1">
+                                            PDF, DOC, PNG, JPG — max 10 MB, up to 3 files
+                                        </p>
+                                        <input
+                                            id="file-input"
+                                            type="file"
+                                            className="hidden"
+                                            multiple
+                                            accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
+                                            onChange={(e) => addFiles(e.target.files)}
+                                        />
+                                    </div>
+                                    {form.files.length > 0 && (
+                                        <div className="mt-3 space-y-2">
+                                            {form.files.map((file, idx) => (
+                                                <div key={idx} className="flex items-center gap-3 bg-muted/50 rounded-lg px-3 py-2 text-sm">
+                                                    <FileText className="h-4 w-4 text-muted-foreground shrink-0" suppressHydrationWarning />
+                                                    <span className="flex-1 truncate">{file.name}</span>
+                                                    <span className="text-xs text-muted-foreground">{(file.size / 1024).toFixed(0)} KB</span>
+                                                    <button type="button" onClick={() => removeFile(idx)} className="text-muted-foreground hover:text-destructive">
+                                                        <X className="h-4 w-4" suppressHydrationWarning />
+                                                    </button>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            </fieldset>
+                        )}
+
+                        {/* Submit error */}
+                        {submitError && <p className="text-sm text-destructive mt-4">{submitError}</p>}
+
+                        {/* Navigation buttons */}
+                        <div className="flex justify-between items-center mt-8 pt-6 border-t">
+                            {step > 1 ? (
+                                <Button type="button" variant="outline" onClick={back}>
+                                    <ArrowLeft className="mr-2 h-4 w-4" suppressHydrationWarning />
+                                    Back
+                                </Button>
+                            ) : <span />}
+
+                            {step < TOTAL_STEPS ? (
+                                <Button type="button" onClick={next}>
+                                    Next
+                                    <ArrowRight className="ml-2 h-4 w-4" suppressHydrationWarning />
+                                </Button>
+                            ) : (
+                                <Button type="button" onClick={handleSubmit} disabled={submitting} size="lg">
+                                    {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" suppressHydrationWarning />}
+                                    Submit Quote Request
+                                    {!submitting && <ArrowRight className="ml-2 h-4 w-4" suppressHydrationWarning />}
+                                </Button>
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Trust signals */}
+                <div className="flex flex-wrap justify-center gap-6 mt-8 text-sm text-muted-foreground">
+                    {["Free consultation", "No hidden fees", "Response within 24h", "100% confidential"].map((t) => (
+                        <span key={t} className="flex items-center gap-1.5">
+                            <CheckCircle2 className="h-4 w-4 text-green-500" suppressHydrationWarning />
+                            {t}
+                        </span>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}

app/(public)/services/page.tsx

@@ -0,0 +1,33 @@
+import { PackageComparison } from "@/components/services/PackageComparison"
+import { ServiceDescriptions } from "@/components/services/ServiceDescriptions"
+import { ProcessTimeline } from "@/components/services/ProcessTimeline"
+import { FAQSection } from "@/components/services/FAQSection"
+import { AddOnServices } from "@/components/services/AddOnServices"
+
+export default function ServicesPage() {
+    return (
+        <>
+            {/* Hero header */}
+            <section className="pt-20 pb-10">
+                <div className="container">
+                    <div className="animate-fade-in-up text-center max-w-3xl mx-auto">
+                        <p className="text-overline text-primary mb-3">Our Services</p>
+                        <h1 className="sm:text-5xl mb-6">
+                            Everything you need to{" "}
+                            <span className="text-primary">grow online</span>
+                        </h1>
+                        <p className="text-body text-muted-foreground">
+                            We provide end-to-end digital solutions — from strategy and design to development and optimization.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <ServiceDescriptions />
+            <PackageComparison />
+            <ProcessTimeline />
+            <AddOnServices />
+            <FAQSection />
+        </>
+    )
+}

app/admin/blog/[id]/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect, use } from 'react';
+import { notFound } from 'next/navigation';
+import BlogForm from '@/components/admin/BlogForm';
+import { Loader2 } from 'lucide-react';
+import { RoleGuard } from "@/components/auth/RoleGuard";
+import { Role } from "@/types/auth";
+import { useSession } from "next-auth/react";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
+
+export default function EditBlogPostPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id } = use(params);
+    const { data: session } = useSession();
+    const [post, setPost] = useState<any>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        if (!session?.user?.id) return;
+
+        const fetchPost = async () => {
+            try {
+                const res = await fetch(`${API_URL}/admin/blog/${id}`, {
+                    headers: {
+                        'Authorization': `Bearer ${session?.user?.id}`
+                    }
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    setPost(data);
+                } else {
+                    setError(true);
+                }
+            } catch (err) {
+                console.error("Error fetching admin post:", err);
+                setError(true);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchPost();
+    }, [id, session]);
+
+    if (isLoading) {
+        return (
+            <div className="h-[60vh] flex items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+        );
+    }
+
+    if (error || !post) {
+        notFound();
+    }
+
+    return (
+        <RoleGuard allowedRoles={[Role.SUPER_ADMIN, Role.EDITOR]}>
+            <div className="max-w-5xl mx-auto py-6">
+                <BlogForm initialData={post} isEditing />
+            </div>
+        </RoleGuard>
+    );
+}

app/admin/blog/new/page.tsx

@@ -0,0 +1,17 @@
+import BlogForm from '@/components/admin/BlogForm';
+import { RoleGuard } from "@/components/auth/RoleGuard";
+import { Role } from "@/types/auth";
+
+export const metadata = {
+    title: 'New Blog Post | NexaFlow Admin',
+};
+
+export default function NewBlogPostPage() {
+    return (
+        <RoleGuard allowedRoles={[Role.SUPER_ADMIN, Role.EDITOR]}>
+            <div className="max-w-5xl mx-auto py-6">
+                <BlogForm />
+            </div>
+        </RoleGuard>
+    );
+}

app/admin/blog/page.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Plus, Search, Pencil, Trash2, Globe, FileText, CalendarClock } from 'lucide-react';
+import { format } from 'date-fns';
+import { useSession } from "next-auth/react";
+import { RoleGuard } from "@/components/auth/RoleGuard";
+import { Role } from "@/types/auth";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
+
+export default function AdminBlogPage() {
+    const { data: session } = useSession();
+    const [posts, setPosts] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    useEffect(() => {
+        if (session) {
+            fetchPosts();
+        }
+    }, [session]);
+
+    const fetchPosts = async () => {
+        setIsLoading(true);
+        try {
+            // Using standard fetch since this is an admin dashboard. 
+            // The Next.js API route will attach the Bearer token or session cookie appropriately.
+            const res = await fetch(`${API_URL}/admin/blog`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${session?.user?.id}`
+                }
+            });
+            if (res.ok) {
+                const data = await res.json();
+                setPosts(data);
+            } else {
+                console.error("Failed to fetch admin posts");
+            }
+        } catch (error) {
+            console.error("Error fetching posts:", error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleDelete = async (id: string, title: string) => {
+        if (!confirm(`Are you sure you want to delete "${title}"?`)) return;
+
+        try {
+            const res = await fetch(`${API_URL}/admin/blog/${id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${session?.user?.id}`
+                }
+            });
+            if (res.ok) {
+                setPosts(posts.filter(post => post.id !== id));
+            } else {
+                alert("Failed to delete post");
+            }
+        } catch (error) {
+            console.error("Error deleting post:", error);
+            alert("Error deleting post");
+        }
+    };
+
+    const filteredPosts = posts.filter(post =>
+        post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        post.status.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case 'PUBLISHED': return <Globe className="h-4 w-4 text-green-500" />;
+            case 'SCHEDULED': return <CalendarClock className="h-4 w-4 text-blue-500" />;
+            case 'DRAFT': return <FileText className="h-4 w-4 text-gray-500" />;
+            default: return null;
+        }
+    };
+
+    return (
+        <RoleGuard allowedRoles={[Role.SUPER_ADMIN, Role.EDITOR]}>
+            <div className="space-y-6">
+                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+                    <div>
+                        <h2 className="text-3xl font-bold tracking-tight">Blog Articles</h2>
+                        <p className="text-muted-foreground">Manage your content, drafts, and scheduled posts.</p>
+                    </div>
+                    <Button asChild>
+                        <Link href="/admin/blog/new">
+                            <Plus className="mr-2 h-4 w-4" /> New Article
+                        </Link>
+                    </Button>
+                </div>
+
+                <Card>
+                    <CardHeader className="pb-3 border-b border-border/40">
+                        <div className="flex items-center justify-between">
+                            <CardTitle>All Posts</CardTitle>
+                            <div className="relative w-64">
+                                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                                <Input
+                                    type="search"
+                                    placeholder="Search articles..."
+                                    className="pl-9 h-9"
+                                    value={searchTerm}
+                                    onChange={(e) => setSearchTerm(e.target.value)}
+                                />
+                            </div>
+                        </div>
+                    </CardHeader>
+                    <CardContent className="p-0">
+                        {isLoading ? (
+                            <div className="p-8 text-center text-muted-foreground">Loading posts...</div>
+                        ) : filteredPosts.length === 0 ? (
+                            <div className="p-8 text-center text-muted-foreground">No posts found matching the criteria.</div>
+                        ) : (
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm text-left">
+                                    <thead className="text-xs text-muted-foreground uppercase bg-muted/50 border-b">
+                                        <tr>
+                                            <th className="px-6 py-3 font-medium">Title</th>
+                                            <th className="px-6 py-3 font-medium">Status</th>
+                                            <th className="px-6 py-3 font-medium">Author</th>
+                                            <th className="px-6 py-3 font-medium">Date</th>
+                                            <th className="px-6 py-3 font-medium text-right">Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {filteredPosts.map((post) => (
+                                            <tr key={post.id} className="border-b last:border-0 hover:bg-muted/30 transition-colors">
+                                                <td className="px-6 py-4">
+                                                    <div className="font-medium text-foreground">{post.title}</div>
+                                                    <div className="text-xs text-muted-foreground truncate max-w-xs">{post.slug}</div>
+                                                </td>
+                                                <td className="px-6 py-4">
+                                                    <div className="flex items-center gap-1.5 text-xs font-medium">
+                                                        {getStatusIcon(post.status)}
+                                                        <span>{post.status}</span>
+                                                    </div>
+                                                </td>
+                                                <td className="px-6 py-4 text-muted-foreground">
+                                                    {post.author?.name || 'Unknown'}
+                                                </td>
+                                                <td className="px-6 py-4 text-muted-foreground">
+                                                    {post.publishedAt ? format(new Date(post.publishedAt), 'MMM d, yyyy') : 'Not set'}
+                                                </td>
+                                                <td className="px-6 py-4 text-right">
+                                                    <div className="flex justify-end gap-2">
+                                                        <Button variant="ghost" size="icon" asChild>
+                                                            <Link href={`/admin/blog/${post.id}`}>
+                                                                <Pencil className="h-4 w-4" />
+                                                                <span className="sr-only">Edit</span>
+                                                            </Link>
+                                                        </Button>
+                                                        <Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10 hover:text-destructive" onClick={() => handleDelete(post.id, post.title)}>
+                                                            <Trash2 className="h-4 w-4" />
+                                                            <span className="sr-only">Delete</span>
+                                                        </Button>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </div>
+        </RoleGuard>
+    );
+}

app/admin/dashboard/page.tsx

@@ -0,0 +1,78 @@
+import { auth, signOut } from "@/lib/auth"
+import { redirect } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { MessageSquare, FolderGit2, Users } from "lucide-react"
+import Link from "next/link"
+
+export default async function DashboardPage() {
+    const session = await auth()
+
+    if (!session?.user) {
+        redirect("/admin/login")
+    }
+
+    return (
+        <div className="p-8 space-y-8 max-w-7xl mx-auto">
+            <div className="flex items-center justify-between">
+                <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+                <form
+                    action={async () => {
+                        "use server"
+                        await signOut()
+                    }}
+                >
+                    <Button variant="outline">Sign Out</Button>
+                </form>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Welcome back, {session.user.name || session.user.email}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <p className="text-sm text-gray-500">
+                            Role: <span className="font-mono">{session.user.role}</span>
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <h2 className="text-2xl font-bold mt-12 mb-6">Quick Links</h2>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <Link href="/admin/inquiries">
+                    <Card className="hover:border-primary/50 transition-colors h-full flex flex-col items-center justify-center p-6 text-center">
+                        <MessageSquare className="h-12 w-12 text-primary mb-4" />
+                        <CardTitle>Inquiries</CardTitle>
+                        <CardDescription className="mt-2">Manage quote requests and leads</CardDescription>
+                    </Card>
+                </Link>
+
+                <Link href="/admin/blog">
+                    <Card className="hover:border-primary/50 transition-colors h-full flex flex-col items-center justify-center p-6 text-center">
+                        <FolderGit2 className="h-12 w-12 text-primary mb-4" />
+                        <CardTitle>Blog Posts</CardTitle>
+                        <CardDescription className="mt-2">Write, edit, and schedule articles</CardDescription>
+                    </Card>
+                </Link>
+
+                <Link href="/admin/portfolio">
+                    <Card className="hover:border-primary/50 transition-colors h-full flex flex-col items-center justify-center p-6 text-center">
+                        <FolderGit2 className="h-12 w-12 text-primary mb-4" />
+                        <CardTitle>Portfolio</CardTitle>
+                        <CardDescription className="mt-2">Manage case studies and projects</CardDescription>
+                    </Card>
+                </Link>
+
+                <Link href="/admin/testimonials">
+                    <Card className="hover:border-primary/50 transition-colors h-full flex flex-col items-center justify-center p-6 text-center">
+                        <Users className="h-12 w-12 text-primary mb-4" />
+                        <CardTitle>Testimonials</CardTitle>
+                        <CardDescription className="mt-2">Approve and manage client reviews</CardDescription>
+                    </Card>
+                </Link>
+            </div>
+        </div>
+    )
+}

app/admin/forgot-password/page.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import Link from "next/link"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
+
+export default function ForgotPasswordPage() {
+    const [email, setEmail] = useState("")
+    const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setStatus("loading")
+
+        try {
+            const res = await fetch(`${API_URL}/auth/forgot-password`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ email }),
+            })
+
+            if (res.ok) {
+                setStatus("success")
+            } else {
+                setStatus("error")
+            }
+        } catch (error) {
+            setStatus("error")
+        }
+    }
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle className="text-2xl font-bold">Forgot Password</CardTitle>
+                    <CardDescription>
+                        Enter your email address and we will send you a link to reset your password.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    {status === "success" ? (
+                        <div className="bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded relative" role="alert">
+                            <strong className="font-bold">Check your email!</strong>
+                            <span className="block sm:inline"> We have sent a password reset link to your address.</span>
+                        </div>
+                    ) : (
+                        <form onSubmit={handleSubmit} className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="email">Email</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    placeholder="admin@example.com"
+                                    required
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    disabled={status === "loading"}
+                                />
+                            </div>
+                            <Button type="submit" className="w-full" disabled={status === "loading"}>
+                                {status === "loading" ? "Sending..." : "Send Reset Link"}
+                            </Button>
+                        </form>
+                    )}
+                </CardContent>
+                <CardFooter className="flex justify-center">
+                    <Link href="/admin/login" className="text-sm text-primary hover:underline">
+                        Back to Login
+                    </Link>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}

app/admin/inquiries/[id]/page.tsx

@@ -0,0 +1,266 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter, useParams } from "next/navigation"
+import { format } from "date-fns"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Loader2, ArrowLeft, Mail, Phone, Building, Calendar, DollarSign, Clock, Save } from "lucide-react"
+import Link from "next/link"
+import { toast } from "sonner"
+
+interface Inquiry {
+    id: string
+    name: string
+    email: string
+    phone: string | null
+    company: string | null
+    projectType: string | null
+    budget: string | null
+    timeline: string | null
+    description: string
+    status: string
+    notes: string | null
+    createdAt: string
+}
+
+const STATUS_OPTIONS = [
+    { value: "NEW", label: "New Request" },
+    { value: "IN_PROGRESS", label: "In Progress" },
+    { value: "QUOTED", label: "Quoted" },
+    { value: "WON", label: "Deal Won" },
+    { value: "LOST", label: "Closed / Lost" },
+]
+
+export default function InquiryDetailPage() {
+    const { data: session } = useSession()
+    const router = useRouter()
+    const params = useParams()
+    const inquiryId = params.id as string
+
+    const [inquiry, setInquiry] = useState<Inquiry | null>(null)
+    const [loading, setLoading] = useState(true)
+    const [saving, setSaving] = useState(false)
+
+    // Form state
+    const [status, setStatus] = useState("")
+    const [notes, setNotes] = useState("")
+
+    useEffect(() => {
+        if (session && inquiryId) {
+            fetchInquiry()
+        }
+    }, [session, inquiryId])
+
+    const fetchInquiry = async () => {
+        try {
+            const res = await fetch(`http://localhost:5000/api/admin/inquiries/${inquiryId}`, {
+                headers: {
+                    Authorization: `Bearer ${session?.user?.id}`,
+                },
+            })
+            if (res.ok) {
+                const data = await res.json()
+                setInquiry(data)
+                setStatus(data.status)
+                setNotes(data.notes || "")
+            } else {
+                toast.error("Inquiry not found")
+                router.push("/admin/inquiries")
+            }
+        } catch (error) {
+            console.error("Failed to fetch inquiry:", error)
+            toast.error("Failed to load details")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleSave = async () => {
+        setSaving(true)
+        try {
+            const res = await fetch(`http://localhost:5000/api/admin/inquiries/${inquiryId}`, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${session?.user?.id}`,
+                },
+                body: JSON.stringify({ status, notes }),
+            })
+
+            if (res.ok) {
+                toast.success("Inquiry updated successfully")
+                const updated = await res.json()
+                setInquiry(updated)
+            } else {
+                toast.error("Failed to update inquiry")
+            }
+        } catch (error) {
+            console.error("Failed to save:", error)
+            toast.error("An error occurred")
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    if (loading) {
+        return (
+            <div className="flex h-[50vh] items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            </div>
+        )
+    }
+
+    if (!inquiry) return null
+
+    return (
+        <div className="space-y-6 max-w-5xl">
+            <div className="flex items-center gap-4">
+                <Button variant="outline" size="icon" asChild>
+                    <Link href="/admin/inquiries">
+                        <ArrowLeft className="h-4 w-4" />
+                    </Link>
+                </Button>
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Inquiry Details</h1>
+                    <p className="text-muted-foreground">
+                        Submitted {format(new Date(inquiry.createdAt), "PPP 'at' p")}
+                    </p>
+                </div>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-3">
+                {/* Main Client Info */}
+                <div className="md:col-span-2 space-y-6">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Client Information</CardTitle>
+                        </CardHeader>
+                        <CardContent className="grid gap-4 sm:grid-cols-2">
+                            <div className="space-y-1">
+                                <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                                    Name
+                                </span>
+                                <p className="font-medium">{inquiry.name}</p>
+                            </div>
+                            <div className="space-y-1">
+                                <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                                    <Mail className="h-4 w-4" /> Email
+                                </span>
+                                <p className="font-medium">
+                                    <a href={`mailto:${inquiry.email}`} className="text-primary hover:underline">
+                                        {inquiry.email}
+                                    </a>
+                                </p>
+                            </div>
+                            <div className="space-y-1">
+                                <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                                    <Phone className="h-4 w-4" /> Phone
+                                </span>
+                                <p className="font-medium">{inquiry.phone || "Not provided"}</p>
+                            </div>
+                            <div className="space-y-1">
+                                <span className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                                    <Building className="h-4 w-4" /> Company
+                                </span>
+                                <p className="font-medium">{inquiry.company || "Not provided"}</p>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Project Requirements</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="grid gap-4 sm:grid-cols-3 bg-muted/50 p-4 rounded-lg">
+                                <div>
+                                    <span className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
+                                        Type
+                                    </span>
+                                    <p className="font-medium capitalize">{inquiry.projectType || "General"}</p>
+                                </div>
+                                <div>
+                                    <span className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
+                                        <DollarSign className="h-4 w-4" /> Budget
+                                    </span>
+                                    <p className="font-medium">{inquiry.budget || "Not specified"}</p>
+                                </div>
+                                <div>
+                                    <span className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
+                                        <Clock className="h-4 w-4" /> Timeline
+                                    </span>
+                                    <p className="font-medium">{inquiry.timeline || "Flexible"}</p>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <h4 className="font-medium">Project Description</h4>
+                                <div className="p-4 bg-muted/30 rounded-md whitespace-pre-wrap text-sm border">
+                                    {inquiry.description}
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Admin Controls */}
+                <div className="space-y-6">
+                    <Card className="border-primary/20 bg-primary/5">
+                        <CardHeader>
+                            <CardTitle>Management</CardTitle>
+                            <CardDescription>Update status and add internal notes.</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="status">Current Status</Label>
+                                <Select value={status} onValueChange={setStatus}>
+                                    <SelectTrigger id="status" className="bg-background">
+                                        <SelectValue placeholder="Select status" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {STATUS_OPTIONS.map((opt) => (
+                                            <SelectItem key={opt.value} value={opt.value}>
+                                                {opt.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="notes">Internal Notes (Not visible to client)</Label>
+                                <Textarea
+                                    id="notes"
+                                    placeholder="Add background info, meeting notes, etc..."
+                                    className="min-h-[150px] bg-background"
+                                    value={notes}
+                                    onChange={(e) => setNotes(e.target.value)}
+                                />
+                            </div>
+
+                            <Button
+                                className="w-full"
+                                onClick={handleSave}
+                                disabled={saving || (status === inquiry.status && notes === (inquiry.notes || ""))}
+                            >
+                                {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
+                                Save Changes
+                            </Button>
+                        </CardContent>
+                    </Card>
+
+                    <div className="text-xs text-muted-foreground text-center">
+                        <p>Inquiry ID: <span className="font-mono">{inquiry.id}</span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

app/admin/inquiries/page.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useSession } from "next-auth/react"
+import { formatDistanceToNow } from "date-fns"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Loader2, Search, Filter } from "lucide-react"
+import Link from "next/link"
+
+interface Inquiry {
+    id: string
+    name: string
+    email: string
+    projectType: string
+    budget: string | null
+    status: string
+    createdAt: string
+}
+
+const statusColors: Record<string, string> = {
+    NEW: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+    IN_PROGRESS: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
+    QUOTED: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+    WON: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+    LOST: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300",
+}
+
+export default function InquiriesPage() {
+    const { data: session } = useSession()
+    const [inquiries, setInquiries] = useState<Inquiry[]>([])
+    const [loading, setLoading] = useState(true)
+    const [searchTerm, setSearchTerm] = useState("")
+
+    useEffect(() => {
+        if (session) {
+            fetchInquiries()
+        }
+    }, [session])
+
+    const fetchInquiries = async () => {
+        try {
+            const res = await fetch("http://localhost:5000/api/admin/inquiries", {
+                headers: {
+                    Authorization: `Bearer ${session?.user?.id}`, // using user id as mock token for now
+                },
+            })
+            if (res.ok) {
+                const data = await res.json()
+                setInquiries(data)
+            }
+        } catch (error) {
+            console.error("Failed to fetch inquiries:", error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const filteredInquiries = inquiries.filter(
+        (inq) =>
+            inq.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            inq.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            (inq.projectType && inq.projectType.toLowerCase().includes(searchTerm.toLowerCase()))
+    )
+
+    if (loading) {
+        return (
+            <div className="flex h-[50vh] items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            </div>
+        )
+    }
+
+    return (
+        <div className="space-y-6">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight">Inquiry Management</h1>
+                    <p className="text-muted-foreground">Manage and track client quote requests.</p>
+                </div>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <div className="flex items-center space-x-2">
+                        <Search className="h-4 w-4 text-muted-foreground" />
+                        <Input
+                            placeholder="Search by name, email, or project type..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="max-w-sm"
+                        />
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className="rounded-md border">
+                        <div className="grid grid-cols-12 gap-4 border-b bg-muted/50 p-4 font-medium text-sm text-muted-foreground">
+                            <div className="col-span-3">Client</div>
+                            <div className="col-span-2 hidden sm:block">Project</div>
+                            <div className="col-span-2 hidden md:block">Budget</div>
+                            <div className="col-span-2">Date</div>
+                            <div className="col-span-2">Status</div>
+                            <div className="col-span-1 text-right">Actions</div>
+                        </div>
+
+                        {filteredInquiries.length === 0 ? (
+                            <div className="p-8 text-center text-muted-foreground">
+                                No inquiries found.
+                            </div>
+                        ) : (
+                            <div className="divide-y">
+                                {filteredInquiries.map((inquiry) => (
+                                    <div key={inquiry.id} className="grid grid-cols-12 items-center gap-4 p-4 text-sm hover:bg-muted/50 transition-colors">
+                                        <div className="col-span-3">
+                                            <div className="font-medium truncate">{inquiry.name}</div>
+                                            <div className="text-xs text-muted-foreground truncate">{inquiry.email}</div>
+                                        </div>
+                                        <div className="col-span-2 hidden sm:block truncate capitalize">
+                                            {inquiry.projectType || '—'}
+                                        </div>
+                                        <div className="col-span-2 hidden md:block text-muted-foreground">
+                                            {inquiry.budget || '—'}
+                                        </div>
+                                        <div className="col-span-2 text-muted-foreground">
+                                            {formatDistanceToNow(new Date(inquiry.createdAt), { addSuffix: true })}
+                                        </div>
+                                        <div className="col-span-2">
+                                            <Badge variant="secondary" className={`${statusColors[inquiry.status] || ''} hover:bg-opacity-80`}>
+                                                {inquiry.status.replace('_', ' ')}
+                                            </Badge>
+                                        </div>
+                                        <div className="col-span-1 text-right">
+                                            <Button variant="ghost" size="sm" asChild>
+                                                <Link href={`/admin/inquiries/${inquiry.id}`}>
+                                                    View
+                                                </Link>
+                                            </Button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

app/admin/login/page.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { signIn } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { Loader2 } from "lucide-react"
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+
+const formSchema = z.object({
+    email: z.string().email("Invalid email address"),
+    password: z.string().min(1, "Password is required"),
+})
+
+export default function LoginPage() {
+    const router = useRouter()
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            password: "",
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setIsLoading(true)
+        setError(null)
+
+        try {
+            const result = await signIn("credentials", {
+                email: values.email,
+                password: values.password,
+                redirect: false,
+            })
+
+            if (result?.error) {
+                setError("Invalid email or password")
+                return
+            }
+
+            router.push("/admin/dashboard")
+            router.refresh()
+        } catch (error) {
+            setError("Something went wrong. Please try again.")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
+            <Card className="w-full max-w-md">
+                <CardHeader className="space-y-1">
+                    <CardTitle className="text-2xl font-bold text-center">
+                        Admin Login
+                    </CardTitle>
+                    <CardDescription className="text-center">
+                        Enter your credentials to access the dashboard
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                            <FormField
+                                control={form.control}
+                                name="email"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Email</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="admin@example.com" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Password</FormLabel>
+                                        <FormControl>
+                                            <Input type="password" placeholder="••••••" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <div className="flex justify-end">
+                                <Link
+                                    href="/admin/forgot-password"
+                                    className="text-sm font-medium text-primary hover:underline"
+                                >
+                                    Forgot password?
+                                </Link>
+                            </div>
+                            {error && (
+                                <div className="text-sm text-red-500 font-medium text-center">
+                                    {error}
+                                </div>
+                            )}
+                            <Button type="submit" className="w-full" disabled={isLoading}>
+                                {isLoading ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Signing in...
+                                    </>
+                                ) : (
+                                    "Sign In"
+                                )}
+                            </Button>
+                        </form>
+                    </Form>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

app/admin/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminRoot() {
+    redirect("/admin/dashboard");
+}

app/admin/portfolio/page.tsx

@@ -0,0 +1,478 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { z } from "zod"
+
+const portfolioSchema = z.object({
+    title: z.string().min(1, "Title is required"),
+    slug: z.string().min(1, "Slug is required").regex(/^[a-z0-9-]+$/, "Slug must be lowercase letters, numbers, and hyphens only"),
+    description: z.string().min(1, "Description is required"),
+    technologies: z.string().optional(),
+    imageUrl: z.string().optional(),
+    clientName: z.string().optional(),
+    industry: z.string().optional(),
+})
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Plus, Pencil, Trash2, ExternalLink, Loader2 } from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+type PortfolioItem = {
+    id: string
+    title: string
+    slug: string
+    description: string
+    technologies: string | null
+    imageUrl: string | null
+    clientName: string | null
+    industry: string | null
+    testimonials: string | null
+    createdAt: string
+    updatedAt: string
+    author?: { name: string | null; email: string }
+}
+
+type FormData = {
+    title: string
+    slug: string
+    description: string
+    technologies: string
+    imageUrl: string
+    clientName: string
+    industry: string
+}
+
+const emptyForm: FormData = {
+    title: "",
+    slug: "",
+    description: "",
+    technologies: "",
+    imageUrl: "",
+    clientName: "",
+    industry: "",
+}
+
+function slugify(str: string): string {
+    return str
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "")
+}
+
+export default function AdminPortfolioPage() {
+    const { data: session, status } = useSession()
+    const router = useRouter()
+
+    const [items, setItems] = useState<PortfolioItem[]>([])
+    const [loading, setLoading] = useState(true)
+    const [saving, setSaving] = useState(false)
+    const [formError, setFormError] = useState("")
+
+    // Dialog state
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [editingId, setEditingId] = useState<string | null>(null)
+    const [form, setForm] = useState<FormData>(emptyForm)
+    const [imageFile, setImageFile] = useState<File | null>(null)
+
+    // Delete dialog state
+    const [deleteId, setDeleteId] = useState<string | null>(null)
+    const [deleteTitle, setDeleteTitle] = useState("")
+
+    // Redirect if not authenticated
+    useEffect(() => {
+        if (status === "unauthenticated") router.push("/admin/login")
+    }, [status, router])
+
+    // Fetch portfolio items
+    const fetchItems = useCallback(async () => {
+        try {
+            const res = await fetch(`${API_URL}/admin/portfolio`, {
+                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
+                credentials: "include",
+            })
+            if (res.ok) {
+                const data = await res.json()
+                setItems(data)
+            }
+        } catch (err) {
+            console.error("Failed to fetch portfolio items:", err)
+        } finally {
+            setLoading(false)
+        }
+    }, [session])
+
+    useEffect(() => {
+        if (status === "authenticated") fetchItems()
+    }, [status, fetchItems])
+
+    // Auto-generate slug from title
+    const handleTitleChange = (value: string) => {
+        setForm((prev) => ({
+            ...prev,
+            title: value,
+            // Only auto-generate slug if creating new or slug hasn't been manually edited
+            slug: editingId ? prev.slug : slugify(value),
+        }))
+    }
+
+    // Open create dialog
+    const openCreate = () => {
+        setEditingId(null)
+        setForm(emptyForm)
+        setImageFile(null)
+        setFormError("")
+        setDialogOpen(true)
+    }
+
+    // Open edit dialog
+    const openEdit = (item: PortfolioItem) => {
+        setEditingId(item.id)
+        setForm({
+            title: item.title,
+            slug: item.slug,
+            description: item.description,
+            technologies: item.technologies || "",
+            imageUrl: item.imageUrl || "",
+            clientName: item.clientName || "",
+            industry: item.industry || "",
+        })
+        setImageFile(null)
+        setFormError("")
+        setDialogOpen(true)
+    }
+
+    // Submit create/edit
+    const handleSubmit = async () => {
+        try {
+            // Validate
+            portfolioSchema.parse(form)
+        } catch (error: any) {
+            if (error instanceof z.ZodError) {
+                return setFormError(error.errors[0].message)
+            }
+            return setFormError("Invalid form data")
+        }
+
+        setSaving(true)
+        setFormError("")
+
+        try {
+            let uploadedImageUrl = form.imageUrl
+
+            // Upload image if selected
+            if (imageFile) {
+                const formData = new FormData()
+                formData.append("file", imageFile)
+
+                const uploadRes = await fetch(`${API_URL}/upload`, {
+                    method: "POST",
+                    headers: {
+                        Authorization: `Bearer ${(session as any)?.accessToken || "session"}`,
+                    },
+                    body: formData,
+                })
+
+                if (!uploadRes.ok) {
+                    const uploadData = await uploadRes.json()
+                    throw new Error(uploadData.error || "Failed to upload image")
+                }
+
+                const uploadData = await uploadRes.json()
+                uploadedImageUrl = uploadData.url
+            }
+
+            const url = editingId
+                ? `${API_URL}/admin/portfolio/${editingId}`
+                : `${API_URL}/admin/portfolio`
+
+            const res = await fetch(url, {
+                method: editingId ? "PATCH" : "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${(session as any)?.accessToken || "session"}`,
+                },
+                credentials: "include",
+                body: JSON.stringify({
+                    title: form.title.trim(),
+                    slug: form.slug.trim(),
+                    description: form.description.trim(),
+                    technologies: form.technologies.trim() || null,
+                    imageUrl: uploadedImageUrl.trim() || null,
+                    clientName: form.clientName.trim() || null,
+                    industry: form.industry.trim() || null,
+                }),
+            })
+
+            const data = await res.json()
+
+            if (!res.ok) {
+                setFormError(data.error || "Something went wrong")
+                return
+            }
+
+            setDialogOpen(false)
+            fetchItems()
+        } catch (err: any) {
+            setFormError(err.message || "Network error. Please try again.")
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    // Delete
+    const handleDelete = async () => {
+        if (!deleteId) return
+
+        try {
+            await fetch(`${API_URL}/admin/portfolio/${deleteId}`, {
+                method: "DELETE",
+                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
+                credentials: "include",
+            })
+            setDeleteId(null)
+            fetchItems()
+        } catch (err) {
+            console.error("Delete failed:", err)
+        }
+    }
+
+    if (status === "loading" || loading) {
+        return (
+            <div className="flex items-center justify-center min-h-[60vh]">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" suppressHydrationWarning />
+            </div>
+        )
+    }
+
+    return (
+        <div className="p-8 space-y-8">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div>
+                    <h1 className="text-3xl font-bold">Portfolio</h1>
+                    <p className="text-muted-foreground mt-1">Manage your portfolio projects</p>
+                </div>
+                <Button onClick={openCreate}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    New Project
+                </Button>
+            </div>
+
+            {/* Portfolio items list */}
+            {items.length === 0 ? (
+                <Card>
+                    <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                        <p className="text-muted-foreground mb-4">No portfolio items yet.</p>
+                        <Button onClick={openCreate} variant="outline">
+                            <Plus className="mr-2 h-4 w-4" />
+                            Create Your First Project
+                        </Button>
+                    </CardContent>
+                </Card>
+            ) : (
+                <div className="grid gap-4">
+                    {items.map((item) => (
+                        <Card key={item.id} className="hover:shadow-md transition-shadow">
+                            <CardContent className="flex items-center justify-between py-4">
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-3">
+                                        <h3 className="font-semibold truncate">{item.title}</h3>
+                                        {item.industry && (
+                                            <span className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs">
+                                                {item.industry}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-sm text-muted-foreground mt-1 line-clamp-1">
+                                        {item.description}
+                                    </p>
+                                    <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+                                        <span className="font-mono">/{item.slug}</span>
+                                        {item.technologies && (
+                                            <span>{item.technologies}</span>
+                                        )}
+                                        <span>{new Date(item.createdAt).toLocaleDateString()}</span>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2 ml-4">
+                                    <Button variant="ghost" size="icon-sm" asChild>
+                                        <a href={`/portfolio/${item.slug}`} target="_blank" rel="noopener noreferrer">
+                                            <ExternalLink className="h-4 w-4" />
+                                        </a>
+                                    </Button>
+                                    <Button variant="ghost" size="icon-sm" onClick={() => openEdit(item)}>
+                                        <Pencil className="h-4 w-4" />
+                                    </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon-sm"
+                                        className="text-destructive hover:text-destructive"
+                                        onClick={() => { setDeleteId(item.id); setDeleteTitle(item.title) }}
+                                    >
+                                        <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            {/* Create/Edit Dialog */}
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{editingId ? "Edit Project" : "New Project"}</DialogTitle>
+                        <DialogDescription>
+                            {editingId ? "Update the project details below." : "Fill in the details for your new portfolio project."}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Title *</label>
+                            <Input
+                                value={form.title}
+                                onChange={(e) => handleTitleChange(e.target.value)}
+                                placeholder="My Awesome Project"
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Slug *</label>
+                            <Input
+                                value={form.slug}
+                                onChange={(e) => setForm((p) => ({ ...p, slug: e.target.value }))}
+                                placeholder="my-awesome-project"
+                                className="font-mono text-sm"
+                            />
+                            <p className="text-xs text-muted-foreground mt-1">
+                                URL: /portfolio/{form.slug || "..."}
+                            </p>
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Description *</label>
+                            <textarea
+                                className="flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                value={form.description}
+                                onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
+                                placeholder="A brief description of the project..."
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Technologies</label>
+                            <Input
+                                value={form.technologies}
+                                onChange={(e) => setForm((p) => ({ ...p, technologies: e.target.value }))}
+                                placeholder="Next.js, React, Tailwind CSS"
+                            />
+                            <p className="text-xs text-muted-foreground mt-1">Comma-separated list</p>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <div>
+                                <label className="text-sm font-medium mb-1 block">Client Name</label>
+                                <Input
+                                    value={form.clientName}
+                                    onChange={(e) => setForm((p) => ({ ...p, clientName: e.target.value }))}
+                                    placeholder="Acme Corp"
+                                />
+                            </div>
+                            <div>
+                                <label className="text-sm font-medium mb-1 block">Industry</label>
+                                <Input
+                                    value={form.industry}
+                                    onChange={(e) => setForm((p) => ({ ...p, industry: e.target.value }))}
+                                    placeholder="E-commerce"
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Image</label>
+                            <div className="flex gap-4 items-start">
+                                <div className="flex-1 space-y-2">
+                                    <Input
+                                        type="file"
+                                        accept="image/*"
+                                        onChange={(e) => {
+                                            if (e.target.files && e.target.files[0]) {
+                                                setImageFile(e.target.files[0])
+                                            }
+                                        }}
+                                    />
+                                    <p className="text-xs text-muted-foreground">Or provide an image URL directly:</p>
+                                    <Input
+                                        value={form.imageUrl}
+                                        onChange={(e) => { setForm((p) => ({ ...p, imageUrl: e.target.value })); setImageFile(null) }}
+                                        placeholder="https://example.com/image.png"
+                                    />
+                                </div>
+                                {(imageFile || form.imageUrl) && (
+                                    <div className="w-24 h-24 rounded-md border shrink-0 overflow-hidden bg-muted">
+                                        <img
+                                            src={imageFile ? URL.createObjectURL(imageFile) : (form.imageUrl.startsWith("http") || form.imageUrl.startsWith("/")) ? form.imageUrl : `/${form.imageUrl}`}
+                                            alt="Preview"
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        {formError && (
+                            <p className="text-sm text-destructive font-medium">{formError}</p>
+                        )}
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
+                            Cancel
+                        </Button>
+                        <Button onClick={handleSubmit} disabled={saving}>
+                            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            {editingId ? "Save Changes" : "Create Project"}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Delete Confirmation Dialog */}
+            <AlertDialog open={!!deleteId} onOpenChange={(open) => { if (!open) setDeleteId(null) }}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Delete &quot;{deleteTitle}&quot;?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This action cannot be undone. This will permanently delete the portfolio item and remove it from the website.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={handleDelete}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    )
+}

app/admin/posts/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { RoleGuard } from "@/components/auth/RoleGuard"
+import { Role } from "@/types/auth"
+
+export default function PostsPage() {
+    return (
+        <RoleGuard allowedRoles={[Role.SUPER_ADMIN, Role.EDITOR]}>
+            <div className="p-8">
+                <h1 className="text-3xl font-bold mb-4">Content Management</h1>
+                <div className="border p-4 rounded bg-background">
+                    <p>Super Admins and Editors can manage content here.</p>
+                    {/* Blog/Portfolio management UI would go here */}
+                </div>
+            </div>
+        </RoleGuard>
+    )
+}

app/admin/reset-password/page.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import { useState, Suspense } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
+
+function ResetPasswordForm() {
+    const router = useRouter()
+    const searchParams = useSearchParams()
+    const token = searchParams.get("token")
+
+    const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+    const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+    const [errorMessage, setErrorMessage] = useState("")
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (password !== confirmPassword) {
+            setErrorMessage("Passwords do not match")
+            return
+        }
+
+        if (!token) {
+            setErrorMessage("Missing reset token")
+            return
+        }
+
+        setStatus("loading")
+        setErrorMessage("")
+
+        try {
+            const res = await fetch(`${API_URL}/auth/reset-password`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ token, password }),
+            })
+
+            const data = await res.json()
+
+            if (res.ok) {
+                setStatus("success")
+                setTimeout(() => {
+                    router.push("/admin/login")
+                }, 2000)
+            } else {
+                setStatus("error")
+                setErrorMessage(data.error || "Failed to reset password")
+            }
+        } catch (error) {
+            setStatus("error")
+            setErrorMessage("An error occurred")
+        }
+    }
+
+    if (!token) {
+        return (
+            <div className="text-destructive">
+                Invalid link. Missing token.
+            </div>
+        )
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            {status === "error" && (
+                <div className="bg-destructive/15 text-destructive p-3 rounded-md text-sm">
+                    {errorMessage}
+                </div>
+            )}
+            {status === "success" && (
+                <div className="bg-green-100 text-green-700 p-3 rounded-md text-sm">
+                    Password updated! Redirecting to login...
+                </div>
+            )}
+
+            <div className="space-y-2">
+                <Label htmlFor="password">New Password</Label>
+                <Input
+                    id="password"
+                    type="password"
+                    required
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    disabled={status === "loading" || status === "success"}
+                />
+            </div>
+            <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm Password</Label>
+                <Input
+                    id="confirmPassword"
+                    type="password"
+                    required
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    disabled={status === "loading" || status === "success"}
+                />
+            </div>
+            <Button type="submit" className="w-full" disabled={status === "loading" || status === "success"}>
+                {status === "loading" ? "Resetting..." : "Reset Password"}
+            </Button>
+        </form>
+    )
+}
+
+export default function ResetPasswordPage() {
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle className="text-2xl font-bold">Reset Password</CardTitle>
+                    <CardDescription>
+                        Enter your new password below.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        <ResetPasswordForm />
+                    </Suspense>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

app/admin/settings/page.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { RoleGuard } from "@/components/auth/RoleGuard"
+import { Role } from "@/types/auth"
+
+export default function SettingsPage() {
+    return (
+        <RoleGuard allowedRoles={[Role.SUPER_ADMIN]}>
+            <div className="p-8">
+                <h1 className="text-3xl font-bold mb-4">System Settings</h1>
+                <div className="border p-4 rounded bg-background">
+                    <div className="bg-green-100 text-green-700 p-4 rounded mb-4">
+                        <strong>Access Granted:</strong> You are viewing this page because you have the <strong>SUPER_ADMIN</strong> role.
+                    </div>
+                    <p>Settings configuration panel will be implemented here.</p>
+                </div>
+            </div>
+        </RoleGuard>
+    )
+}

app/admin/testimonials/page.tsx

@@ -0,0 +1,395 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Plus, Pencil, Trash2, Star, CheckCircle, XCircle, Loader2 } from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+type Testimonial = {
+    id: string
+    clientName: string
+    company: string | null
+    content: string
+    rating: number
+    imageUrl: string | null
+    approved: boolean
+    createdAt: string
+}
+
+type FormData = {
+    clientName: string
+    company: string
+    content: string
+    rating: number
+    imageUrl: string
+}
+
+const emptyForm: FormData = {
+    clientName: "",
+    company: "",
+    content: "",
+    rating: 5,
+    imageUrl: "",
+}
+
+export default function AdminTestimonialsPage() {
+    const { data: session, status } = useSession()
+    const router = useRouter()
+
+    const [items, setItems] = useState<Testimonial[]>([])
+    const [loading, setLoading] = useState(true)
+    const [saving, setSaving] = useState(false)
+    const [formError, setFormError] = useState("")
+
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [editingId, setEditingId] = useState<string | null>(null)
+    const [form, setForm] = useState<FormData>(emptyForm)
+
+    const [deleteId, setDeleteId] = useState<string | null>(null)
+    const [deleteName, setDeleteName] = useState("")
+
+    useEffect(() => {
+        if (status === "unauthenticated") router.push("/admin/login")
+    }, [status, router])
+
+    const fetchItems = useCallback(async () => {
+        try {
+            const res = await fetch(`${API_URL}/admin/testimonials`, {
+                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
+                credentials: "include",
+            })
+            if (res.ok) {
+                const data = await res.json()
+                setItems(data)
+            }
+        } catch (err) {
+            console.error("Failed to fetch testimonials:", err)
+        } finally {
+            setLoading(false)
+        }
+    }, [session])
+
+    useEffect(() => {
+        if (status === "authenticated") fetchItems()
+    }, [status, fetchItems])
+
+    const openCreate = () => {
+        setEditingId(null)
+        setForm(emptyForm)
+        setFormError("")
+        setDialogOpen(true)
+    }
+
+    const openEdit = (item: Testimonial) => {
+        setEditingId(item.id)
+        setForm({
+            clientName: item.clientName,
+            company: item.company || "",
+            content: item.content,
+            rating: item.rating,
+            imageUrl: item.imageUrl || "",
+        })
+        setFormError("")
+        setDialogOpen(true)
+    }
+
+    const handleSubmit = async () => {
+        if (!form.clientName.trim()) return setFormError("Client name is required")
+        if (!form.content.trim()) return setFormError("Testimonial content is required")
+        if (form.rating < 1 || form.rating > 5) return setFormError("Rating must be between 1 and 5")
+
+        setSaving(true)
+        setFormError("")
+
+        try {
+            const url = editingId
+                ? `${API_URL}/admin/testimonials/${editingId}`
+                : `${API_URL}/admin/testimonials`
+
+            const res = await fetch(url, {
+                method: editingId ? "PATCH" : "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${(session as any)?.accessToken || "session"}`,
+                },
+                credentials: "include",
+                body: JSON.stringify({
+                    clientName: form.clientName.trim(),
+                    company: form.company.trim() || null,
+                    content: form.content.trim(),
+                    rating: form.rating,
+                    imageUrl: form.imageUrl.trim() || null,
+                }),
+            })
+
+            const data = await res.json()
+            if (!res.ok) {
+                setFormError(data.error || "Something went wrong")
+                return
+            }
+
+            setDialogOpen(false)
+            fetchItems()
+        } catch (err) {
+            setFormError("Network error. Please try again.")
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    const handleToggle = async (id: string) => {
+        try {
+            await fetch(`${API_URL}/admin/testimonials/${id}/toggle`, {
+                method: "PATCH",
+                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
+                credentials: "include",
+            })
+            fetchItems()
+        } catch (err) {
+            console.error("Toggle failed:", err)
+        }
+    }
+
+    const handleDelete = async () => {
+        if (!deleteId) return
+        try {
+            await fetch(`${API_URL}/admin/testimonials/${deleteId}`, {
+                method: "DELETE",
+                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
+                credentials: "include",
+            })
+            setDeleteId(null)
+            fetchItems()
+        } catch (err) {
+            console.error("Delete failed:", err)
+        }
+    }
+
+    if (status === "loading" || loading) {
+        return (
+            <div className="flex items-center justify-center min-h-[60vh]">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" suppressHydrationWarning />
+            </div>
+        )
+    }
+
+    return (
+        <div className="p-8 space-y-8">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div>
+                    <h1 className="text-3xl font-bold">Testimonials</h1>
+                    <p className="text-muted-foreground mt-1">Manage client testimonials and approval status</p>
+                </div>
+                <Button onClick={openCreate}>
+                    <Plus className="mr-2 h-4 w-4" suppressHydrationWarning />
+                    New Testimonial
+                </Button>
+            </div>
+
+            {/* Testimonials list */}
+            {items.length === 0 ? (
+                <Card>
+                    <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+                        <p className="text-muted-foreground mb-4">No testimonials yet.</p>
+                        <Button onClick={openCreate} variant="outline">
+                            <Plus className="mr-2 h-4 w-4" suppressHydrationWarning />
+                            Add Your First Testimonial
+                        </Button>
+                    </CardContent>
+                </Card>
+            ) : (
+                <div className="grid gap-4">
+                    {items.map((item) => (
+                        <Card key={item.id} className="hover:shadow-md transition-shadow">
+                            <CardContent className="flex items-start justify-between py-4 gap-4">
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-3 mb-1">
+                                        <h3 className="font-semibold">{item.clientName}</h3>
+                                        {item.company && (
+                                            <span className="text-sm text-muted-foreground">
+                                                {item.company}
+                                            </span>
+                                        )}
+                                        {/* Approval badge */}
+                                        {item.approved ? (
+                                            <span className="inline-flex items-center gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded-full text-xs font-medium">
+                                                <CheckCircle className="h-3 w-3" suppressHydrationWarning />
+                                                Approved
+                                            </span>
+                                        ) : (
+                                            <span className="inline-flex items-center gap-1 bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 px-2 py-0.5 rounded-full text-xs font-medium">
+                                                <XCircle className="h-3 w-3" suppressHydrationWarning />
+                                                Pending
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
+                                        &ldquo;{item.content}&rdquo;
+                                    </p>
+                                    <div className="flex items-center gap-1">
+                                        {[...Array(5)].map((_, j) => (
+                                            <Star
+                                                key={j}
+                                                className={`h-3.5 w-3.5 ${j < item.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`}
+                                                suppressHydrationWarning
+                                            />
+                                        ))}
+                                        <span className="text-xs text-muted-foreground ml-2">
+                                            {new Date(item.createdAt).toLocaleDateString()}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-1 shrink-0">
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => handleToggle(item.id)}
+                                        className={item.approved ? "text-amber-600 hover:text-amber-700" : "text-green-600 hover:text-green-700"}
+                                    >
+                                        {item.approved ? "Unpublish" : "Approve"}
+                                    </Button>
+                                    <Button variant="ghost" size="icon-sm" onClick={() => openEdit(item)}>
+                                        <Pencil className="h-4 w-4" suppressHydrationWarning />
+                                    </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon-sm"
+                                        className="text-destructive hover:text-destructive"
+                                        onClick={() => { setDeleteId(item.id); setDeleteName(item.clientName) }}
+                                    >
+                                        <Trash2 className="h-4 w-4" suppressHydrationWarning />
+                                    </Button>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            {/* Create/Edit Dialog */}
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-lg">
+                    <DialogHeader>
+                        <DialogTitle>{editingId ? "Edit Testimonial" : "New Testimonial"}</DialogTitle>
+                        <DialogDescription>
+                            {editingId ? "Update the testimonial details." : "Add a new client testimonial."}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div>
+                                <label className="text-sm font-medium mb-1 block">Client Name *</label>
+                                <Input
+                                    value={form.clientName}
+                                    onChange={(e) => setForm((p) => ({ ...p, clientName: e.target.value }))}
+                                    placeholder="Jane Doe"
+                                />
+                            </div>
+                            <div>
+                                <label className="text-sm font-medium mb-1 block">Company</label>
+                                <Input
+                                    value={form.company}
+                                    onChange={(e) => setForm((p) => ({ ...p, company: e.target.value }))}
+                                    placeholder="Acme Inc."
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Testimonial *</label>
+                            <textarea
+                                className="flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                value={form.content}
+                                onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))}
+                                placeholder="What the client said about your work..."
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Rating (1-5)</label>
+                            <div className="flex items-center gap-1">
+                                {[1, 2, 3, 4, 5].map((val) => (
+                                    <button
+                                        key={val}
+                                        type="button"
+                                        onClick={() => setForm((p) => ({ ...p, rating: val }))}
+                                        className="p-1 hover:scale-110 transition-transform"
+                                    >
+                                        <Star
+                                            className={`h-6 w-6 ${val <= form.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`}
+                                            suppressHydrationWarning
+                                        />
+                                    </button>
+                                ))}
+                                <span className="text-sm text-muted-foreground ml-2">{form.rating}/5</span>
+                            </div>
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Avatar URL</label>
+                            <Input
+                                value={form.imageUrl}
+                                onChange={(e) => setForm((p) => ({ ...p, imageUrl: e.target.value }))}
+                                placeholder="https://example.com/avatar.jpg"
+                            />
+                        </div>
+                        {formError && (
+                            <p className="text-sm text-destructive font-medium">{formError}</p>
+                        )}
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
+                            Cancel
+                        </Button>
+                        <Button onClick={handleSubmit} disabled={saving}>
+                            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" suppressHydrationWarning />}
+                            {editingId ? "Save Changes" : "Add Testimonial"}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Delete Confirmation */}
+            <AlertDialog open={!!deleteId} onOpenChange={(open) => { if (!open) setDeleteId(null) }}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Delete testimonial from &quot;{deleteName}&quot;?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This action cannot be undone. This will permanently remove this testimonial.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={handleDelete}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    )
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/lib/auth"
+export const { GET, POST } = handlers

app/globals.css

@@ -0,0 +1,1494 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ───────────────────────────────────────────────
+   NexaFlow Brand Palette
+   ─────────────────────────────────────────────── */
+
+:root {
+  /* Rupam Portfolio Style - Neumorphic Light */
+  --background: 224 14% 90%;
+  --foreground: 215 25% 27%;
+  --card: 224 14% 90%;
+  --card-foreground: 215 25% 27%;
+  --popover: 224 14% 90%;
+  --popover-foreground: 215 25% 27%;
+
+  --primary: 248 73% 65%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 215 25% 27%;
+
+  --muted: 220 14% 96%;
+  --muted-foreground: 215 16% 47%;
+
+  --accent: 248 73% 65%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 248 73% 65%;
+  --radius: 0.625rem;
+
+  /* Semantic colors */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 100%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
+
+  /* Chart colors */
+  --chart-1: 248 73% 65%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* Neumorphism shadows - Rupam Style */
+  --neu-shadow-light: #ffffff;
+  --neu-shadow-dark: #a3b1c6;
+  --neu-distance: 20px;
+  --neu-blur: 60px;
+  --bg-primary: hsl(224, 14%, 90%);
+  --bg-secondary: hsl(220, 14%, 96%);
+
+  /* Floating blobs */
+  --blob-1: hsl(248, 73%, 65%);
+  --blob-2: hsl(280, 65%, 60%);
+
+  /* Gradient colors for premium look */
+  --gradient-start: 248 73% 65%;
+  --gradient-mid: 270 70% 60%;
+  --gradient-end: 290 65% 55%;
+}
+
+.dark {
+  --background: 224 71% 4%;
+  --foreground: 210 20% 98%;
+  --card: 224 71% 4%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71% 4%;
+  --popover-foreground: 210 20% 98%;
+
+  --primary: 248 73% 70%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 215 28% 17%;
+  --secondary-foreground: 210 20% 98%;
+
+  --muted: 215 28% 17%;
+  --muted-foreground: 218 11% 65%;
+
+  --accent: 248 73% 70%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 20% 98%;
+
+  --border: 215 28% 17%;
+  --input: 215 28% 17%;
+  --ring: 248 73% 70%;
+
+  /* Semantic colors (dark) */
+  --success: 142 71% 35%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 40%;
+  --warning-foreground: 0 0% 100%;
+  --info: 199 89% 38%;
+  --info-foreground: 0 0% 100%;
+
+  /* Chart colors (dark) */
+  --chart-1: 248 73% 70%;
+  --chart-2: 160 50% 40%;
+  --chart-3: 30 70% 50%;
+  --chart-4: 280 55% 55%;
+  --chart-5: 340 65% 50%;
+
+  /* Neumorphism shadows (dark) */
+  --neu-shadow-light: rgba(255, 255, 255, 0.05);
+  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
+  --neu-distance: 20px;
+  --neu-blur: 60px;
+  --bg-primary: hsl(224, 71%, 4%);
+  --bg-secondary: hsl(215, 28%, 17%);
+
+  /* Floating blobs */
+  --blob-1: hsl(248, 73%, 70%);
+  --blob-2: hsl(280, 55%, 55%);
+}
+
+/* ───────────────────────────────────────────────
+   Theme Mapping (Tailwind v4)
+   ─────────────────────────────────────────────── */
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  /* Semantic */
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+}
+
+/* ───────────────────────────────────────────────
+   Utilities
+   ─────────────────────────────────────────────── */
+
+@layer utilities {
+  .container {
+    margin-inline: auto;
+    padding-inline: 1.5rem;
+  }
+
+  @media (min-width: 640px) {
+    .container {
+      max-width: 640px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .container {
+      max-width: 768px;
+      padding-inline: 2rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .container {
+      max-width: 1024px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .container {
+      max-width: 1280px;
+    }
+  }
+
+  /* Smooth scroll behavior */
+  .smooth-scroll {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Hide scrollbar but keep functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Better focus styles */
+  .focus-ring {
+    @apply outline-none ring-2 ring-primary/50 ring-offset-2;
+  }
+
+  /* Text balance for better typography */
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Glass effect */
+  .glass {
+    background: hsl(var(--background) / 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  /* Gradient border */
+  .gradient-border {
+    position: relative;
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  /* Section spacing */
+  .section-py {
+    @apply py-16 md:py-20 lg:py-24;
+  }
+
+  /* Hide on scroll utility */
+  .hide-on-scroll {
+    transform: translateY(0);
+    transition: transform 0.3s ease;
+  }
+
+  .hide-on-scroll.scrolled {
+    transform: translateY(-100%);
+  }
+}
+
+/* ───────────────────────────────────────────────
+   Base Layer — Typography Scale & Defaults
+   ─────────────────────────────────────────────── */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    font-family: var(--font-heading), var(--font-sans);
+  }
+
+  h1 {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+  }
+
+  h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+  }
+
+  h3 {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+  }
+
+  h4 {
+    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
+  }
+
+  /* Font family utilities */
+  .font-heading {
+    font-family: var(--font-heading), var(--font-sans);
+  }
+
+  /* Utility typography classes */
+  .text-body {
+    @apply text-base leading-relaxed;
+  }
+
+  .text-caption {
+    @apply text-sm text-muted-foreground;
+  }
+
+  .text-overline {
+    @apply text-xs font-semibold uppercase tracking-widest text-muted-foreground;
+  }
+}
+
+/* ───────────────────────────────────────────────
+   CSS Animations (replacing Framer Motion)
+   ─────────────────────────────────────────────── */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-fade-in-down {
+  animation: fadeInDown 0.5s ease-out both;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 100%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 3s infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
+}
+
+/* Stagger delays */
+.animate-delay-1 {
+  animation-delay: 0.1s;
+}
+
+.animate-delay-2 {
+  animation-delay: 0.2s;
+}
+
+.animate-delay-3 {
+  animation-delay: 0.3s;
+}
+
+.animate-delay-4 {
+  animation-delay: 0.4s;
+}
+
+.animate-delay-5 {
+  animation-delay: 0.5s;
+}
+
+.animate-delay-6 {
+  animation-delay: 0.6s;
+}
+
+.animate-delay-7 {
+  animation-delay: 0.7s;
+}
+
+/* Hover effects */
+.hover-lift {
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+}
+
+.hover-glow {
+  transition: box-shadow 0.3s ease;
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px rgba(var(--primary), 0.3);
+}
+
+/* Neumorphism styles */
+.neu-flat {
+  background: hsl(var(--background));
+  box-shadow:
+    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
+    calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neu-flat:hover {
+  box-shadow:
+    calc(var(--neu-distance) * 1.25) calc(var(--neu-distance) * 1.25) calc(var(--neu-blur) * 1.25) var(--neu-shadow-dark),
+    calc(var(--neu-distance) * -1.25) calc(var(--neu-distance) * -1.25) calc(var(--neu-blur) * 1.25) var(--neu-shadow-light);
+}
+
+.neu-pressed {
+  background: hsl(var(--background));
+  box-shadow:
+    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
+    inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neu-convex {
+  background: linear-gradient(145deg, hsl(var(--background)), hsl(var(--muted)));
+  box-shadow:
+    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
+    calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neu-convex:hover {
+  box-shadow:
+    inset 4px 4px 8px var(--neu-shadow-dark),
+    inset -4px -4px 8px var(--neu-shadow-light);
+}
+
+.neu-concave {
+  background: linear-gradient(145deg, hsl(var(--muted)), hsl(var(--background)));
+  box-shadow:
+    inset 5px 5px 10px var(--neu-shadow-dark),
+    inset -5px -5px 10px var(--neu-shadow-light);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neu-button {
+  background: hsl(var(--background));
+  box-shadow:
+    8px 8px 16px var(--neu-shadow-dark),
+    -8px -8px 16px var(--neu-shadow-light);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neu-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    10px 10px 20px var(--neu-shadow-dark),
+    -10px -10px 20px var(--neu-shadow-light);
+}
+
+.neu-button:active {
+  transform: translateY(0);
+  box-shadow:
+    inset 4px 4px 8px var(--neu-shadow-dark),
+    inset -4px -4px 8px var(--neu-shadow-light);
+}
+
+.neu-card {
+  background: hsl(var(--background));
+  box-shadow:
+    12px 12px 24px var(--neu-shadow-dark),
+    -12px -12px 24px var(--neu-shadow-light);
+  border: none;
+  border-radius: 30px;
+  transition: all 0.3s ease;
+}
+
+.neu-card:hover {
+  box-shadow:
+    16px 16px 32px var(--neu-shadow-dark),
+    -16px -16px 32px var(--neu-shadow-light);
+}
+
+.neu-input {
+  background: hsl(var(--background));
+  box-shadow:
+    inset 4px 4px 8px var(--neu-shadow-dark),
+    inset -4px -4px 8px var(--neu-shadow-light);
+  border: none;
+  border-radius: 12px;
+  padding: 12px 16px;
+  transition: all 0.3s ease;
+}
+
+.neu-input:focus {
+  box-shadow:
+    inset 6px 6px 12px var(--neu-shadow-dark),
+    inset -6px -6px 12px var(--neu-shadow-light);
+  outline: none;
+}
+
+/* Advanced animation utilities */
+.animate-on-scroll {
+  opacity: 0;
+  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.bounce-subtle {
+  animation: bounceSubtle 2s ease-in-out infinite;
+}
+
+@keyframes bounceSubtle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.rotate-slow {
+  animation: rotateSlow 20s linear infinite;
+}
+
+@keyframes rotateSlow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.perspective-card {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+/* Premium gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-mid)), hsl(var(--gradient-end)));
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientShift 8s ease infinite;
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Floating background blobs */
+.floating-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.3;
+  animation: float 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.floating-blob-1 {
+  background: var(--blob-1);
+  width: 400px;
+  height: 400px;
+  top: -200px;
+  right: -100px;
+  animation-delay: 0s;
+}
+
+.floating-blob-2 {
+  background: var(--blob-2);
+  width: 350px;
+  height: 350px;
+  bottom: -150px;
+  left: -100px;
+  animation-delay: 5s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+/* Shimmer effect for premium feel */
+.shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.shimmer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Glow effect on hover */
+.glow-on-hover {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.glow-on-hover::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+  filter: blur(10px);
+}
+
+.glow-on-hover:hover::before {
+  opacity: 0.6;
+}
+
+/* 3D Card Tilt Effect */
+.card-3d {
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.card-3d:hover {
+  transform: translateY(-8px);
+}
+
+/* Scroll reveal animations */
+@keyframes reveal-up {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-left {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes reveal-right {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.reveal-up {
+  animation: reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.reveal-left {
+  animation: reveal-left 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.reveal-right {
+  animation: reveal-right 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.scale-in {
+  animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Magnetic button effect */
+.magnetic-button {
+  position: relative;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Text gradient animation */
+.text-shimmer {
+  background: linear-gradient(90deg,
+    hsl(var(--foreground)) 0%,
+    hsl(var(--primary)) 50%,
+    hsl(var(--foreground)) 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: text-shimmer 3s linear infinite;
+}
+
+@keyframes text-shimmer {
+  to {
+    background-position: 200% center;
+  }
+}
+
+/* Pulse animation for icons */
+.pulse-icon {
+  animation: pulse-icon 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-icon {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+/* Stagger children animation */
+.stagger-children > * {
+  opacity: 0;
+  animation: reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
+.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
+
+/* ───────────────────────────────────────────────
+   Creative UI Enhancements
+   ─────────────────────────────────────────────── */
+
+/* Animated gradient mesh background */
+.gradient-mesh {
+  background:
+    radial-gradient(at 40% 20%, hsla(248, 73%, 65%, 0.3) 0px, transparent 50%),
+    radial-gradient(at 80% 0%, hsla(280, 65%, 60%, 0.2) 0px, transparent 50%),
+    radial-gradient(at 0% 50%, hsla(199, 89%, 48%, 0.2) 0px, transparent 50%),
+    radial-gradient(at 80% 50%, hsla(340, 75%, 55%, 0.15) 0px, transparent 50%),
+    radial-gradient(at 0% 100%, hsla(30, 80%, 55%, 0.2) 0px, transparent 50%),
+    radial-gradient(at 80% 100%, hsla(160, 60%, 45%, 0.15) 0px, transparent 50%);
+  animation: gradient-mesh-move 20s ease infinite;
+}
+
+@keyframes gradient-mesh-move {
+  0%, 100% {
+    background-position: 0% 0%, 100% 0%, 0% 50%, 100% 50%, 0% 100%, 100% 100%;
+  }
+  25% {
+    background-position: 100% 0%, 0% 50%, 50% 0%, 0% 100%, 50% 50%, 0% 0%;
+  }
+  50% {
+    background-position: 100% 100%, 0% 0%, 100% 50%, 50% 0%, 100% 0%, 50% 50%;
+  }
+  75% {
+    background-position: 0% 100%, 100% 50%, 0% 0%, 100% 0%, 50% 50%, 100% 100%;
+  }
+}
+
+/* Noise texture overlay for depth */
+.noise-overlay {
+  position: relative;
+}
+
+.noise-overlay::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.03;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Morphing blob shapes */
+@keyframes morph-blob {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
+  }
+  75% {
+    border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
+  }
+}
+
+.morphing-blob {
+  animation: morph-blob 15s ease-in-out infinite;
+}
+
+/* Floating particles effect */
+@keyframes float-particle {
+  0%, 100% {
+    transform: translateY(0) translateX(0) rotate(0deg);
+    opacity: 0.3;
+  }
+  25% {
+    transform: translateY(-100px) translateX(50px) rotate(90deg);
+    opacity: 0.6;
+  }
+  50% {
+    transform: translateY(-200px) translateX(-30px) rotate(180deg);
+    opacity: 0.3;
+  }
+  75% {
+    transform: translateY(-100px) translateX(-50px) rotate(270deg);
+    opacity: 0.6;
+  }
+}
+
+.particle {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: hsl(var(--primary));
+  opacity: 0.3;
+  animation: float-particle 20s ease-in-out infinite;
+}
+
+/* Enhanced glass effect with animated border */
+.glass-card {
+  background: hsl(var(--background) / 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid hsl(var(--border) / 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    135deg,
+    hsl(var(--primary) / 0.1) 0%,
+    transparent 50%,
+    hsl(var(--accent) / 0.1) 100%
+  );
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.glass-card:hover::before {
+  opacity: 1;
+}
+
+/* Animated gradient border */
+.animated-border {
+  position: relative;
+  background: hsl(var(--background));
+  border-radius: var(--radius-lg);
+}
+
+.animated-border::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--angle, 0deg),
+    hsl(var(--primary)),
+    hsl(280, 65%, 60%),
+    hsl(320, 75%, 55%),
+    hsl(var(--primary))
+  );
+  z-index: -1;
+  animation: rotate-gradient 4s linear infinite;
+}
+
+@keyframes rotate-gradient {
+  to {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* Split color text effect */
+.split-color-text {
+  background: linear-gradient(
+    135deg,
+    hsl(var(--foreground)) 0%,
+    hsl(var(--foreground)) 50%,
+    hsl(var(--primary)) 50%,
+    hsl(var(--primary)) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 100% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: background-position 0.5s ease;
+}
+
+.split-color-text:hover {
+  background-position: 0 0;
+}
+
+/* 3D perspective card with depth */
+.card-3d-depth {
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.card-3d-depth:hover {
+  transform: rotateY(-5deg) rotateX(5deg) translateZ(20px);
+}
+
+.card-3d-depth::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    135deg,
+    hsl(var(--primary) / 0.1) 0%,
+    transparent 100%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.card-3d-depth:hover::before {
+  opacity: 1;
+}
+
+/* Spotlight hover effect */
+.spotlight-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.spotlight-card::after {
+  content: '';
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(
+    circle,
+    hsl(var(--primary) / 0.15) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.3s ease;
+}
+
+.spotlight-card:hover::after {
+  opacity: 1;
+}
+
+/* Typewriter effect */
+.typewriter {
+  overflow: hidden;
+  border-right: 2px solid hsl(var(--primary));
+  white-space: nowrap;
+  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blink-caret {
+  from, to { border-color: transparent; }
+  50% { border-color: hsl(var(--primary)); }
+}
+
+/* Glitch text effect */
+.glitch-text {
+  position: relative;
+}
+
+.glitch-text::before,
+.glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.glitch-text::before {
+  animation: glitch-1 0.3s infinite linear alternate-reverse;
+  color: hsl(0, 100%, 50%);
+  z-index: -1;
+}
+
+.glitch-text::after {
+  animation: glitch-2 0.3s infinite linear alternate-reverse;
+  color: hsl(180, 100%, 50%);
+  z-index: -2;
+}
+
+@keyframes glitch-1 {
+  0% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }
+  20% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -2px); }
+  40% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
+  60% { clip-path: inset(80% 0 0% 0); transform: translate(0, 2px); }
+  80% { clip-path: inset(0% 0 80% 0); transform: translate(2px, 0); }
+  100% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, -2px); }
+}
+
+@keyframes glitch-2 {
+  0% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -2px); }
+  20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }
+  40% { clip-path: inset(80% 0 0% 0); transform: translate(2px, 0); }
+  60% { clip-path: inset(40% 0 40% 0); transform: translate(0, -2px); }
+  80% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 0); }
+  100% { clip-path: inset(0% 0 80% 0); transform: translate(2px, 2px); }
+}
+
+/* Neon glow effect */
+.neon-glow {
+  text-shadow:
+    0 0 5px hsl(var(--primary)),
+    0 0 10px hsl(var(--primary)),
+    0 0 20px hsl(var(--primary)),
+    0 0 40px hsl(var(--primary));
+  animation: neon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes neon-pulse {
+  0%, 100% {
+    text-shadow:
+      0 0 5px hsl(var(--primary)),
+      0 0 10px hsl(var(--primary)),
+      0 0 20px hsl(var(--primary)),
+      0 0 40px hsl(var(--primary));
+  }
+  50% {
+    text-shadow:
+      0 0 2px hsl(var(--primary)),
+      0 0 5px hsl(var(--primary)),
+      0 0 10px hsl(var(--primary)),
+      0 0 20px hsl(var(--primary));
+  }
+}
+
+/* Ripple button effect */
+.ripple-button {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple-button::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: radial-gradient(circle, hsl(var(--primary-foreground) / 0.3) 10%, transparent 10%);
+  background-size: 0 0;
+  background-position: center;
+  transition: background-size 0.5s ease;
+}
+
+.ripple-button:active::after {
+  background-size: 200% 200%;
+}
+
+/* Aurora background effect */
+.aurora-bg {
+  position: relative;
+  overflow: hidden;
+}
+
+.aurora-bg::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background:
+    conic-gradient(from 0deg at 50% 50%, hsla(248, 73%, 65%, 0.3) 0deg, transparent 60deg),
+    conic-gradient(from 120deg at 50% 50%, hsla(280, 65%, 60%, 0.2) 0deg, transparent 60deg),
+    conic-gradient(from 240deg at 50% 50%, hsla(199, 89%, 48%, 0.2) 0deg, transparent 60deg);
+  animation: aurora-rotate 30s linear infinite;
+  opacity: 0.5;
+}
+
+@keyframes aurora-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scroll indicator */
+.scroll-indicator {
+  width: 30px;
+  height: 50px;
+  border: 2px solid hsl(var(--primary) / 0.5);
+  border-radius: 25px;
+  position: relative;
+}
+
+.scroll-indicator::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: hsl(var(--primary));
+  border-radius: 50%;
+  transform: translateX(-50%);
+  animation: scroll-bounce 2s ease-in-out infinite;
+}
+
+@keyframes scroll-bounce {
+  0%, 100% { top: 8px; opacity: 1; }
+  50% { top: 32px; opacity: 0.3; }
+}
+
+/* Reveal animation on scroll */
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-left.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.reveal-scale.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Interactive underline */
+.interactive-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.interactive-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
+  border-radius: 2px;
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.interactive-underline:hover::after {
+  width: 100%;
+}
+
+/* Counter animation */
+.counter-animate {
+  display: inline-block;
+  animation: counter-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes counter-pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+/* Shine effect */
+.shine-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.shine-effect::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    hsl(var(--primary-foreground) / 0.2),
+    transparent
+  );
+  transform: skewX(-25deg);
+  transition: left 0.5s ease;
+}
+
+.shine-effect:hover::after {
+  left: 150%;
+}
+
+/* Orbit animation */
+.orbit {
+  animation: orbit-spin 20s linear infinite;
+}
+
+@keyframes orbit-spin {
+  from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
+  to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
+}
+
+/* Wave text effect */
+.wave-text span {
+  display: inline-block;
+  animation: wave 1s ease-in-out infinite;
+}
+
+.wave-text span:nth-child(1) { animation-delay: 0s; }
+.wave-text span:nth-child(2) { animation-delay: 0.1s; }
+.wave-text span:nth-child(3) { animation-delay: 0.2s; }
+.wave-text span:nth-child(4) { animation-delay: 0.3s; }
+.wave-text span:nth-child(5) { animation-delay: 0.4s; }
+.wave-text span:nth-child(6) { animation-delay: 0.5s; }
+
+@keyframes wave {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+/* Dark mode specific enhancements */
+.dark .glass-card {
+  background: hsl(var(--background) / 0.4);
+  border: 1px solid hsl(var(--border) / 0.2);
+}
+
+.dark .gradient-mesh {
+  background:
+    radial-gradient(at 40% 20%, hsla(248, 73%, 70%, 0.15) 0px, transparent 50%),
+    radial-gradient(at 80% 0%, hsla(280, 55%, 55%, 0.1) 0px, transparent 50%),
+    radial-gradient(at 0% 50%, hsla(199, 89%, 48%, 0.1) 0px, transparent 50%),
+    radial-gradient(at 80% 50%, hsla(340, 65%, 50%, 0.08) 0px, transparent 50%);
+}
+
+/* Underline animation */
+.underline-animate {
+  position: relative;
+}
+
+.underline-animate::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: hsl(var(--primary));
+  transition: width 0.3s ease;
+}
+
+.underline-animate:hover::after {
+  width: 100%;
+}

app/layout.tsx

@@ -0,0 +1,81 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-sans",
+  subsets: ["latin"],
+  display: "swap",
+  preload: true,
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const jakarta = Plus_Jakarta_Sans({
+  variable: "--font-heading",
+  subsets: ["latin"],
+  display: "swap",
+  preload: true,
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "NexaFlow — Digital Agency | Web & App Development",
+    template: "%s | NexaFlow",
+  },
+  description: "We design and build high-performance websites, mobile apps, and digital products that drive real business growth. Let's create something extraordinary.",
+  keywords: ["web development", "app development", "UI/UX design", "SEO", "digital agency", "nexaflow"],
+  authors: [{ name: "NexaFlow" }],
+  creator: "NexaFlow",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://nexaflow.dev",
+    siteName: "NexaFlow",
+    title: "NexaFlow — Digital Agency | Web & App Development",
+    description: "We design and build high-performance websites, mobile apps, and digital products that drive real business growth.",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NexaFlow — Digital Agency",
+    description: "We design and build high-performance websites, mobile apps, and digital products.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+import { SessionProvider } from "next-auth/react";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${inter.variable} ${jetbrainsMono.variable} ${jakarta.variable} font-sans antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SessionProvider>
+            {children}
+            <Toaster />
+          </SessionProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/unauthorized/page.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function UnauthorizedPage() {
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
+            <Card className="w-full max-w-md border-destructive/50">
+                <CardHeader>
+                    <CardTitle className="text-2xl font-bold text-destructive">Access Denied</CardTitle>
+                    <CardDescription>
+                        You do not have permission to view this page.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <p className="text-sm text-muted-foreground">
+                        Please contact your administrator if you believe this is an error.
+                    </p>
+                </CardContent>
+                <CardFooter className="flex justify-center gap-4">
+                    <Button asChild variant="outline">
+                        <Link href="/admin/dashboard">Return to Dashboard</Link>
+                    </Button>
+                    <Button asChild variant="default">
+                        <Link href="/admin/login">Login with different account</Link>
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

components/admin/BlogForm.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSession } from "next-auth/react";
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import LinkExtension from '@tiptap/extension-link';
+import ImageExtension from '@tiptap/extension-image';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
+import { Bold, Italic, List, ListOrdered, Link as LinkIcon, Image as ImageIcon, Loader2 } from 'lucide-react';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
+
+interface BlogFormProps {
+    initialData?: any;
+    isEditing?: boolean;
+}
+
+export default function BlogForm({ initialData = null, isEditing = false }: BlogFormProps) {
+    const router = useRouter();
+    const { data: session } = useSession();
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Form State
+    const [title, setTitle] = useState(initialData?.title || '');
+    const [slug, setSlug] = useState(initialData?.slug || '');
+    const [excerpt, setExcerpt] = useState(initialData?.excerpt || '');
+    const [featuredImage, setFeaturedImage] = useState(initialData?.featuredImage || '');
+    const [status, setStatus] = useState(initialData?.status || 'DRAFT');
+    const [publishedAt, setPublishedAt] = useState(initialData?.publishedAt ? new Date(initialData.publishedAt).toISOString().slice(0, 16) : '');
+    const [tags, setTags] = useState(initialData?.tags ? JSON.parse(initialData.tags).join(', ') : '');
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            LinkExtension.configure({ openOnClick: false }),
+            ImageExtension.configure({ inline: true }),
+        ],
+        content: initialData?.content || '<p>Start writing your post here...</p>',
+        immediatelyRender: false,
+        editorProps: {
+            attributes: {
+                class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[400px] p-4 border rounded-md max-w-none',
+            },
+        },
+    });
+
+    const setLink = () => {
+        const previousUrl = editor?.getAttributes('link').href;
+        const url = window.prompt('URL', previousUrl);
+        if (url === null) return;
+        if (url === '') {
+            editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+            return;
+        }
+        editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    };
+
+    const addImage = () => {
+        const url = window.prompt('Image URL');
+        if (url) {
+            editor?.chain().focus().setImage({ src: url }).run();
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        const content = editor?.getHTML();
+        const tagsArray = tags.split(',').map((t: string) => t.trim()).filter(Boolean);
+
+        const payload = {
+            title,
+            slug: slug || undefined,
+            content,
+            excerpt,
+            featuredImage,
+            status,
+            publishedAt: publishedAt ? new Date(publishedAt).toISOString() : null,
+            tags: JSON.stringify(tagsArray)
+        };
+
+        try {
+            const url = isEditing && initialData?.id
+                ? `${API_URL}/admin/blog/${initialData.id}`
+                : `${API_URL}/admin/blog`;
+
+            const method = isEditing ? 'PUT' : 'POST';
+
+            const res = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${session?.user?.id}`
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (res.ok) {
+                router.push('/admin/blog');
+                router.refresh();
+            } else {
+                const data = await res.json();
+                alert(`Error: ${data.error || 'Failed to save post'}`);
+            }
+        } catch (error) {
+            console.error("Save error:", error);
+            alert("An unexpected error occurred while saving.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-8">
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <h2 className="text-3xl font-bold tracking-tight">
+                    {isEditing ? 'Edit Article' : 'New Article'}
+                </h2>
+                <div className="flex gap-2 w-full md:w-auto">
+                    <Button variant="outline" type="button" onClick={() => router.push('/admin/blog')}>
+                        Cancel
+                    </Button>
+                    <Button type="submit" disabled={isLoading || !title || !editor?.getHTML()}>
+                        {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                        {isEditing ? 'Save Changes' : 'Create Post'}
+                    </Button>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Main Content Area */}
+                <div className="lg:col-span-2 space-y-6">
+                    <Card>
+                        <CardContent className="p-6 space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="title">Post Title *</Label>
+                                <Input
+                                    id="title"
+                                    value={title}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                    placeholder="Enter an engaging title..."
+                                    required
+                                    className="text-lg font-medium"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Content *</Label>
+                                {editor && (
+                                    <div className="border rounded-md overflow-hidden bg-background">
+                                        {/* TipTap Toolbar */}
+                                        <div className="flex flex-wrap items-center gap-1 p-1 border-b bg-muted/30">
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'bg-muted' : ''}>
+                                                <Bold className="h-4 w-4" />
+                                            </Button>
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'bg-muted' : ''}>
+                                                <Italic className="h-4 w-4" />
+                                            </Button>
+                                            <div className="w-px h-4 bg-border mx-1" />
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'bg-muted' : ''}>
+                                                H2
+                                            </Button>
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'bg-muted' : ''}>
+                                                H3
+                                            </Button>
+                                            <div className="w-px h-4 bg-border mx-1" />
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleBulletList().run()} className={editor.isActive('bulletList') ? 'bg-muted' : ''}>
+                                                <List className="h-4 w-4" />
+                                            </Button>
+                                            <Button type="button" variant="ghost" size="sm" onClick={() => editor.chain().focus().toggleOrderedList().run()} className={editor.isActive('orderedList') ? 'bg-muted' : ''}>
+                                                <ListOrdered className="h-4 w-4" />
+                                            </Button>
+                                            <div className="w-px h-4 bg-border mx-1" />
+                                            <Button type="button" variant="ghost" size="sm" onClick={setLink} className={editor.isActive('link') ? 'bg-muted' : ''}>
+                                                <LinkIcon className="h-4 w-4" />
+                                            </Button>
+                                            <Button type="button" variant="ghost" size="sm" onClick={addImage}>
+                                                <ImageIcon className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                        {/* TipTap Editor */}
+                                        <EditorContent editor={editor} />
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="excerpt">Excerpt / Summary</Label>
+                                <Textarea
+                                    id="excerpt"
+                                    value={excerpt}
+                                    onChange={(e) => setExcerpt(e.target.value)}
+                                    placeholder="Brief summary for search engines and social sharing..."
+                                    rows={3}
+                                />
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Sidebar Metrics & Settings */}
+                <div className="space-y-6">
+                    <Card>
+                        <CardContent className="p-6 space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="status">Publishing Status</Label>
+                                <Select value={status} onValueChange={setStatus}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select status" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="DRAFT">Draft</SelectItem>
+                                        <SelectItem value="PUBLISHED">Published</SelectItem>
+                                        <SelectItem value="SCHEDULED">Scheduled</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="publishedAt">Publish Date</Label>
+                                <Input
+                                    id="publishedAt"
+                                    type="datetime-local"
+                                    value={publishedAt}
+                                    onChange={(e) => setPublishedAt(e.target.value)}
+                                    disabled={status === 'DRAFT'}
+                                />
+                                {status === 'DRAFT' && <p className="text-xs text-muted-foreground">Date is disabled while in Draft status.</p>}
+                            </div>
+
+                            <div className="space-y-2 pt-4 border-t">
+                                <Label htmlFor="slug">Custom URL Slug (Optional)</Label>
+                                <Input
+                                    id="slug"
+                                    value={slug}
+                                    onChange={(e) => setSlug(e.target.value)}
+                                    placeholder="e.g. my-awesome-post"
+                                />
+                                <p className="text-xs text-muted-foreground">Leave blank to auto-generate from title.</p>
+                            </div>
+
+                            <div className="space-y-2 pt-4 border-t">
+                                <Label htmlFor="featuredImage">Featured Image URL</Label>
+                                <Input
+                                    id="featuredImage"
+                                    value={featuredImage}
+                                    onChange={(e) => setFeaturedImage(e.target.value)}
+                                    placeholder="https://..."
+                                />
+                                {featuredImage && (
+                                    <div className="mt-2 text-xs text-muted-foreground overflow-hidden rounded-md h-32 bg-muted relative">
+                                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                                        <img src={featuredImage} alt="Featured preview" className="object-cover w-full h-full" />
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="space-y-2 pt-4 border-t">
+                                <Label htmlFor="tags">Tags (Comma separated)</Label>
+                                <Input
+                                    id="tags"
+                                    value={tags}
+                                    onChange={(e) => setTags(e.target.value)}
+                                    placeholder="React, Design, Tech"
+                                />
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </form>
+    );
+}

components/auth/RoleGuard.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+import { RoleType } from "@/types/auth"
+
+interface RoleGuardProps {
+    children: React.ReactNode
+    allowedRoles: RoleType[]
+}
+
+export function RoleGuard({ children, allowedRoles }: RoleGuardProps) {
+    const { data: session, status } = useSession()
+    const router = useRouter()
+
+    useEffect(() => {
+        if (status === "loading") return
+
+        if (!session) {
+            router.push("/admin/login")
+            return
+        }
+
+        const userRole = (session.user as any).role as RoleType
+
+        if (!allowedRoles.includes(userRole)) {
+            router.push("/unauthorized")
+        }
+    }, [session, status, router, allowedRoles])
+
+    if (status === "loading") {
+        return <div>Loading...</div>
+    }
+
+    if (!session) {
+        return null
+    }
+
+    const userRole = (session.user as any).role as RoleType
+    if (!allowedRoles.includes(userRole)) {
+        return null
+    }
+
+    return <>{children}</>
+}

components/home/CTASection.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Sparkles, Zap, Rocket, MessageCircle } from "lucide-react"
+import { useRef, useState, useEffect } from "react"
+
+// Pre-computed particle data to avoid hydration mismatch
+const CTA_PARTICLES = [
+    // Left side particles
+    { left: 3.5, top: 15.2, delay: 2.1, duration: 19.4 },
+    { left: 8.7, top: 45.8, delay: 7.6, duration: 21.8 },
+    { left: 5.2, top: 78.3, delay: 11.2, duration: 18.2 },
+    { left: 12.4, top: 32.5, delay: 4.8, duration: 22.6 },
+    { left: 6.8, top: 62.9, delay: 9.3, duration: 17.5 },
+
+    // Right side particles
+    { left: 91.3, top: 18.6, delay: 5.4, duration: 20.3 },
+    { left: 86.5, top: 52.4, delay: 10.1, duration: 18.9 },
+    { left: 94.7, top: 85.2, delay: 3.7, duration: 22.1 },
+    { left: 88.2, top: 38.7, delay: 8.4, duration: 19.6 },
+    { left: 92.8, top: 68.4, delay: 12.9, duration: 21.2 },
+
+    // Top edge
+    { left: 25.4, top: 5.8, delay: 6.2, duration: 18.4 },
+    { left: 55.7, top: 3.2, delay: 1.5, duration: 22.8 },
+    { left: 72.1, top: 8.4, delay: 9.8, duration: 17.9 },
+
+    // Bottom edge
+    { left: 18.9, top: 92.6, delay: 4.3, duration: 20.7 },
+    { left: 48.3, top: 95.1, delay: 11.7, duration: 19.2 },
+    { left: 68.5, top: 89.3, delay: 7.1, duration: 21.5 },
+
+    // Corners
+    { left: 2.1, top: 2.4, delay: 13.5, duration: 18.6 },
+    { left: 97.8, top: 4.7, delay: 0.8, duration: 22.4 },
+    { left: 1.5, top: 96.2, delay: 5.6, duration: 19.8 },
+    { left: 98.4, top: 94.5, delay: 10.4, duration: 17.3 },
+]
+
+export function CTASection() {
+    const sectionRef = useRef<HTMLElement>(null)
+    const [isVisible, setIsVisible] = useState(false)
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.2 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (sectionRef.current) {
+                const rect = sectionRef.current.getBoundingClientRect()
+                setMousePosition({
+                    x: (e.clientX - rect.left) / rect.width,
+                    y: (e.clientY - rect.top) / rect.height,
+                })
+            }
+        }
+
+        window.addEventListener('mousemove', handleMouseMove)
+        return () => window.removeEventListener('mousemove', handleMouseMove)
+    }, [])
+
+    return (
+        <section ref={sectionRef} className="relative py-24 overflow-hidden bg-background" aria-label="Call to action">
+            {/* Dynamic gradient mesh */}
+            <div className="absolute inset-0 gradient-mesh opacity-30" />
+
+            {/* Animated orbs */}
+            <div
+                className="absolute w-[600px] h-[600px] rounded-full opacity-20 blur-3xl pointer-events-none transition-transform duration-1000"
+                style={{
+                    background: 'radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)',
+                    top: '-20%',
+                    right: '-10%',
+                    transform: `translate(${mousePosition.x * 50}px, ${mousePosition.y * 50}px)`,
+                }}
+            />
+            <div
+                className="absolute w-[500px] h-[500px] rounded-full opacity-15 blur-3xl pointer-events-none transition-transform duration-1000"
+                style={{
+                    background: 'radial-gradient(circle, hsl(280, 65%, 60%) 0%, transparent 70%)',
+                    bottom: '-20%',
+                    left: '-10%',
+                    transform: `translate(${-mousePosition.x * 30}px, ${-mousePosition.y * 30}px)`,
+                }}
+            />
+
+            {/* Animated particles */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                {CTA_PARTICLES.map((particle, i) => (
+                    <div
+                        key={i}
+                        className="particle"
+                        style={{
+                            left: `${particle.left}%`,
+                            top: `${particle.top}%`,
+                            animationDelay: `${particle.delay}s`,
+                            animationDuration: `${particle.duration}s`,
+                        }}
+                    />
+                ))}
+            </div>
+
+            {/* Grid pattern */}
+            <div className="absolute inset-0 opacity-5">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,hsl(var(--primary))_1px,transparent_1px)] bg-size-[48px_48px]" />
+            </div>
+
+            <div className="container relative z-10 flex flex-col items-center text-center">
+                <div
+                    className={`max-w-4xl transition-all duration-1000 ${
+                        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'
+                    }`}
+                >
+                    {/* Main CTA card with animated border */}
+                    <div className="relative">
+                        {/* Animated gradient border */}
+                        <div className="absolute -inset-1 rounded-[2rem] animated-border opacity-50" />
+
+                        <div className="relative glass-card rounded-[2rem] p-12 md:p-16 overflow-hidden">
+                            {/* Inner glow */}
+                            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10 opacity-50" />
+
+                            {/* Floating icons */}
+                            <div className="absolute top-8 left-8 animate-float opacity-20" style={{ animationDelay: '0s' }}>
+                                <Rocket className="w-8 h-8 text-primary" suppressHydrationWarning />
+                            </div>
+                            <div className="absolute top-12 right-12 animate-float opacity-20" style={{ animationDelay: '1s' }}>
+                                <Zap className="w-6 h-6 text-amber-500" suppressHydrationWarning />
+                            </div>
+                            <div className="absolute bottom-8 left-16 animate-float opacity-20" style={{ animationDelay: '2s' }}>
+                                <MessageCircle className="w-7 h-7 text-cyan-500" suppressHydrationWarning />
+                            </div>
+
+                            <div className="relative z-10">
+                                {/* Badge */}
+                                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8">
+                                    <Sparkles className="w-4 h-4 text-primary animate-pulse" suppressHydrationWarning />
+                                    <span className="text-sm font-medium">Let&apos;s Create Together</span>
+                                </div>
+
+                                <h2 className="text-4xl md:text-5xl lg:text-6xl mb-8 text-foreground font-bold tracking-tight">
+                                    Ready to Start Your{" "}
+                                    <span className="gradient-text relative">
+                                        Project
+                                        <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 200 12" fill="none">
+                                            <path d="M2 10C50 4 150 2 198 10" stroke="hsl(var(--primary))" strokeWidth="3" strokeLinecap="round" style={{
+                                                strokeDasharray: '200',
+                                                strokeDashoffset: isVisible ? '0' : '200',
+                                                transition: 'stroke-dashoffset 1s ease 0.5s'
+                                            }} />
+                                        </svg>
+                                    </span>
+                                    ?
+                                </h2>
+
+                                <p className="text-lg md:text-xl mb-12 max-w-2xl text-muted-foreground leading-relaxed mx-auto">
+                                    Let&apos;s build something{" "}
+                                    <span className="text-primary font-medium">amazing</span> together.
+                                    Contact us today for a free consultation and a detailed project quote.
+                                </p>
+
+                                <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                                    <Button
+                                        asChild
+                                        size="xl"
+                                        className="group h-14 px-10 text-lg rounded-2xl shine-effect relative overflow-hidden"
+                                    >
+                                        <Link href="/quote">
+                                            <span className="relative z-10 flex items-center">
+                                                Get a Free Quote
+                                                <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1 group-hover:scale-110" suppressHydrationWarning />
+                                            </span>
+                                        </Link>
+                                    </Button>
+                                    <Button
+                                        asChild
+                                        size="xl"
+                                        variant="outline"
+                                        className="group h-14 px-10 text-lg rounded-2xl glass-card hover:bg-primary/10"
+                                    >
+                                        <Link href="/contact">
+                                            <MessageCircle className="mr-2 h-5 w-5 group-hover:rotate-12 transition-transform" suppressHydrationWarning />
+                                            Contact Us
+                                        </Link>
+                                    </Button>
+                                </div>
+
+                                {/* Trust badges */}
+                                <div className="flex items-center justify-center gap-6 mt-10 text-sm text-muted-foreground">
+                                    <div className="flex items-center gap-2">
+                                        <Zap className="w-4 h-4 text-amber-500" suppressHydrationWarning />
+                                        <span>Fast Response</span>
+                                    </div>
+                                    <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
+                                    <div className="flex items-center gap-2">
+                                        <Rocket className="w-4 h-4 text-primary" suppressHydrationWarning />
+                                        <span>Free Consultation</span>
+                                    </div>
+                                    <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
+                                    <div className="flex items-center gap-2">
+                                        <Sparkles className="w-4 h-4 text-cyan-500" suppressHydrationWarning />
+                                        <span>Custom Solutions</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Shine effect */}
+                            <div className="absolute inset-0 shine-effect pointer-events-none" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

components/home/FeaturedPortfolio.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { ExternalLink, Eye, ArrowUpRight } from "lucide-react"
+import { useRef, useState, useEffect } from "react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+
+interface Project {
+    title: string
+    slug: string
+    category: string
+    tags: string[]
+    imageUrl: string
+    gradient: string
+    emoji: string
+}
+
+async function getFeaturedProjects(): Promise<Project[]> {
+    try {
+        const res = await fetch(`${API_URL}/portfolio`, { cache: 'no-store' })
+        if (!res.ok) return []
+        const data = await res.json()
+
+        return data.slice(0, 3).map((item: any) => ({
+            title: item.title,
+            slug: item.slug,
+            category: item.industry || "General",
+            tags: item.technologies ? item.technologies.split(',').map((t: string) => t.trim()) : [],
+            imageUrl: item.imageUrl,
+            gradient: "from-blue-600 to-cyan-500",
+            emoji: "✨",
+        }))
+    } catch (e) {
+        console.error("Failed to fetch featured projects", e)
+        return []
+    }
+}
+
+function PortfolioCard({ project, index }: { project: Project; index: number }) {
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [isVisible, setIsVisible] = useState(false)
+    const [isHovered, setIsHovered] = useState(false)
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.1 }
+        )
+
+        if (cardRef.current) {
+            observer.observe(cardRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    return (
+        <article
+            ref={cardRef}
+            className={`transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'}`}
+            style={{ transitionDelay: `${index * 150}ms` }}
+        >
+            <Link href={`/portfolio/${project.slug}`} className="block h-full">
+                <Card
+                    className="group relative h-full overflow-hidden glass-card cursor-pointer transition-all duration-500 rounded-3xl border-0"
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    {/* Animated background gradient */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+                    {/* Thumbnail with overlay effect */}
+                    <div className="relative aspect-16/10 overflow-hidden">
+                        {project.imageUrl ? (
+                            <img
+                                src={project.imageUrl.startsWith('http') || project.imageUrl.startsWith('/') ? project.imageUrl : `/${project.imageUrl}`}
+                                alt={project.title}
+                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                            />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/20 to-accent/20">
+                                <span className="text-6xl group-hover:scale-110 transition-transform duration-300" role="img" aria-label={project.title}>
+                                    {project.emoji || '🚀'}
+                                </span>
+                            </div>
+                        )}
+
+                        {/* Overlay gradient */}
+                        <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-500" />
+
+                        {/* Hover overlay with pattern */}
+                        <div className="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center">
+                            <div className="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center transform scale-0 group-hover:scale-100 transition-transform duration-500">
+                                <Eye className="w-5 h-5 text-white" suppressHydrationWarning />
+                            </div>
+                        </div>
+
+                        {/* Category badge */}
+                        <div className="absolute top-4 left-4">
+                            <span className="px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider glass-card">
+                                {project.category}
+                            </span>
+                        </div>
+                    </div>
+
+                    <CardHeader className="relative pb-3">
+                        <h3 className="text-xl font-bold leading-tight group-hover:text-primary transition-colors duration-300 flex items-center gap-2">
+                            {project.title}
+                            <ArrowUpRight className="w-4 h-4 opacity-0 -translate-x-2 -translate-y-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-300 text-primary" suppressHydrationWarning />
+                        </h3>
+                    </CardHeader>
+
+                    <CardContent>
+                        <div className="flex flex-wrap gap-2">
+                            {project.tags.slice(0, 4).map((tag, tagIndex) => (
+                                <span
+                                    key={tag}
+                                    className="px-3 py-1.5 rounded-full text-xs font-medium glass-card transition-all duration-300 hover:scale-105 hover:bg-primary/20"
+                                    style={{ transitionDelay: `${tagIndex * 50}ms` }}
+                                >
+                                    {tag}
+                                </span>
+                            ))}
+                            {project.tags.length > 4 && (
+                                <span className="px-3 py-1.5 rounded-full text-xs font-medium text-primary">
+                                    +{project.tags.length - 4} more
+                                </span>
+                            )}
+                        </div>
+                    </CardContent>
+
+                    {/* Bottom accent line */}
+                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
+
+                    {/* Shine effect */}
+                    <div className="absolute inset-0 shine-effect pointer-events-none rounded-3xl" />
+                </Card>
+            </Link>
+        </article>
+    )
+}
+
+export function FeaturedPortfolioWrapper() {
+    const [projects, setProjects] = useState<Project[]>([])
+    const [isVisible, setIsVisible] = useState(false)
+    const sectionRef = useRef<HTMLElement>(null)
+
+    useEffect(() => {
+        getFeaturedProjects().then(setProjects)
+    }, [])
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.1 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    return (
+        <section ref={sectionRef} className="py-24 bg-muted/20 relative overflow-hidden" id="portfolio">
+            {/* Background decorations */}
+            <div className="absolute top-1/2 left-0 w-72 h-72 bg-primary/10 rounded-full blur-3xl -translate-y-1/2" />
+            <div className="absolute top-1/4 right-0 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
+
+            {/* Animated grid pattern */}
+            <div className="absolute inset-0 opacity-5">
+                <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--primary))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--primary))_1px,transparent_1px)] bg-size-[48px_48px]" />
+            </div>
+
+            <div className="container relative z-10">
+                {/* Section header */}
+                <div className={`flex flex-col md:flex-row justify-between items-start md:items-end mb-14 gap-6 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                    <div className="max-w-2xl">
+                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-6">
+                            <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+                            <span className="text-sm font-medium text-primary">Portfolio</span>
+                        </div>
+
+                        <h2 className="text-4xl md:text-5xl mb-6 font-bold tracking-tight">
+                            Featured <span className="gradient-text">Work</span>
+                        </h2>
+
+                        <p className="text-lg text-muted-foreground leading-relaxed">
+                            Explore our latest projects and the impact we&apos;ve made for our clients.
+                        </p>
+                    </div>
+
+                    <Button asChild variant="outline" className="group glass-card hover:bg-primary/10 shrink-0">
+                        <Link href="/portfolio">
+                            View All Projects
+                            <ExternalLink className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" suppressHydrationWarning />
+                        </Link>
+                    </Button>
+                </div>
+
+                {/* Projects grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    {projects.map((project, i) => (
+                        <PortfolioCard key={project.slug} project={project} index={i} />
+                    ))}
+                </div>
+
+                {/* Empty state */}
+                {projects.length === 0 && (
+                    <div className="text-center py-16">
+                        <p className="text-muted-foreground">No projects to display yet.</p>
+                    </div>
+                )}
+
+                {/* Bottom stats */}
+                <div className={`mt-16 flex justify-center gap-8 md:gap-16 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                    {[
+                        { value: "50+", label: "Projects Completed" },
+                        { value: "30+", label: "Happy Clients" },
+                        { value: "5+", label: "Years Experience" },
+                    ].map((stat) => (
+                        <div key={stat.label} className="text-center group cursor-default">
+                            <div className="text-2xl md:text-3xl font-bold gradient-text group-hover:scale-110 transition-transform duration-300">
+                                {stat.value}
+                            </div>
+                            <div className="text-xs md:text-sm text-muted-foreground mt-1">
+                                {stat.label}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+// Export the wrapped component as the default
+export function FeaturedPortfolio() {
+    return <FeaturedPortfolioWrapper />
+}

components/home/HeroSection.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Sparkles, Code2, Rocket, Zap } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+
+// Pre-computed particle data to avoid hydration mismatch
+// These values are static and will be the same on server and client
+const PARTICLES = [
+    // Top-left quadrant
+    { left: 5.2, top: 8.7, delay: 2.4, duration: 18.6, width: 5.8, height: 5.2, opacity: 0.32 },
+    { left: 12.8, top: 15.3, delay: 7.1, duration: 21.2, width: 4.5, height: 6.8, opacity: 0.28 },
+    { left: 8.4, top: 28.9, delay: 11.5, duration: 19.8, width: 6.2, height: 4.9, opacity: 0.35 },
+    { left: 18.6, top: 6.2, delay: 4.8, duration: 22.4, width: 5.1, height: 5.7, opacity: 0.30 },
+    { left: 3.9, top: 42.5, delay: 9.3, duration: 17.5, width: 4.8, height: 6.3, opacity: 0.26 },
+    { left: 15.3, top: 35.8, delay: 14.7, duration: 20.1, width: 6.5, height: 5.4, opacity: 0.33 },
+
+    // Top-right quadrant
+    { left: 82.4, top: 5.8, delay: 5.2, duration: 19.4, width: 5.6, height: 6.1, opacity: 0.31 },
+    { left: 91.7, top: 18.4, delay: 10.8, duration: 22.8, width: 4.2, height: 5.5, opacity: 0.27 },
+    { left: 76.3, top: 12.6, delay: 3.1, duration: 18.2, width: 6.8, height: 4.6, opacity: 0.34 },
+    { left: 88.5, top: 32.9, delay: 8.9, duration: 21.6, width: 5.3, height: 6.7, opacity: 0.29 },
+    { left: 94.2, top: 8.3, delay: 13.4, duration: 17.9, width: 4.9, height: 5.8, opacity: 0.32 },
+
+    // Bottom-left quadrant
+    { left: 6.8, top: 72.4, delay: 6.5, duration: 20.3, width: 5.9, height: 5.1, opacity: 0.28 },
+    { left: 14.2, top: 85.6, delay: 12.1, duration: 18.7, width: 4.6, height: 6.4, opacity: 0.33 },
+    { left: 9.7, top: 58.3, delay: 1.8, duration: 22.1, width: 6.1, height: 4.8, opacity: 0.30 },
+    { left: 22.5, top: 91.8, delay: 9.6, duration: 19.5, width: 5.4, height: 5.9, opacity: 0.26 },
+
+    // Bottom-right quadrant
+    { left: 85.3, top: 78.2, delay: 4.3, duration: 21.8, width: 4.7, height: 6.2, opacity: 0.31 },
+    { left: 92.8, top: 65.4, delay: 11.2, duration: 18.4, width: 5.2, height: 5.6, opacity: 0.29 },
+    { left: 78.6, top: 88.9, delay: 7.8, duration: 20.7, width: 6.4, height: 4.5, opacity: 0.34 },
+    { left: 96.1, top: 82.5, delay: 2.9, duration: 22.6, width: 5.8, height: 6.1, opacity: 0.27 },
+
+    // Center spread (top area only to avoid stat cards)
+    { left: 35.4, top: 12.8, delay: 8.4, duration: 19.1, width: 5.5, height: 5.3, opacity: 0.30 },
+    { left: 48.7, top: 8.2, delay: 3.6, duration: 21.4, width: 4.4, height: 6.6, opacity: 0.28 },
+    { left: 62.3, top: 15.9, delay: 10.2, duration: 18.9, width: 6.3, height: 5.0, opacity: 0.32 },
+    { left: 55.8, top: 5.4, delay: 6.1, duration: 22.2, width: 5.1, height: 5.8, opacity: 0.29 },
+    { left: 41.2, top: 22.6, delay: 12.8, duration: 17.8, width: 5.7, height: 4.7, opacity: 0.31 },
+    { left: 68.9, top: 10.3, delay: 5.4, duration: 20.5, width: 4.9, height: 6.0, opacity: 0.33 },
+    { left: 29.6, top: 3.8, delay: 9.7, duration: 21.9, width: 6.0, height: 5.2, opacity: 0.27 },
+    { left: 72.4, top: 18.5, delay: 2.2, duration: 19.3, width: 5.3, height: 5.5, opacity: 0.30 },
+    { left: 45.1, top: 25.7, delay: 7.5, duration: 18.1, width: 4.6, height: 6.3, opacity: 0.28 },
+    { left: 58.6, top: 2.9, delay: 11.8, duration: 22.7, width: 6.2, height: 4.8, opacity: 0.32 },
+]
+
+export function HeroSection() {
+    const heroRef = useRef<HTMLDivElement>(null)
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (heroRef.current) {
+                const rect = heroRef.current.getBoundingClientRect()
+                setMousePosition({
+                    x: (e.clientX - rect.left) / rect.width,
+                    y: (e.clientY - rect.top) / rect.height,
+                })
+            }
+        }
+
+        window.addEventListener('mousemove', handleMouseMove)
+        return () => window.removeEventListener('mousemove', handleMouseMove)
+    }, [])
+
+    return (
+        <section ref={heroRef} className="relative overflow-hidden pt-20 pb-32 md:pt-28 lg:pt-36 xl:pt-44 bg-background min-h-screen flex items-center">
+            {/* Animated gradient mesh background */}
+            <div className="absolute inset-0 gradient-mesh opacity-40" />
+
+            {/* Noise overlay for depth */}
+            <div className="absolute inset-0 noise-overlay" />
+
+            {/* Morphing blob 1 */}
+            <div
+                className="absolute w-[500px] h-[500px] morphing-blob opacity-30 blur-3xl pointer-events-none"
+                style={{
+                    background: `linear-gradient(135deg, hsl(var(--primary)), hsl(280, 65%, 60%))`,
+                    top: '10%',
+                    right: '5%',
+                    transform: `translate(${mousePosition.x * 30}px, ${mousePosition.y * 30}px)`,
+                    transition: 'transform 0.3s ease-out',
+                }}
+            />
+
+            {/* Morphing blob 2 */}
+            <div
+                className="absolute w-[400px] h-[400px] morphing-blob opacity-20 blur-3xl pointer-events-none"
+                style={{
+                    background: `linear-gradient(135deg, hsl(280, 65%, 60%), hsl(199, 89%, 48%))`,
+                    bottom: '10%',
+                    left: '5%',
+                    transform: `translate(${-mousePosition.x * 20}px, ${-mousePosition.y * 20}px)`,
+                    transition: 'transform 0.3s ease-out',
+                    animationDelay: '-5s',
+                }}
+            />
+
+            {/* Floating particles - behind all content */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden -z-10">
+                {PARTICLES.map((particle, i) => (
+                    <div
+                        key={i}
+                        className="particle"
+                        style={{
+                            left: `${particle.left}%`,
+                            top: `${particle.top}%`,
+                            animationDelay: `${particle.delay}s`,
+                            animationDuration: `${particle.duration}s`,
+                            width: `${particle.width}px`,
+                            height: `${particle.height}px`,
+                            opacity: particle.opacity,
+                        }}
+                    />
+                ))}
+            </div>
+
+            {/* Aurora effect */}
+            <div className="absolute inset-0 aurora-bg opacity-30" />
+
+            {/* Subtle grid pattern */}
+            <div className="absolute inset-0 -z-10 opacity-10">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,hsl(var(--muted))_1px,transparent_1px)] bg-size-[32px_32px]" />
+            </div>
+
+            <div className="container relative z-10 flex flex-col items-center text-center">
+                {/* Animated badge */}
+                <div className="animate-fade-in-up mb-8 inline-flex items-center gap-2 rounded-full glass-card px-6 py-3 text-sm font-medium transition-all duration-500 hover:scale-105 hover:shadow-lg group cursor-default">
+                    <span className="relative flex h-2 w-2">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+                        <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+                    </span>
+                    <Sparkles className="h-4 w-4 text-primary animate-pulse" suppressHydrationWarning />
+                    <span className="interactive-underline cursor-pointer">Your Vision, Our Craft</span>
+                </div>
+
+                {/* H1 with creative styling */}
+                <h1 className="animate-fade-in-up animate-delay-1 mb-8 text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-tight leading-tight">
+                    <span className="block">We Design &amp; Build</span>
+                    <span className="relative inline-block mt-2">
+                        <span className="gradient-text">Digital Products</span>
+                        <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none">
+                            <path d="M2 10C50 4 150 2 298 10" stroke="hsl(var(--primary))" strokeWidth="3" strokeLinecap="round" className="animate-dash" style={{
+                                strokeDasharray: '300',
+                                strokeDashoffset: '300',
+                                animation: 'dash 2s ease forwards 0.5s'
+                            }} />
+                        </svg>
+                    </span>
+                    <span className="block mt-2 wave-text">
+                        <span>T</span><span>h</span><span>a</span><span>t</span>
+                        <span className="mx-2"> </span>
+                        <span className="text-primary neon-glow">GROW</span>
+                    </span>
+                </h1>
+
+                {/* Subheadline */}
+                <p className="animate-fade-in-up animate-delay-2 mb-12 max-w-2xl text-lg sm:text-xl text-muted-foreground leading-relaxed">
+                    From stunning websites to powerful mobile apps — we turn ambitious ideas
+                    into high-performance digital experiences that your users will{" "}
+                    <span className="text-primary font-medium">love</span>.
+                </p>
+
+                {/* Enhanced CTAs */}
+                <div className="animate-fade-in-up animate-delay-3 flex flex-col gap-4 sm:flex-row">
+                    <Button asChild size="xl" className="group relative overflow-hidden shine-effect ripple-button">
+                        <Link href="/quote">
+                            <span className="relative z-10 flex items-center">
+                                Get Started
+                                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" suppressHydrationWarning />
+                            </span>
+                        </Link>
+                    </Button>
+                    <Button asChild variant="outline" size="xl" className="group glass-card hover:bg-primary/10">
+                        <Link href="/portfolio">
+                            <span className="flex items-center">
+                                View Portfolio
+                                <Rocket className="ml-2 h-4 w-4 transition-transform group-hover:rotate-12" suppressHydrationWarning />
+                            </span>
+                        </Link>
+                    </Button>
+                </div>
+
+                {/* Floating tech icons */}
+                <div className="absolute top-1/4 left-10 hidden xl:block animate-float" style={{ animationDelay: '0s' }}>
+                    <div className="glass-card p-3 rounded-xl">
+                        <Code2 className="h-6 w-6 text-primary" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div className="absolute top-1/3 right-10 hidden xl:block animate-float" style={{ animationDelay: '1s' }}>
+                    <div className="glass-card p-3 rounded-xl">
+                        <Zap className="h-6 w-6 text-amber-500" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div className="absolute bottom-1/3 left-20 hidden xl:block animate-float" style={{ animationDelay: '2s' }}>
+                    <div className="glass-card p-3 rounded-xl">
+                        <Rocket className="h-6 w-6 text-cyan-500" suppressHydrationWarning />
+                    </div>
+                </div>
+
+                {/* Key Statistics with enhanced styling */}
+                <div className="animate-fade-in-up animate-delay-5 mt-24 relative">
+                    {/* Background overlay to hide particles behind cards */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-background via-background/95 to-background/80 -z-10 rounded-3xl" />
+
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 md:gap-8 w-full max-w-4xl">
+                    {[
+                        { value: "50+", label: "Projects Shipped", icon: Rocket },
+                        { value: "98%", label: "Client Satisfaction", icon: Sparkles },
+                        { value: "5+", label: "Years of Expertise", icon: Zap },
+                    ].map((stat, i) => (
+                        <div
+                            key={stat.label}
+                            className="group relative text-center cursor-default"
+                        >
+                            {/* Animated border */}
+                            <div className="absolute inset-0 rounded-3xl animated-border opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+                            <div className="relative glass-card rounded-3xl p-8 transition-all duration-500 hover:scale-105 hover:-translate-y-2">
+                                {/* Icon */}
+                                <stat.icon className="h-6 w-6 text-primary mx-auto mb-3 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" suppressHydrationWarning />
+
+                                {/* Value with counter animation */}
+                                <div className="text-4xl md:text-5xl font-bold gradient-text mb-2 transition-all duration-300 group-hover:scale-110 counter-animate">
+                                    {stat.value}
+                                </div>
+
+                                {/* Label */}
+                                <p className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
+                                    {stat.label}
+                                </p>
+
+                                {/* Shine effect on hover */}
+                                <div className="absolute inset-0 rounded-3xl shine-effect pointer-events-none" />
+                            </div>
+                        </div>
+                    ))}
+                    </div>
+                </div>
+
+                {/* Scroll indicator */}
+                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-fade-in animate-delay-7">
+                    <div className="scroll-indicator cursor-pointer hover:scale-110 transition-transform" onClick={() => {
+                        window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
+                    }} />
+                </div>
+            </div>
+
+            {/* CSS for dash animation */}
+            <style jsx>{`
+                @keyframes dash {
+                    to {
+                        stroke-dashoffset: 0;
+                    }
+                }
+            `}</style>
+        </section>
+    )
+}

components/home/ServicesOverview.tsx

@@ -0,0 +1,256 @@
+"use client"
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Code, Palette, Smartphone, LineChart, ArrowUpRight, Sparkles } from "lucide-react"
+import Link from "next/link"
+import { useRef, useState, useEffect } from "react"
+
+const services = [
+    {
+        title: "Web Development",
+        description: "Custom websites and web applications built with modern technologies like Next.js, React, and Node.js.",
+        icon: Code,
+        gradient: "from-blue-500 via-cyan-400 to-teal-400",
+        accentColor: "hsl(199, 89%, 48%)",
+        features: ["Next.js", "React", "Node.js"],
+    },
+    {
+        title: "Mobile App Development",
+        description: "Native and cross-platform mobile apps for iOS and Android using React Native and Flutter.",
+        icon: Smartphone,
+        gradient: "from-violet-500 via-purple-400 to-fuchsia-400",
+        accentColor: "hsl(280, 65%, 60%)",
+        features: ["React Native", "Flutter", "iOS & Android"],
+    },
+    {
+        title: "UI/UX Design",
+        description: "User-centric design solutions that enhance engagement, usability, and brand identity.",
+        icon: Palette,
+        gradient: "from-pink-500 via-rose-400 to-orange-400",
+        accentColor: "hsl(340, 75%, 55%)",
+        features: ["Figma", "Prototyping", "Design Systems"],
+    },
+    {
+        title: "SEO Optimization",
+        description: "Data-driven strategies to improve your search engine rankings, visibility, and organic traffic.",
+        icon: LineChart,
+        gradient: "from-amber-500 via-orange-400 to-red-400",
+        accentColor: "hsl(30, 80%, 55%)",
+        features: ["Analytics", "Keyword Research", "Technical SEO"],
+    },
+]
+
+function ServiceCard({ service, index }: { service: typeof services[0]; index: number }) {
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [rotateX, setRotateX] = useState(0)
+    const [rotateY, setRotateY] = useState(0)
+    const [isHovered, setIsHovered] = useState(false)
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!cardRef.current) return
+        const rect = cardRef.current.getBoundingClientRect()
+        const centerX = rect.left + rect.width / 2
+        const centerY = rect.top + rect.height / 2
+        const mouseX = e.clientX - centerX
+        const mouseY = e.clientY - centerY
+
+        setRotateX(-mouseY / 10)
+        setRotateY(mouseX / 10)
+    }
+
+    const handleMouseLeave = () => {
+        setRotateX(0)
+        setRotateY(0)
+        setIsHovered(false)
+    }
+
+    return (
+        <div
+            ref={cardRef}
+            className="group relative h-full"
+            style={{
+                perspective: '1000px',
+                animationDelay: `${index * 0.1}s`,
+            }}
+        >
+            <Link href="/services" aria-label={`Learn more about ${service.title}`} className="block h-full">
+                <div
+                    className="relative h-full cursor-pointer transition-all duration-300"
+                    style={{
+                        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
+                        transformStyle: 'preserve-3d',
+                    }}
+                    onMouseMove={handleMouseMove}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={handleMouseLeave}
+                >
+                    {/* Glow effect */}
+                    <div
+                        className="absolute -inset-1 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"
+                        style={{
+                            background: `linear-gradient(135deg, ${service.accentColor}, transparent)`,
+                        }}
+                    />
+
+                    {/* Card */}
+                    <Card className="relative h-full overflow-hidden glass-card rounded-3xl border-0 transition-all duration-300 group-hover:shadow-2xl">
+                        {/* Animated gradient border */}
+                        <div
+                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                            style={{
+                                background: `linear-gradient(135deg, ${service.accentColor}20, transparent, ${service.accentColor}20)`,
+                            }}
+                        />
+
+                        {/* Spotlight effect */}
+                        <div
+                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
+                            style={{
+                                background: `radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), ${service.accentColor}15, transparent 40%)`,
+                            }}
+                        />
+
+                        <CardHeader className="relative z-10 pb-4">
+                            {/* Icon container */}
+                            <div
+                                className={`relative w-16 h-16 rounded-2xl flex items-center justify-center mb-5 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3`}
+                                style={{
+                                    background: `linear-gradient(135deg, ${service.accentColor}20, ${service.accentColor}10)`,
+                                    boxShadow: isHovered ? `0 10px 40px ${service.accentColor}30` : 'none',
+                                }}
+                            >
+                                <service.icon
+                                    className="w-8 h-8 transition-all duration-300"
+                                    style={{ color: service.accentColor }}
+                                    suppressHydrationWarning
+                                />
+
+                                {/* Sparkle effect on hover */}
+                                <Sparkles
+                                    className="absolute -top-1 -right-1 w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:scale-110"
+                                    suppressHydrationWarning
+                                />
+                            </div>
+
+                            {/* Title with arrow */}
+                            <h3 className="text-xl font-bold leading-tight flex items-center gap-2 group-hover:text-primary transition-colors duration-300">
+                                {service.title}
+                                <ArrowUpRight
+                                    className="h-4 w-4 opacity-0 -translate-x-2 -translate-y-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-300 text-primary"
+                                    suppressHydrationWarning
+                                />
+                            </h3>
+                        </CardHeader>
+
+                        <CardContent className="relative z-10">
+                            <p className="text-base text-muted-foreground group-hover:text-foreground transition-colors duration-300 leading-relaxed mb-4">
+                                {service.description}
+                            </p>
+
+                            {/* Feature tags */}
+                            <div className="flex flex-wrap gap-2">
+                                {service.features.map((feature) => (
+                                    <span
+                                        key={feature}
+                                        className="px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 group-hover:scale-105"
+                                        style={{
+                                            background: `${service.accentColor}15`,
+                                            color: service.accentColor,
+                                        }}
+                                    >
+                                        {feature}
+                                    </span>
+                                ))}
+                            </div>
+                        </CardContent>
+
+                        {/* Bottom gradient line */}
+                        <div
+                            className="absolute bottom-0 left-0 right-0 h-1 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                            style={{
+                                background: `linear-gradient(90deg, transparent, ${service.accentColor}, transparent)`,
+                            }}
+                        />
+
+                        {/* Shine effect */}
+                        <div className="absolute inset-0 shine-effect pointer-events-none rounded-3xl" />
+                    </Card>
+                </div>
+            </Link>
+        </div>
+    )
+}
+
+export function ServicesOverview() {
+    const [isVisible, setIsVisible] = useState(false)
+    const sectionRef = useRef<HTMLElement>(null)
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.1 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    return (
+        <section ref={sectionRef} className="py-24 bg-background relative overflow-hidden" id="services">
+            {/* Background elements */}
+            <div className="absolute inset-0 gradient-mesh opacity-20" />
+            <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
+            <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
+
+            <div className="container relative z-10">
+                {/* Section header with reveal animation */}
+                <div className={`text-center mb-16 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-6">
+                        <Sparkles className="h-4 w-4 text-primary animate-pulse" suppressHydrationWarning />
+                        <span className="text-sm font-medium text-primary">What We Do</span>
+                    </div>
+
+                    <h2 className="text-4xl md:text-5xl mb-6 font-bold tracking-tight">
+                        Our <span className="gradient-text">Expertise</span>
+                    </h2>
+
+                    <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+                        We offer a comprehensive range of digital services to help your business{" "}
+                        <span className="text-primary font-medium">grow</span> and{" "}
+                        <span className="text-primary font-medium">succeed</span>.
+                    </p>
+                </div>
+
+                {/* Services grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {services.map((service, i) => (
+                        <div
+                            key={service.title}
+                            className={`transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
+                            style={{ transitionDelay: `${i * 100}ms` }}
+                        >
+                            <ServiceCard service={service} index={i} />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Bottom CTA */}
+                <div className={`text-center mt-12 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                    <p className="text-muted-foreground">
+                        Need something custom?{" "}
+                        <Link href="/contact" className="text-primary hover:underline underline-offset-4 font-medium interactive-underline">
+                            Let&apos;s discuss your project
+                        </Link>
+                    </p>
+                </div>
+            </div>
+        </section>
+    )
+}

components/home/TestimonialsCarousel.tsx

@@ -0,0 +1,328 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Star, Quote, ChevronLeft, ChevronRight } from "lucide-react"
+import { useRef, useState, useEffect, useCallback } from "react"
+
+type Testimonial = {
+    id: string
+    clientName: string
+    company: string | null
+    content: string
+    rating: number
+    imageUrl: string | null
+}
+
+/* Static fallback used when the API is unreachable (build-time, etc.) */
+const fallbackTestimonials: Testimonial[] = [
+    {
+        id: "fallback-1",
+        clientName: "Sarah Johnson",
+        company: "TechFlow",
+        content:
+            "NexaFlow transformed our online presence. Their attention to detail and technical expertise is unmatched. They delivered exactly what we needed.",
+        rating: 5,
+        imageUrl: null,
+    },
+    {
+        id: "fallback-2",
+        clientName: "Michael Chen",
+        company: "StartupX",
+        content:
+            "The team delivered our MVP ahead of schedule and it looks fantastic. They truly understood our vision and brought it to life.",
+        rating: 5,
+        imageUrl: null,
+    },
+    {
+        id: "fallback-3",
+        clientName: "Emily Davis",
+        company: "Creative Studio",
+        content:
+            "Professional, responsive, and incredibly talented. They truly understand modern web design and the latest technologies.",
+        rating: 5,
+        imageUrl: null,
+    },
+    {
+        id: "fallback-4",
+        clientName: "David Wilson",
+        company: "InnovateCo",
+        content:
+            "Working with NexaFlow was a game-changer for our business. The website they built exceeded our expectations in every way.",
+        rating: 5,
+        imageUrl: null,
+    },
+    {
+        id: "fallback-5",
+        clientName: "Lisa Anderson",
+        company: "GrowthHub",
+        content:
+            "From concept to launch, the process was smooth and professional. Our new app has received amazing feedback from users.",
+        rating: 5,
+        imageUrl: null,
+    },
+]
+
+function getInitials(name: string): string {
+    return name
+        .split(" ")
+        .map((w) => w[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2)
+}
+
+function TestimonialCard({ testimonial, isActive }: { testimonial: Testimonial; isActive: boolean }) {
+    return (
+        <Card
+            className={`relative h-full glass-card border-0 transition-all duration-500 rounded-3xl overflow-hidden ${
+                isActive ? "scale-100 opacity-100" : "scale-95 opacity-70"
+            }`}
+        >
+            {/* Animated gradient background */}
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+            {/* Quote decoration */}
+            <div className="absolute top-6 right-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300" aria-hidden="true">
+                <Quote className="h-10 w-10 text-primary/20" suppressHydrationWarning />
+            </div>
+
+            <CardHeader className="pb-2 relative z-10">
+                <div className="flex gap-0.5 mb-4" role="img" aria-label={`${testimonial.rating} out of 5 stars`}>
+                    {[...Array(testimonial.rating)].map((_, j) => (
+                        <Star
+                            key={j}
+                            className="w-5 h-5 fill-amber-400 text-amber-400 group-hover:scale-110 transition-all duration-300"
+                            style={{ transitionDelay: `${j * 50}ms` }}
+                            suppressHydrationWarning
+                        />
+                    ))}
+                </div>
+            </CardHeader>
+
+            <CardContent className="relative z-10">
+                <blockquote className="text-base text-foreground leading-relaxed">
+                    &ldquo;{testimonial.content}&rdquo;
+                </blockquote>
+            </CardContent>
+
+            <CardFooter className="flex items-center gap-4 mt-auto pt-4 relative z-10">
+                <Avatar className="h-12 w-12 glass-card group-hover:scale-110 transition-all duration-300 ring-2 ring-primary/20">
+                    <AvatarFallback className="bg-gradient-to-br from-primary/20 to-accent/20 text-primary text-sm font-semibold">
+                        {getInitials(testimonial.clientName)}
+                    </AvatarFallback>
+                </Avatar>
+                <div>
+                    <p className="font-semibold text-sm group-hover:text-primary transition-colors duration-300">
+                        {testimonial.clientName}
+                    </p>
+                    {testimonial.company && (
+                        <p className="text-xs text-muted-foreground">{testimonial.company}</p>
+                    )}
+                </div>
+            </CardFooter>
+
+            {/* Bottom accent line */}
+            <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
+
+            {/* Shine effect */}
+            <div className="absolute inset-0 shine-effect pointer-events-none rounded-3xl" />
+        </Card>
+    )
+}
+
+export function TestimonialsCarousel() {
+    const [testimonials, setTestimonials] = useState<Testimonial[]>(fallbackTestimonials)
+    const [currentIndex, setCurrentIndex] = useState(0)
+    const [isVisible, setIsVisible] = useState(false)
+    const [isPaused, setIsPaused] = useState(false)
+    const sectionRef = useRef<HTMLElement>(null)
+
+    // Fetch testimonials
+    useEffect(() => {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"
+        fetch(`${apiUrl}/testimonials`)
+            .then((res) => res.json())
+            .then((data: Testimonial[]) => {
+                if (data.length > 0) setTestimonials(data)
+            })
+            .catch(() => {
+                // Use fallback testimonials
+            })
+    }, [])
+
+    // Intersection observer for reveal animation
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.1 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    // Auto-scroll carousel
+    useEffect(() => {
+        if (isPaused || testimonials.length <= 3) return
+
+        const interval = setInterval(() => {
+            setCurrentIndex((prev) => (prev + 1) % testimonials.length)
+        }, 5000)
+
+        return () => clearInterval(interval)
+    }, [isPaused, testimonials.length])
+
+    const goToPrevious = useCallback(() => {
+        setCurrentIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length)
+    }, [testimonials.length])
+
+    const goToNext = useCallback(() => {
+        setCurrentIndex((prev) => (prev + 1) % testimonials.length)
+    }, [testimonials.length])
+
+    const goToSlide = useCallback((index: number) => {
+        setCurrentIndex(index)
+    }, [])
+
+    // Get visible testimonials for carousel
+    const getVisibleTestimonials = () => {
+        const visible = []
+        for (let i = 0; i < 3; i++) {
+            const index = (currentIndex + i) % testimonials.length
+            visible.push({ testimonial: testimonials[index], position: i })
+        }
+        return visible
+    }
+
+    return (
+        <section
+            ref={sectionRef}
+            className="py-24 bg-background relative overflow-hidden"
+            id="testimonials"
+            aria-label="Client testimonials"
+            onMouseEnter={() => setIsPaused(true)}
+            onMouseLeave={() => setIsPaused(false)}
+        >
+            {/* Background decorations */}
+            <div className="absolute inset-0 gradient-mesh opacity-20" />
+            <div className="absolute top-1/4 right-0 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
+            <div className="absolute bottom-1/4 left-0 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
+
+            {/* Floating quote icons */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-5">
+                {[...Array(6)].map((_, i) => (
+                    <Quote
+                        key={i}
+                        className="absolute w-16 h-16 text-primary animate-float"
+                        style={{
+                            top: `${20 + i * 15}%`,
+                            left: `${10 + i * 15}%`,
+                            animationDelay: `${i * 0.5}s`,
+                        }}
+                        suppressHydrationWarning
+                    />
+                ))}
+            </div>
+
+            <div className="container relative z-10">
+                {/* Section header */}
+                <div
+                    className={`text-center mb-14 transition-all duration-1000 ${
+                        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+                    }`}
+                >
+                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-6">
+                        <Star className="w-4 h-4 text-amber-400 fill-amber-400" suppressHydrationWarning />
+                        <span className="text-sm font-medium text-primary">Testimonials</span>
+                    </div>
+
+                    <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
+                        What Our <span className="gradient-text">Clients</span> Say
+                    </h2>
+
+                    <p className="text-lg text-muted-foreground max-w-2xl mx-auto mt-4">
+                        Don&apos;t just take our word for it — hear from the businesses we&apos;ve helped succeed.
+                    </p>
+                </div>
+
+                {/* Carousel */}
+                <div
+                    className={`relative transition-all duration-1000 delay-200 ${
+                        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+                    }`}
+                >
+                    {/* Navigation buttons */}
+                    <button
+                        onClick={goToPrevious}
+                        className="absolute left-0 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full glass-card flex items-center justify-center hover:bg-primary/20 transition-all duration-300 hover:scale-110 group"
+                        aria-label="Previous testimonial"
+                    >
+                        <ChevronLeft className="w-6 h-6 text-primary group-hover:-translate-x-0.5 transition-transform" suppressHydrationWarning />
+                    </button>
+
+                    <button
+                        onClick={goToNext}
+                        className="absolute right-0 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full glass-card flex items-center justify-center hover:bg-primary/20 transition-all duration-300 hover:scale-110 group"
+                        aria-label="Next testimonial"
+                    >
+                        <ChevronRight className="w-6 h-6 text-primary group-hover:translate-x-0.5 transition-transform" suppressHydrationWarning />
+                    </button>
+
+                    {/* Cards container */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-8 md:px-16">
+                        {getVisibleTestimonials().map(({ testimonial, position }) => (
+                            <div
+                                key={`${testimonial.id}-${currentIndex}-${position}`}
+                                className="group"
+                                style={{
+                                    animationDelay: `${position * 100}ms`,
+                                }}
+                            >
+                                <TestimonialCard testimonial={testimonial} isActive={position === 1} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Dots navigation */}
+                <div
+                    className={`flex justify-center gap-2 mt-8 transition-all duration-1000 delay-300 ${
+                        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+                    }`}
+                >
+                    {testimonials.slice(0, 6).map((_, index) => (
+                        <button
+                            key={index}
+                            onClick={() => goToSlide(index)}
+                            className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                                index === currentIndex
+                                    ? "w-8 bg-primary"
+                                    : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+                            }`}
+                            aria-label={`Go to testimonial ${index + 1}`}
+                        />
+                    ))}
+                </div>
+
+                {/* Trust indicator */}
+                <div
+                    className={`text-center mt-8 transition-all duration-1000 delay-400 ${
+                        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+                    }`}
+                >
+                    <p className="text-sm text-muted-foreground">
+                        Trusted by <span className="text-primary font-semibold">50+</span> satisfied clients
+                    </p>
+                </div>
+            </div>
+        </section>
+    )
+}

components/home/TrustIndicators.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { Building2, Sparkles, Star, TrendingUp, Users, Award } from "lucide-react"
+import { useRef, useState, useEffect } from "react"
+
+const companies = [
+    { name: "Acme Corp", icon: Building2 },
+    { name: "Global Tech", icon: TrendingUp },
+    { name: "Nebula Inc", icon: Sparkles },
+    { name: "CodeFlow", icon: Award },
+    { name: "FutureSoft", icon: Users },
+]
+
+const stats = [
+    { value: "50+", label: "Projects Delivered", icon: Star },
+    { value: "98%", label: "Client Satisfaction", icon: TrendingUp },
+    { value: "30+", label: "Happy Clients", icon: Users },
+]
+
+export function TrustIndicators() {
+    const sectionRef = useRef<HTMLElement>(null)
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.2 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    return (
+        <section ref={sectionRef} className="py-14 bg-background relative overflow-hidden" aria-label="Trusted by">
+            {/* Background elements */}
+            <div className="absolute inset-0 gradient-mesh opacity-10" />
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[200px] bg-primary/5 rounded-full blur-3xl" />
+
+            <div className="container relative z-10">
+                {/* Header */}
+                <div
+                    className={`text-center mb-12 transition-all duration-700 ${
+                        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+                    }`}
+                >
+                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card">
+                        <Sparkles className="w-4 h-4 text-primary animate-pulse" suppressHydrationWarning />
+                        <span className="text-sm font-medium text-muted-foreground">Trusted by innovative companies</span>
+                    </div>
+                </div>
+
+                {/* Animated company logos - Infinite scroll effect */}
+                <div className="relative overflow-hidden mb-12">
+                    {/* Gradient masks */}
+                    <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none" />
+                    <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none" />
+
+                    {/* Scrolling container */}
+                    <div className="flex gap-8 animate-scroll">
+                        {[...companies, ...companies].map((company, i) => (
+                            <div
+                                key={`${company.name}-${i}`}
+                                className="group flex items-center gap-3 text-muted-foreground hover:text-primary transition-all duration-300 cursor-default glass-card px-6 py-3 rounded-2xl shrink-0 hover:scale-105 hover:shadow-lg"
+                            >
+                                <company.icon
+                                    className="h-5 w-5 group-hover:scale-110 group-hover:rotate-12 transition-transform duration-300"
+                                    suppressHydrationWarning
+                                />
+                                <span className="text-lg font-bold tracking-tight">{company.name}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Stats row */}
+                <div
+                    className={`flex flex-wrap items-center justify-center gap-8 md:gap-16 transition-all duration-700 delay-200 ${
+                        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+                    }`}
+                >
+                    {stats.map((stat, i) => (
+                        <div
+                            key={stat.label}
+                            className="group text-center cursor-default"
+                            style={{ transitionDelay: `${i * 100}ms` }}
+                        >
+                            <div className="flex items-center gap-2 mb-1">
+                                <stat.icon className="w-4 h-4 text-primary opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" suppressHydrationWarning />
+                                <span className="text-2xl md:text-3xl font-bold gradient-text group-hover:scale-105 transition-transform duration-300 inline-block">
+                                    {stat.value}
+                                </span>
+                            </div>
+                            <span className="text-xs md:text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                                {stat.label}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* CSS for scroll animation */}
+            <style jsx>{`
+                @keyframes scroll {
+                    0% {
+                        transform: translateX(0);
+                    }
+                    100% {
+                        transform: translateX(-50%);
+                    }
+                }
+                .animate-scroll {
+                    animation: scroll 30s linear infinite;
+                }
+                .animate-scroll:hover {
+                    animation-play-state: paused;
+                }
+            `}</style>
+        </section>
+    )
+}

components/layout/Footer.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Github, Linkedin, Mail, ArrowRight, Sparkles, Heart } from "lucide-react"
+import { useRef, useState, useEffect } from "react"
+
+const footerLinks = [
+    {
+        title: "Services",
+        links: [
+            { name: "Web Development", href: "/services" },
+            { name: "App Development", href: "/services" },
+            { name: "UI/UX Design", href: "/services" },
+            { name: "SEO Optimization", href: "/services" },
+        ],
+    },
+    {
+        title: "Company",
+        links: [
+            { name: "About Us", href: "/about" },
+            { name: "Portfolio", href: "/portfolio" },
+            { name: "Blog", href: "/blog" },
+            { name: "Contact", href: "/contact" },
+        ],
+    },
+    {
+        title: "Legal",
+        links: [
+            { name: "Privacy Policy", href: "/privacy" },
+            { name: "Terms of Service", href: "/terms" },
+            { name: "Cookie Policy", href: "/cookies" },
+        ],
+    },
+]
+
+const socialLinks = [
+    { icon: Github, href: "#", label: "GitHub", color: "hover:text-white" },
+    { icon: Linkedin, href: "#", label: "LinkedIn", color: "hover:text-blue-400" },
+    { icon: Mail, href: "mailto:hello@nexaflow.dev", label: "Email", color: "hover:text-primary" },
+]
+
+export function Footer() {
+    const [email, setEmail] = useState("")
+    const [isSubscribed, setIsSubscribed] = useState(false)
+    const sectionRef = useRef<HTMLElement>(null)
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true)
+                }
+            },
+            { threshold: 0.1 }
+        )
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current)
+        }
+
+        return () => observer.disconnect()
+    }, [])
+
+    const handleSubscribe = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (email) {
+            setIsSubscribed(true)
+            setEmail("")
+            setTimeout(() => setIsSubscribed(false), 3000)
+        }
+    }
+
+    return (
+        <footer ref={sectionRef} className="w-full bg-muted/20 relative overflow-hidden">
+            {/* Background decorations */}
+            <div className="absolute inset-0 gradient-mesh opacity-10" />
+            <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '0s' }} />
+            <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '5s' }} />
+
+            {/* Animated grid */}
+            <div className="absolute inset-0 opacity-5">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,hsl(var(--primary))_1px,transparent_1px)] bg-size-[32px_32px]" />
+            </div>
+
+            <div className={`container py-14 md:py-16 lg:py-20 relative z-10 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-5">
+                    {/* Brand column */}
+                    <div className="flex flex-col gap-4 lg:col-span-2 lg:pr-8">
+                        <Link href="/" className="text-xl font-bold tracking-tight group inline-flex items-center gap-2">
+                            <span className="group-hover:scale-105 transition-transform inline-block">
+                                Nexa<span className="gradient-text">Flow</span>
+                            </span>
+                            <Sparkles className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 group-hover:rotate-12 transition-all duration-300" suppressHydrationWarning />
+                        </Link>
+                        <p className="text-sm text-muted-foreground leading-relaxed max-w-xs">
+                            Building digital experiences that matter. We partner with forward-thinking companies to create impactful digital products.
+                        </p>
+
+                        {/* Social icons */}
+                        <div className="flex gap-3 mt-2">
+                            {socialLinks.map((social) => (
+                                <Link
+                                    key={social.label}
+                                    href={social.href}
+                                    className={`flex h-10 w-10 items-center justify-center rounded-xl glass-card text-muted-foreground hover:scale-110 transition-all duration-300 group ${social.color}`}
+                                    aria-label={social.label}
+                                >
+                                    <social.icon className="h-4 w-4 transition-transform duration-300 group-hover:scale-110" suppressHydrationWarning />
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Link columns */}
+                    {footerLinks.map((section, i) => (
+                        <div
+                            key={section.title}
+                            className="flex flex-col gap-4"
+                            style={{ transitionDelay: `${i * 100}ms` }}
+                        >
+                            <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                                <span className="w-1.5 h-1.5 rounded-full bg-primary" />
+                                {section.title}
+                            </h3>
+                            <ul className="flex flex-col gap-3">
+                                {section.links.map((link) => (
+                                    <li key={link.name}>
+                                        <Link
+                                            href={link.href}
+                                            className="text-sm text-muted-foreground hover:text-primary transition-colors duration-200 interactive-underline inline-block"
+                                        >
+                                            {link.name}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Newsletter signup */}
+                <div className="mt-12 relative">
+                    {/* Animated border */}
+                    <div className="absolute -inset-0.5 rounded-3xl animated-border opacity-30" />
+
+                    <div className="relative glass-card rounded-3xl p-6 md:p-8 overflow-hidden">
+                        {/* Inner glow */}
+                        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
+
+                        <div className="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+                            <div>
+                                <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
+                                    <Mail className="w-5 h-5 text-primary" suppressHydrationWarning />
+                                    Stay in the loop
+                                </h3>
+                                <p className="text-sm text-muted-foreground">Get the latest insights on web development and design delivered to your inbox.</p>
+                            </div>
+                            <form className="flex w-full md:w-auto gap-3" onSubmit={handleSubscribe}>
+                                <Input
+                                    type="email"
+                                    placeholder="you@example.com"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    className="w-full md:w-64 glass-card border-0 focus:ring-2 focus:ring-primary/50"
+                                />
+                                <Button type="submit" className="shine-effect group">
+                                    {isSubscribed ? (
+                                        <span className="flex items-center gap-2">
+                                            <Sparkles className="w-4 h-4" suppressHydrationWarning />
+                                            Subscribed!
+                                        </span>
+                                    ) : (
+                                        <span className="flex items-center">
+                                            Subscribe
+                                            <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" suppressHydrationWarning />
+                                        </span>
+                                    )}
+                                </Button>
+                            </form>
+                        </div>
+
+                        {/* Shine effect */}
+                        <div className="absolute inset-0 shine-effect pointer-events-none rounded-3xl" />
+                    </div>
+                </div>
+
+                {/* Bottom bar */}
+                <div className="mt-14 border-t border-border/50 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+                    <p className="text-sm text-muted-foreground">
+                        &copy; {new Date().getFullYear()} NexaFlow. All rights reserved.
+                    </p>
+                    <p className="text-sm text-muted-foreground flex items-center gap-1">
+                        Designed with{" "}
+                        <Heart className="w-4 h-4 text-red-500 fill-red-500 animate-pulse" suppressHydrationWarning />
+                        {" "}by{" "}
+                        <span className="text-primary font-medium">NexaFlow</span>
+                    </p>
+                </div>
+            </div>
+        </footer>
+    )
+}

components/layout/Header.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Menu, Sparkles } from "lucide-react"
+import { useSession, signOut } from "next-auth/react"
+import { ModeToggle } from "@/components/mode-toggle"
+
+const navItems = [
+    { name: "Services", href: "/services" },
+    { name: "Portfolio", href: "/portfolio" },
+    { name: "Blog", href: "/blog" },
+    { name: "About", href: "/about" },
+    { name: "Contact", href: "/contact" },
+]
+
+function AuthButtons({ mobile, onAction }: { mobile?: boolean; onAction?: () => void }) {
+    const { data: session } = useSession()
+
+    if (session) {
+        return (
+            <div className={cn("flex gap-2", mobile ? "flex-col" : "items-center")}>
+                <span className="text-sm text-muted-foreground truncate max-w-[140px]">
+                    {session.user?.email}
+                </span>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="glass-card hover:bg-primary/10"
+                    onClick={() => {
+                        signOut({ callbackUrl: "/admin/login" })
+                        onAction?.()
+                    }}
+                >
+                    Logout
+                </Button>
+                <Button asChild variant="default" size="sm" onClick={onAction} className="shine-effect">
+                    <Link href="/admin/dashboard">Dashboard</Link>
+                </Button>
+            </div>
+        )
+    }
+
+    return (
+        <div className={cn("flex gap-2", mobile ? "flex-col" : "items-center")}>
+            <Button asChild size="sm" onClick={onAction} className="shine-effect">
+                <Link href="/quote">Get a Quote</Link>
+            </Button>
+            <Button asChild variant="ghost" size="sm" onClick={onAction} className="hover:bg-primary/10">
+                <Link href="/admin/login">Login</Link>
+            </Button>
+        </div>
+    )
+}
+
+export function Header() {
+    const pathname = usePathname()
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [scrolled, setScrolled] = React.useState(false)
+
+    React.useEffect(() => {
+        const handleScroll = () => {
+            setScrolled(window.scrollY > 20)
+        }
+
+        window.addEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', handleScroll)
+    }, [])
+
+    return (
+        <header
+            className={cn(
+                "sticky top-0 z-50 w-full transition-all duration-500 animate-fade-in-down",
+                scrolled
+                    ? "glass-card border-b border-border/20 shadow-lg"
+                    : "bg-transparent"
+            )}
+        >
+            <div className="container flex h-16 items-center justify-between">
+                {/* Logo */}
+                <Link href="/" className="flex items-center gap-2 group">
+                    <div className="relative">
+                        <span className="text-xl font-bold tracking-tight transition-all duration-300 group-hover:scale-105 inline-block">
+                            Nexa<span className="gradient-text">Flow</span>
+                        </span>
+                        {/* Animated underline on hover */}
+                        <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300 rounded-full" />
+                    </div>
+                    <Sparkles className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 group-hover:rotate-12 transition-all duration-300" suppressHydrationWarning />
+                </Link>
+
+                {/* Desktop Navigation */}
+                <nav className="hidden md:flex items-center gap-1">
+                    {navItems.map((item) => {
+                        const isActive = pathname === item.href
+                        return (
+                            <Link
+                                key={item.href}
+                                href={item.href}
+                                className={cn(
+                                    "relative px-5 py-2.5 text-sm font-semibold rounded-2xl transition-all duration-300 group",
+                                    isActive
+                                        ? "text-primary glass-card"
+                                        : "text-muted-foreground hover:text-primary hover:bg-primary/5"
+                                )}
+                            >
+                                <span className="relative z-10">{item.name}</span>
+                                {/* Active indicator */}
+                                {isActive && (
+                                    <div className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary animate-pulse" />
+                                )}
+                                {/* Hover effect */}
+                                <div className={cn(
+                                    "absolute inset-0 rounded-2xl bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
+                                    isActive && "opacity-100"
+                                )} />
+                            </Link>
+                        )
+                    })}
+                </nav>
+
+                {/* Desktop Actions */}
+                <div className="flex items-center gap-3">
+                    <div className="hidden md:flex items-center gap-2">
+                        <ModeToggle />
+                        <AuthButtons />
+                    </div>
+
+                    {/* Mobile Menu */}
+                    <div className="md:hidden flex items-center gap-2">
+                        <ModeToggle />
+                        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+                            <SheetTrigger asChild>
+                                <Button variant="ghost" size="icon" className="glass-card hover:bg-primary/10">
+                                    <Menu className="h-5 w-5" suppressHydrationWarning />
+                                    <span className="sr-only">Toggle menu</span>
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="right" className="w-80 max-w-[80vw] glass-card border-l border-border/20 p-0">
+                                <div className="flex flex-col gap-6 p-6">
+                                    <Link
+                                        href="/"
+                                        onClick={() => setIsOpen(false)}
+                                        className="text-xl font-bold hover:text-primary transition-colors flex items-center gap-2 group"
+                                    >
+                                        Nexa<span className="gradient-text">Flow</span>
+                                        <Sparkles className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-opacity" suppressHydrationWarning />
+                                    </Link>
+                                    <nav className="flex flex-col gap-2">
+                                        {navItems.map((item, i) => {
+                                            const isActive = pathname === item.href
+                                            return (
+                                                <Link
+                                                    key={item.href}
+                                                    href={item.href}
+                                                    onClick={() => setIsOpen(false)}
+                                                    className={cn(
+                                                        "px-4 py-3 text-base font-medium rounded-xl transition-all duration-300 animate-fade-in-up",
+                                                        isActive
+                                                            ? "text-primary glass-card"
+                                                            : "text-muted-foreground hover:text-primary hover:bg-primary/5"
+                                                    )}
+                                                    style={{ animationDelay: `${i * 0.05}s` }}
+                                                >
+                                                    {item.name}
+                                                </Link>
+                                            )
+                                        })}
+                                    </nav>
+                                    <div className="pt-4 border-t border-border/50 animate-fade-in-up animate-delay-3">
+                                        <AuthButtons mobile onAction={() => setIsOpen(false)} />
+                                    </div>
+                                </div>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}

components/mode-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" suppressHydrationWarning />
+                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" suppressHydrationWarning />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

components/portfolio/ProjectGallery.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type Project = {
+    title: string
+    slug: string
+    category: string
+    description: string
+    tags: string[]
+    gradient?: string
+    emoji?: string
+    imageUrl?: string | null
+}
+
+const categories = ["All", "Web", "Mobile", "Design", "SEO"]
+
+export function ProjectGallery({ projects }: { projects: Project[] }) {
+    const [active, setActive] = useState("All")
+
+    const filtered = active === "All"
+        ? projects
+        : projects.filter((p) => p.category === active)
+
+    return (
+        <div>
+            {/* Filter tabs */}
+            <div className="animate-fade-in-up flex flex-wrap justify-center gap-2 mb-12">
+                {categories.map((cat) => (
+                    <Button
+                        key={cat}
+                        variant={active === cat ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => setActive(cat)}
+                        className="rounded-full"
+                    >
+                        {cat}
+                    </Button>
+                ))}
+            </div>
+
+            {/* Project grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {filtered.map((project, i) => (
+                    <Link key={project.slug} href={`/portfolio/${project.slug}`}>
+                        <article
+                            className="animate-fade-in-up h-full"
+                            style={{ animationDelay: `${i * 0.06}s` }}
+                        >
+                            <Card className="group h-full overflow-hidden border hover:border-primary/20 hover:shadow-xl hover:shadow-primary/5 transition-all duration-500 cursor-pointer">
+                                {/* Thumbnail */}
+                                <div className="relative aspect-[16/10] bg-muted overflow-hidden flex items-center justify-center">
+                                    {project.imageUrl ? (
+                                        <img
+                                            src={project.imageUrl.startsWith('http') || project.imageUrl.startsWith('/') ? project.imageUrl : `/${project.imageUrl}`}
+                                            alt={project.title}
+                                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                                        />
+                                    ) : (
+                                        <div className={`w-full h-full bg-gradient-to-br ${project.gradient || 'from-gray-800 to-gray-600'} flex items-center justify-center`}>
+                                            <span
+                                                className="text-6xl group-hover:scale-110 transition-transform duration-500"
+                                                role="img"
+                                                aria-label={project.title}
+                                            >
+                                                {project.emoji || '🚀'}
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
+                                <CardHeader>
+                                    <p className="text-overline text-primary mb-2">{project.category}</p>
+                                    <h3 className="text-xl font-semibold leading-none">{project.title}</h3>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-caption leading-relaxed mb-4">{project.description}</p>
+                                    {/* Technology tags (SF-015) */}
+                                    <div className="flex flex-wrap gap-2">
+                                        {project.tags.map((tag) => (
+                                            <span
+                                                key={tag}
+                                                className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-medium"
+                                            >
+                                                {tag}
+                                            </span>
+                                        ))}
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </article>
+                    </Link>
+                ))}
+            </div>
+
+            {filtered.length === 0 && (
+                <p className="text-center text-muted-foreground py-12">
+                    No projects in this category yet. Check back soon!
+                </p>
+            )}
+        </div>
+    )
+}

components/services/AddOnServices.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Shield, BarChart3, Wrench, Globe, ArrowRight } from "lucide-react"
+
+const addons = [
+    {
+        title: "Maintenance Plan",
+        description: "Monthly security updates, performance monitoring, and content changes.",
+        price: "From $299/mo",
+        icon: Wrench,
+    },
+    {
+        title: "SEO Audit & Strategy",
+        description: "Comprehensive audit, keyword research, and a 3-month optimization roadmap.",
+        price: "From $999",
+        icon: BarChart3,
+    },
+    {
+        title: "Security Hardening",
+        description: "Advanced security audits, penetration testing, and compliance setup.",
+        price: "From $1,499",
+        icon: Shield,
+    },
+    {
+        title: "Analytics & Tracking",
+        description: "Google Analytics, heatmaps, conversion tracking, and monthly reports.",
+        price: "From $499",
+        icon: Globe,
+    },
+]
+
+export function AddOnServices() {
+    return (
+        <section className="py-24 bg-background" id="addons">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16">
+                    <p className="text-overline text-primary mb-3">Extras</p>
+                    <h2 className="sm:text-4xl mb-4">Add-on Services</h2>
+                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
+                        Enhance your project with these supplementary services.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {addons.map((addon, i) => (
+                        <div
+                            key={addon.title}
+                            className="animate-fade-in-up group rounded-2xl border bg-card p-6 hover:border-primary/20 hover:shadow-lg transition-all duration-500"
+                            style={{ animationDelay: `${i * 0.1}s` }}
+                        >
+                            <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mb-4 group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300">
+                                <addon.icon className="w-6 h-6" suppressHydrationWarning />
+                            </div>
+                            <h3 className="font-bold mb-2">{addon.title}</h3>
+                            <p className="text-caption leading-relaxed mb-4">{addon.description}</p>
+                            <p className="text-sm font-semibold text-primary mb-4">{addon.price}</p>
+                            <Button asChild variant="outline" size="sm" className="w-full group/btn">
+                                <Link href="/quote">
+                                    Add to Quote
+                                    <ArrowRight className="ml-2 h-3 w-3 transition-transform group-hover/btn:translate-x-1" suppressHydrationWarning />
+                                </Link>
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

components/services/FAQSection.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion"
+
+const faqCategories = [
+    {
+        category: "Pricing & Packages",
+        questions: [
+            {
+                q: "What's included in each package?",
+                a: "Each package includes a dedicated project manager, custom design, development, quality assurance, and a warranty period. The Starter package covers up to 5 pages, Professional up to 15 pages with CMS, and Enterprise offers unlimited scope with custom integrations.",
+            },
+            {
+                q: "Are there any hidden fees?",
+                a: "No. We provide a detailed project quote upfront and any scope changes are discussed and approved before billing. The only additional costs would be third-party services like hosting, domain names, or premium API subscriptions.",
+            },
+            {
+                q: "Do you offer payment plans?",
+                a: "Yes! We typically split payments into milestones: 30% upfront, 40% at design approval, and 30% at launch. For Enterprise projects, we can arrange custom payment schedules.",
+            },
+        ],
+    },
+    {
+        category: "Process & Timeline",
+        questions: [
+            {
+                q: "How long does a typical project take?",
+                a: "Starter projects typically take 3-4 weeks, Professional projects 6-8 weeks, and Enterprise projects 10-16+ weeks depending on complexity. We'll provide a detailed timeline during the discovery phase.",
+            },
+            {
+                q: "What does the development process look like?",
+                a: "Our process follows four phases: Discovery (requirements & strategy), Design (wireframes & mockups), Development (coding & integration), and Deployment (testing, launch & handoff). You'll have visibility and input at every stage.",
+            },
+        ],
+    },
+    {
+        category: "Technical",
+        questions: [
+            {
+                q: "What technologies do you use?",
+                a: "We primarily build with Next.js, React, TypeScript, and Tailwind CSS for frontend; Node.js with Express or Next.js API routes for backend; and PostgreSQL or MongoDB for databases. For mobile, we use React Native or Flutter.",
+            },
+            {
+                q: "Will my website be SEO-friendly?",
+                a: "Absolutely. We build with SEO best practices from day one — semantic HTML, server-side rendering, optimized images, structured data, meta tags, sitemap generation, and fast page load times.",
+            },
+            {
+                q: "Can I update content myself after launch?",
+                a: "Yes! We integrate a content management system (CMS) so you can update text, images, blog posts, and more without any coding knowledge.",
+            },
+        ],
+    },
+    {
+        category: "Support",
+        questions: [
+            {
+                q: "Do you offer ongoing support after launch?",
+                a: "Yes. All packages include a 30-day warranty post-launch. We also offer monthly maintenance plans that include security updates, performance monitoring, content updates, and priority support.",
+            },
+            {
+                q: "What if I need changes after the project is delivered?",
+                a: "Minor adjustments within the warranty period are covered at no extra cost. For larger changes or new features, we'll provide a quote and timeline. Many of our clients retain us on a monthly basis for ongoing improvements.",
+            },
+        ],
+    },
+]
+
+export function FAQSection() {
+    return (
+        <section className="py-24 bg-muted/20" id="faq">
+            <div className="container max-w-3xl">
+                <div className="animate-fade-in-up text-center mb-16">
+                    <p className="text-overline text-primary mb-3">FAQ</p>
+                    <h2 className="sm:text-4xl mb-4">Frequently Asked Questions</h2>
+                    <p className="text-body text-muted-foreground">
+                        Got questions? We&apos;ve got answers.
+                    </p>
+                </div>
+
+                <div className="space-y-8">
+                    {faqCategories.map((cat, ci) => (
+                        <div key={cat.category} className="animate-fade-in-up" style={{ animationDelay: `${ci * 0.1}s` }}>
+                            <h3 className="font-bold mb-4">{cat.category}</h3>
+                            <Accordion type="single" collapsible className="space-y-2">
+                                {cat.questions.map((item, qi) => (
+                                    <AccordionItem
+                                        key={qi}
+                                        value={`${ci}-${qi}`}
+                                        className="rounded-xl border bg-card px-4 data-[state=open]:border-primary/20 transition-colors"
+                                    >
+                                        <AccordionTrigger className="text-sm font-medium hover:no-underline py-4">
+                                            {item.q}
+                                        </AccordionTrigger>
+                                        <AccordionContent className="text-sm text-muted-foreground leading-relaxed pb-4">
+                                            {item.a}
+                                        </AccordionContent>
+                                    </AccordionItem>
+                                ))}
+                            </Accordion>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

components/services/PackageComparison.tsx

@@ -0,0 +1,124 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Check, X, ArrowRight, Sparkles, Star, Zap } from "lucide-react"
+
+const tiers = [
+    {
+        name: "Starter",
+        tagline: "Perfect for small businesses",
+        price: "$2,999",
+        icon: Sparkles,
+        gradient: "from-blue-500 to-cyan-400",
+        popular: false,
+        features: [
+            { name: "Custom design (up to 5 pages)", included: true },
+            { name: "Responsive layout", included: true },
+            { name: "Contact form", included: true },
+            { name: "Basic SEO setup", included: true },
+            { name: "1 round of revisions", included: true },
+            { name: "CMS integration", included: false },
+            { name: "E-commerce functionality", included: false },
+            { name: "Priority support", included: false },
+        ],
+    },
+    {
+        name: "Professional",
+        tagline: "Most popular for growing brands",
+        price: "$7,499",
+        icon: Star,
+        gradient: "from-primary to-blue-500",
+        popular: true,
+        features: [
+            { name: "Custom design (up to 15 pages)", included: true },
+            { name: "Responsive layout", included: true },
+            { name: "Advanced forms & integrations", included: true },
+            { name: "Full SEO optimization", included: true },
+            { name: "3 rounds of revisions", included: true },
+            { name: "CMS integration", included: true },
+            { name: "E-commerce functionality", included: false },
+            { name: "Priority support", included: true },
+        ],
+    },
+    {
+        name: "Enterprise",
+        tagline: "For ambitious, large-scale projects",
+        price: "Custom",
+        icon: Zap,
+        gradient: "from-violet-600 to-purple-500",
+        popular: false,
+        features: [
+            { name: "Unlimited pages & features", included: true },
+            { name: "Responsive layout", included: true },
+            { name: "Custom integrations & APIs", included: true },
+            { name: "Full SEO optimization", included: true },
+            { name: "Unlimited revisions", included: true },
+            { name: "CMS integration", included: true },
+            { name: "E-commerce functionality", included: true },
+            { name: "Priority support", included: true },
+        ],
+    },
+]
+
+export function PackageComparison() {
+    return (
+        <section className="py-24 bg-background" id="packages">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16">
+                    <p className="text-overline text-primary mb-3">Pricing</p>
+                    <h2 className="sm:text-4xl mb-4">Choose Your Package</h2>
+                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
+                        Transparent pricing with no hidden fees. Every package includes a dedicated project manager and quality assurance.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
+                    {tiers.map((tier, i) => (
+                        <div key={tier.name} className="animate-fade-in-up" style={{ animationDelay: `${i * 0.1}s` }}>
+                            <Card className={`relative h-full ${tier.popular ? "border-primary shadow-xl shadow-primary/10 scale-[1.02]" : "border"}`}>
+                                {tier.popular && (
+                                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-4 py-1 text-xs font-semibold text-primary-foreground">
+                                        Most Popular
+                                    </div>
+                                )}
+                                <CardHeader className="text-center pb-2">
+                                    <div className={`w-12 h-12 mx-auto rounded-xl bg-gradient-to-br ${tier.gradient} flex items-center justify-center text-white shadow-lg mb-4`}>
+                                        <tier.icon className="w-6 h-6" suppressHydrationWarning />
+                                    </div>
+                                    <h3 className="text-xl font-bold">{tier.name}</h3>
+                                    <p className="text-caption">{tier.tagline}</p>
+                                    <div className="mt-4">
+                                        <span className="text-4xl font-extrabold tracking-tight">{tier.price}</span>
+                                        {tier.price !== "Custom" && <span className="text-caption ml-1">starting</span>}
+                                    </div>
+                                </CardHeader>
+                                <CardContent className="space-y-6">
+                                    <ul className="space-y-3">
+                                        {tier.features.map((feature) => (
+                                            <li key={feature.name} className="flex items-center gap-3 text-sm">
+                                                {feature.included ? (
+                                                    <Check className="h-4 w-4 text-green-500 shrink-0" suppressHydrationWarning />
+                                                ) : (
+                                                    <X className="h-4 w-4 text-muted-foreground/40 shrink-0" suppressHydrationWarning />
+                                                )}
+                                                <span className={feature.included ? "" : "text-muted-foreground/60"}>
+                                                    {feature.name}
+                                                </span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                    <Button asChild className="w-full" variant={tier.popular ? "default" : "outline"} size="lg">
+                                        <Link href="/quote">
+                                            Get Started
+                                            <ArrowRight className="ml-2 h-4 w-4" suppressHydrationWarning />
+                                        </Link>
+                                    </Button>
+                                </CardContent>
+                            </Card>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

components/services/ProcessTimeline.tsx

@@ -0,0 +1,82 @@
+import { Search, PenTool, Code, Rocket } from "lucide-react"
+
+const steps = [
+    {
+        number: "01",
+        title: "Discovery",
+        description: "We dive deep into your business goals, target audience, and competition to build a solid project strategy.",
+        icon: Search,
+        gradient: "from-blue-500 to-cyan-400",
+    },
+    {
+        number: "02",
+        title: "Design",
+        description: "Our designers create wireframes and high-fidelity mockups that bring your vision to life with pixel-perfect precision.",
+        icon: PenTool,
+        gradient: "from-violet-500 to-purple-400",
+    },
+    {
+        number: "03",
+        title: "Develop",
+        description: "Our engineers build your product using modern tech stacks with clean code, performance, and scalability in mind.",
+        icon: Code,
+        gradient: "from-pink-500 to-rose-400",
+    },
+    {
+        number: "04",
+        title: "Deploy",
+        description: "We launch your project with rigorous QA testing, performance optimization, and ongoing support to ensure success.",
+        icon: Rocket,
+        gradient: "from-amber-500 to-orange-400",
+    },
+]
+
+export function ProcessTimeline() {
+    return (
+        <section className="py-24 bg-background" id="process">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16">
+                    <p className="text-overline text-primary mb-3">Our Process</p>
+                    <h2 className="sm:text-4xl mb-4">How We Work</h2>
+                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
+                        A proven 4-step process that takes your project from idea to launch.
+                    </p>
+                </div>
+
+                {/* Desktop: horizontal timeline */}
+                <div className="hidden md:grid md:grid-cols-4 gap-8 relative">
+                    {/* Connecting line */}
+                    <div className="absolute top-10 left-[12.5%] right-[12.5%] h-0.5 bg-border" aria-hidden="true" />
+
+                    {steps.map((step, i) => (
+                        <div key={step.number} className="animate-fade-in-up relative text-center" style={{ animationDelay: `${i * 0.12}s` }}>
+                            <div className={`relative z-10 w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white shadow-lg mb-6`}>
+                                <step.icon className="w-8 h-8" suppressHydrationWarning />
+                            </div>
+                            <div className="text-xs font-bold text-primary mb-1">{step.number}</div>
+                            <h3 className="font-bold mb-2">{step.title}</h3>
+                            <p className="text-caption leading-relaxed">{step.description}</p>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Mobile: vertical timeline */}
+                <div className="md:hidden relative pl-12">
+                    {/* Vertical line */}
+                    <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-border" aria-hidden="true" />
+
+                    {steps.map((step, i) => (
+                        <div key={step.number} className="animate-fade-in-up relative pb-12 last:pb-0" style={{ animationDelay: `${i * 0.12}s` }}>
+                            <div className={`absolute left-[-1.75rem] z-10 w-10 h-10 rounded-xl bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white shadow-lg`}>
+                                <step.icon className="w-5 h-5" suppressHydrationWarning />
+                            </div>
+                            <div className="text-xs font-bold text-primary mb-1">{step.number}</div>
+                            <h3 className="font-bold mb-2">{step.title}</h3>
+                            <p className="text-caption leading-relaxed">{step.description}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

components/services/ServiceDescriptions.tsx

@@ -0,0 +1,87 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Code, Palette, Smartphone, LineChart, ArrowUpRight } from "lucide-react"
+import Link from "next/link"
+
+const services = [
+    {
+        title: "Web Development",
+        description: "We build fast, scalable web applications using Next.js, React, and Node.js. From marketing sites to complex SaaS platforms.",
+        icon: Code,
+        gradient: "from-blue-500 to-cyan-400",
+        deliverables: ["Custom Website", "Web Application", "API Development", "Database Design"],
+    },
+    {
+        title: "Mobile App Development",
+        description: "Cross-platform mobile apps for iOS and Android built with React Native and Flutter. Native performance, shared codebase.",
+        icon: Smartphone,
+        gradient: "from-violet-500 to-purple-400",
+        deliverables: ["iOS App", "Android App", "Cross-Platform", "App Store Deployment"],
+    },
+    {
+        title: "UI/UX Design",
+        description: "User-centric design that converts. We craft interfaces that are both beautiful and intuitive, backed by research and usability testing.",
+        icon: Palette,
+        gradient: "from-pink-500 to-rose-400",
+        deliverables: ["Wireframes", "Prototypes", "Design System", "Usability Testing"],
+    },
+    {
+        title: "SEO Optimization",
+        description: "Data-driven strategies to boost your search rankings, drive organic traffic, and increase visibility across all major search engines.",
+        icon: LineChart,
+        gradient: "from-amber-500 to-orange-400",
+        deliverables: ["Technical Audit", "Keyword Research", "On-Page SEO", "Analytics Setup"],
+    },
+]
+
+export function ServiceDescriptions() {
+    return (
+        <section className="py-24 bg-muted/20" id="services-detail">
+            <div className="container">
+                <div className="animate-fade-in-up text-center mb-16">
+                    <p className="text-overline text-primary mb-3">What We Do</p>
+                    <h2 className="sm:text-4xl mb-4">Our Services</h2>
+                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
+                        End-to-end digital solutions tailored to your business goals.
+                    </p>
+                </div>
+
+                <div className="grid gap-8 md:grid-cols-2">
+                    {services.map((service, i) => (
+                        <div key={service.title} className="animate-fade-in-up" style={{ animationDelay: `${i * 0.1}s` }}>
+                            <Card className="group h-full border hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all duration-500">
+                                <CardHeader>
+                                    <div className="flex items-start justify-between">
+                                        <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${service.gradient} flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform duration-300`}>
+                                            <service.icon className="w-7 h-7" suppressHydrationWarning />
+                                        </div>
+                                        <Link
+                                            href="/quote"
+                                            className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                                            aria-label={`Request a quote for ${service.title}`}
+                                        >
+                                            <ArrowUpRight className="h-5 w-5 text-primary" suppressHydrationWarning />
+                                        </Link>
+                                    </div>
+                                    <h3 className="text-xl font-bold mt-4">{service.title}</h3>
+                                </CardHeader>
+                                <CardContent className="space-y-4">
+                                    <p className="text-body text-muted-foreground">{service.description}</p>
+                                    <div>
+                                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Key Deliverables</p>
+                                        <div className="flex flex-wrap gap-2">
+                                            {service.deliverables.map((d) => (
+                                                <span key={d} className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-medium">
+                                                    {d}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }