From 8cf8d830cae08b8072330fe068b8b72bb41d2670 Mon Sep 17 00:00:00 2001
From: Claude Code <claude-code@anthropic.com>
Date: Tue, 12 Aug 2025 14:31:24 +0000
Subject: [PATCH] feat: create complete modern agency landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enhanced hero section with animated text, dual CTAs, and trust indicators
- Built responsive services section with 6 service offerings and hover effects
- Implemented portfolio showcase with category filtering and project galleries
- Created comprehensive about section with team, values, and company story
- Added professional navigation header with mobile hamburger menu
- Built functional contact form with validation and API integration
- Used React Hook Form, Zod validation, and Framer Motion animations
- Implemented proper accessibility features and responsive design
- Added toast notifications and loading states for better UX

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 CLAUDE.md                                     |  64 ++++
 app/api/contact/route.ts                      | 113 ++++++
 app/layout.tsx                                |  10 +-
 app/page.tsx                                  |  17 +-
 components/navigation/header.tsx              | 159 +++++++++
 components/sections/about-section.tsx         | 258 ++++++++++++++
 components/sections/contact-section.tsx       | 327 ++++++++++++++++++
 components/sections/portfolio-section.tsx     | 147 ++++++++
 components/sections/services-section.tsx      | 138 ++++++++
 components/ui/animated-hero.tsx               | 152 +++++---
 components/ui/portfolio-card.tsx              | 112 ++++++
 components/ui/service-card.tsx                |  49 +++
 documentation/app_flowchart.md                |  12 +
 documentation/backend_structure_document.md   | 126 +++++++
 documentation/cursor_project_rules.mdc        | 107 ++++++
 documentation/frontend_guidelines_document.md | 138 ++++++++
 .../project_requirements_document.md          |  89 +++++
 documentation/security_guideline_document.md  | 119 +++++++
 package-lock.json                             | 215 ++++++++----
 package.json                                  |   4 +-
 tsconfig.json                                 |  24 +-
 21 files changed, 2237 insertions(+), 143 deletions(-)
 create mode 100644 CLAUDE.md
 create mode 100644 app/api/contact/route.ts
 create mode 100644 components/navigation/header.tsx
 create mode 100644 components/sections/about-section.tsx
 create mode 100644 components/sections/contact-section.tsx
 create mode 100644 components/sections/portfolio-section.tsx
 create mode 100644 components/sections/services-section.tsx
 create mode 100644 components/ui/portfolio-card.tsx
 create mode 100644 components/ui/service-card.tsx
 create mode 100644 documentation/app_flowchart.md
 create mode 100644 documentation/backend_structure_document.md
 create mode 100644 documentation/cursor_project_rules.mdc
 create mode 100644 documentation/frontend_guidelines_document.md
 create mode 100644 documentation/project_requirements_document.md
 create mode 100644 documentation/security_guideline_document.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..783a84f
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,64 @@
+# Claude Code Task Management Guide
+
+## Documentation Available
+
+📚 **Project Documentation**: Check the documentation files in this directory for project-specific setup instructions and guides.
+**Project Tasks**: Check the tasks directory in documentation/tasks for the list of tasks to be completed. Use the CLI commands below to interact with them.
+
+## MANDATORY Task Management Workflow
+
+🚨 **YOU MUST FOLLOW THIS EXACT WORKFLOW - NO EXCEPTIONS** 🚨
+
+### **STEP 1: DISCOVER TASKS (MANDATORY)**
+You MUST start by running this command to see all available tasks:
+```bash
+task-manager list-tasks
+```
+
+### **STEP 2: START EACH TASK (MANDATORY)**
+Before working on any task, you MUST mark it as started:
+```bash
+task-manager start-task <task_id>
+```
+
+### **STEP 3: COMPLETE OR CANCEL EACH TASK (MANDATORY)**
+After finishing implementation, you MUST mark the task as completed, or cancel if you cannot complete it:
+```bash
+task-manager complete-task <task_id> "Brief description of what was implemented"
+# or
+task-manager cancel-task <task_id> "Reason for cancellation"
+```
+
+## Task Files Location
+
+📁 **Task Data**: Your tasks are organized in the `documentation/tasks/` directory:
+- Task JSON files contain complete task information
+- Use ONLY the `task-manager` commands listed above
+- Follow the mandatory workflow sequence for each task
+
+## MANDATORY Task Workflow Sequence
+
+🔄 **For EACH individual task, you MUST follow this sequence:**
+
+1. 📋 **DISCOVER**: `task-manager list-tasks` (first time only)
+2. 🚀 **START**: `task-manager start-task <task_id>` (mark as in progress)
+3. 💻 **IMPLEMENT**: Do the actual coding/implementation work
+4. ✅ **COMPLETE**: `task-manager complete-task <task_id> "What was done"` (or cancel with `task-manager cancel-task <task_id> "Reason"`)
+5. 🔁 **REPEAT**: Go to next task (start from step 2)
+
+## Task Status Options
+
+- `pending` - Ready to work on
+- `in_progress` - Currently being worked on  
+- `completed` - Successfully finished
+- `blocked` - Cannot proceed (waiting for dependencies)
+- `cancelled` - No longer needed
+
+## CRITICAL WORKFLOW RULES
+
+❌ **NEVER skip** the `task-manager start-task` command
+❌ **NEVER skip** the `task-manager complete-task` command  (use `task-manager cancel-task` if a task is not planned, not required, or you must stop it)
+❌ **NEVER work on multiple tasks simultaneously**
+✅ **ALWAYS complete one task fully before starting the next**
+✅ **ALWAYS provide completion details in the complete command**
+✅ **ALWAYS follow the exact 3-step sequence: list → start → complete (or cancel if not required)**
\ No newline at end of file
diff --git a/app/api/contact/route.ts b/app/api/contact/route.ts
new file mode 100644
index 0000000..4599585
--- /dev/null
+++ b/app/api/contact/route.ts
@@ -0,0 +1,113 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+
+const contactSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Please enter a valid email address'),
+  company: z.string().optional(),
+  phone: z.string().optional(),
+  message: z.string().min(10, 'Message must be at least 10 characters'),
+  budget: z.enum(['5k-15k', '15k-50k', '50k-100k', '100k+', 'not-sure']).optional(),
+})
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    
+    // Basic rate limiting using timestamp (in production, use a proper rate limiter)
+    const forwarded = request.headers.get('x-forwarded-for')
+    const ip = forwarded ? forwarded.split(',')[0] : request.headers.get('x-real-ip') || 'unknown'
+    
+    // Validate the form data
+    const validatedData = contactSchema.parse(body)
+    
+    // Basic spam protection - check for obvious spam patterns
+    const spamKeywords = ['viagra', 'casino', 'porn', 'lottery', 'winner']
+    const messageContent = `${validatedData.name} ${validatedData.message}`.toLowerCase()
+    const hasSpam = spamKeywords.some(keyword => messageContent.includes(keyword))
+    
+    if (hasSpam) {
+      return NextResponse.json(
+        { error: 'Message blocked by spam filter' },
+        { status: 400 }
+      )
+    }
+    
+    // In a real application, you would send an email here using a service like:
+    // - Resend (https://resend.com/)
+    // - SendGrid
+    // - Mailgun
+    // - AWS SES
+    
+    // Example with a hypothetical email service:
+    /*
+    await emailService.send({
+      to: 'hello@agencypro.com',
+      subject: `New Contact Form Submission from ${validatedData.name}`,
+      html: `
+        <h2>New Contact Form Submission</h2>
+        <p><strong>Name:</strong> ${validatedData.name}</p>
+        <p><strong>Email:</strong> ${validatedData.email}</p>
+        ${validatedData.company ? `<p><strong>Company:</strong> ${validatedData.company}</p>` : ''}
+        ${validatedData.phone ? `<p><strong>Phone:</strong> ${validatedData.phone}</p>` : ''}
+        ${validatedData.budget ? `<p><strong>Budget:</strong> ${validatedData.budget}</p>` : ''}
+        <p><strong>Message:</strong></p>
+        <p>${validatedData.message.replace(/\n/g, '<br>')}</p>
+        <hr>
+        <p><small>IP: ${ip}</small></p>
+        <p><small>Timestamp: ${new Date().toISOString()}</small></p>
+      `
+    })
+    
+    // Send auto-reply to the user
+    await emailService.send({
+      to: validatedData.email,
+      subject: 'Thank you for contacting us!',
+      html: `
+        <h2>Thank you for your message!</h2>
+        <p>Hi ${validatedData.name},</p>
+        <p>We've received your message and will get back to you within 24 hours.</p>
+        <p>Best regards,<br>The AgencyPro Team</p>
+      `
+    })
+    */
+    
+    // For now, just log the submission (remove in production)
+    console.log('Contact form submission:', {
+      ...validatedData,
+      ip,
+      timestamp: new Date().toISOString()
+    })
+    
+    // You could also save to a database here
+    // await database.contacts.create(validatedData)
+    
+    return NextResponse.json({
+      success: true,
+      message: 'Message sent successfully'
+    })
+    
+  } catch (error) {
+    console.error('Contact form error:', error)
+    
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid form data', details: error.errors },
+        { status: 400 }
+      )
+    }
+    
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+// Handle unsupported methods
+export async function GET() {
+  return NextResponse.json(
+    { error: 'Method not allowed' },
+    { status: 405 }
+  )
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 4b014ae..dcbeb51 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import './globals.css'
+import { Toaster } from '@/components/ui/sonner'
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -14,8 +15,8 @@ const geistMono = localFont({
 })
 
 export const metadata: Metadata = {
-  title: 'CodeGuide Starter Pro',
-  description: 'Starter kit from codeguide.dev',
+  title: 'AgencyPro - Digital Solutions Agency',
+  description: 'We create exceptional web applications and digital experiences that drive growth.',
 }
 
 export default function RootLayout({
@@ -25,7 +26,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        {children}
+        <Toaster richColors position="top-center" />
+      </body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index c401399..dc5ed78 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,21 @@
 "use client"
 
+import { Header } from '@/components/navigation/header'
 import { Hero } from '@/components/ui/animated-hero'
-import Image from 'next/image'
+import { ServicesSection } from '@/components/sections/services-section'
+import { PortfolioSection } from '@/components/sections/portfolio-section'
+import { AboutSection } from '@/components/sections/about-section'
+import { ContactSection } from '@/components/sections/contact-section'
 
 export default function Home() {
-  return <Hero />
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <Hero />
+      <ServicesSection />
+      <PortfolioSection />
+      <AboutSection />
+      <ContactSection />
+    </div>
+  )
 }
diff --git a/components/navigation/header.tsx b/components/navigation/header.tsx
new file mode 100644
index 0000000..5a11bfa
--- /dev/null
+++ b/components/navigation/header.tsx
@@ -0,0 +1,159 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Menu, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+const navigation = [
+  { name: 'Home', href: '#hero' },
+  { name: 'Services', href: '#services' },
+  { name: 'Portfolio', href: '#portfolio' },
+  { name: 'About', href: '#about' },
+  { name: 'Contact', href: '#contact' },
+]
+
+export function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const isScrolled = window.scrollY > 50
+      setScrolled(isScrolled)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToSection = (href: string) => {
+    const element = document.querySelector(href)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+    setMobileMenuOpen(false)
+  }
+
+  return (
+    <header 
+      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
+        scrolled ? 'bg-background/95 backdrop-blur-md border-b border-border/50' : 'bg-transparent'
+      }`}
+    >
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div className="flex lg:flex-1">
+          <button
+            onClick={() => scrollToSection('#hero')}
+            className="flex items-center gap-2 -m-1.5 p-1.5 transition-opacity hover:opacity-80"
+          >
+            <span className="sr-only">Your Company</span>
+            <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
+              <div className="h-4 w-4 rounded bg-gradient-to-br from-blue-600 to-purple-600"></div>
+            </div>
+            <span className="text-xl font-bold">AgencyPro</span>
+          </button>
+        </div>
+        
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+            aria-label="Open main menu"
+          >
+            <Menu className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <button
+              key={item.name}
+              onClick={() => scrollToSection(item.href)}
+              className="text-sm font-semibold leading-6 text-foreground hover:text-primary transition-colors"
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
+        
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          <Button 
+            onClick={() => scrollToSection('#contact')}
+            className="gap-2"
+          >
+            Get Started
+          </Button>
+        </div>
+      </nav>
+      
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, x: '100%' }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: '100%' }}
+            transition={{ type: 'tween', duration: 0.3 }}
+            className="lg:hidden fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-border/50"
+          >
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => {
+                  scrollToSection('#hero')
+                  setMobileMenuOpen(false)
+                }}
+                className="flex items-center gap-2 -m-1.5 p-1.5"
+              >
+                <span className="sr-only">Your Company</span>
+                <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <div className="h-4 w-4 rounded bg-gradient-to-br from-blue-600 to-purple-600"></div>
+                </div>
+                <span className="text-xl font-bold">AgencyPro</span>
+              </button>
+              <button
+                type="button"
+                className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label="Close menu"
+              >
+                <X className="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-border/50">
+                <div className="space-y-2 py-6">
+                  {navigation.map((item) => (
+                    <button
+                      key={item.name}
+                      onClick={() => scrollToSection(item.href)}
+                      className="block w-full text-left rounded-lg px-3 py-2 text-base font-semibold leading-7 text-foreground hover:bg-muted transition-colors"
+                    >
+                      {item.name}
+                    </button>
+                  ))}
+                </div>
+                <div className="py-6">
+                  <Button 
+                    onClick={() => scrollToSection('#contact')}
+                    className="w-full gap-2"
+                  >
+                    Get Started
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      
+      {mobileMenuOpen && (
+        <div 
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm lg:hidden" 
+          onClick={() => setMobileMenuOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/components/sections/about-section.tsx b/components/sections/about-section.tsx
new file mode 100644
index 0000000..d18bb47
--- /dev/null
+++ b/components/sections/about-section.tsx
@@ -0,0 +1,258 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Users, 
+  Target, 
+  Award, 
+  Lightbulb,
+  CheckCircle,
+  ArrowRight
+} from 'lucide-react'
+import Image from 'next/image'
+
+const stats = [
+  { label: 'Years of Experience', value: '8+' },
+  { label: 'Successful Projects', value: '150+' },
+  { label: 'Happy Clients', value: '100+' },
+  { label: 'Team Members', value: '25+' },
+]
+
+const values = [
+  {
+    icon: Target,
+    title: 'Results-Driven',
+    description: 'We focus on delivering measurable results that drive your business forward.'
+  },
+  {
+    icon: Users,
+    title: 'Client-Centric',
+    description: 'Your success is our priority. We work closely with you every step of the way.'
+  },
+  {
+    icon: Lightbulb,
+    title: 'Innovation',
+    description: 'We stay ahead of the curve with the latest technologies and best practices.'
+  },
+  {
+    icon: Award,
+    title: 'Quality',
+    description: 'We never compromise on quality and always deliver excellence.'
+  }
+]
+
+const teamMembers = [
+  {
+    name: 'Sarah Johnson',
+    role: 'CEO & Founder',
+    image: 'https://images.unsplash.com/photo-1494790108755-2616b612b77c?w=400&h=400&fit=crop&crop=face&auto=format&q=80',
+    bio: 'Visionary leader with 10+ years in digital transformation'
+  },
+  {
+    name: 'Michael Chen',
+    role: 'CTO',
+    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face&auto=format&q=80',
+    bio: 'Full-stack expert passionate about scalable architecture'
+  },
+  {
+    name: 'Emily Rodriguez',
+    role: 'Head of Design',
+    image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face&auto=format&q=80',
+    bio: 'UX/UI designer focused on user-centered design solutions'
+  }
+]
+
+export function AboutSection() {
+  return (
+    <section id="about" className="py-20 lg:py-32">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
+            About Us
+          </h2>
+          <p className="mt-4 text-lg text-muted-foreground max-w-3xl mx-auto">
+            We&apos;re a passionate team of developers, designers, and digital strategists 
+            committed to transforming ideas into exceptional digital experiences.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-16 lg:gap-24">
+          {/* Company Story */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="grid gap-12 lg:grid-cols-2 items-center"
+          >
+            <div className="space-y-6">
+              <div>
+                <Badge variant="secondary" className="mb-4">Our Story</Badge>
+                <h3 className="text-2xl font-bold mb-4">
+                  Building Digital Excellence Since 2016
+                </h3>
+                <p className="text-muted-foreground text-lg leading-relaxed">
+                  What started as a small team of passionate developers has grown into a 
+                  full-service digital agency. We&apos;ve helped startups launch their first 
+                  products and supported enterprises in their digital transformation journeys.
+                </p>
+              </div>
+              
+              <div className="space-y-3">
+                {[
+                  'Agile development methodology',
+                  'Transparent communication',
+                  'Continuous learning and improvement',
+                  '24/7 support and maintenance'
+                ].map((item, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0" />
+                    <span className="text-muted-foreground">{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="aspect-[4/3] rounded-2xl bg-gradient-to-br from-primary/10 to-secondary/10 overflow-hidden">
+                <Image
+                  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80"
+                  alt="Team working together"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                />
+              </div>
+              <div className="absolute -bottom-6 -right-6 bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-xl border border-border/50">
+                <div className="text-2xl font-bold">98%</div>
+                <div className="text-sm text-muted-foreground">Client Satisfaction</div>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Stats */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="grid grid-cols-2 gap-8 lg:grid-cols-4"
+          >
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="text-3xl lg:text-4xl font-bold text-primary mb-2">
+                  {stat.value}
+                </div>
+                <div className="text-sm text-muted-foreground">{stat.label}</div>
+              </div>
+            ))}
+          </motion.div>
+
+          {/* Values */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            <div className="text-center">
+              <Badge variant="secondary" className="mb-4">Our Values</Badge>
+              <h3 className="text-2xl font-bold">
+                What Drives Us Forward
+              </h3>
+            </div>
+            
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+              {values.map((value, index) => (
+                <Card key={index} className="text-center border-border/50 hover:border-border transition-colors">
+                  <CardContent className="p-6">
+                    <div className="flex justify-center mb-4">
+                      <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <value.icon className="h-6 w-6 text-primary" />
+                      </div>
+                    </div>
+                    <h4 className="font-semibold mb-2">{value.title}</h4>
+                    <p className="text-sm text-muted-foreground">{value.description}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Team */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            <div className="text-center">
+              <Badge variant="secondary" className="mb-4">Our Team</Badge>
+              <h3 className="text-2xl font-bold">
+                Meet the People Behind the Magic
+              </h3>
+            </div>
+            
+            <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {teamMembers.map((member, index) => (
+                <Card key={index} className="text-center border-border/50 overflow-hidden group hover:shadow-lg transition-all duration-300">
+                  <div className="aspect-square relative overflow-hidden">
+                    <Image
+                      src={member.image}
+                      alt={member.name}
+                      fill
+                      className="object-cover group-hover:scale-105 transition-transform duration-300"
+                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                  </div>
+                  <CardContent className="p-6">
+                    <h4 className="font-semibold text-lg">{member.name}</h4>
+                    <p className="text-primary text-sm font-medium mb-2">{member.role}</p>
+                    <p className="text-sm text-muted-foreground">{member.bio}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* CTA */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.5 }}
+            viewport={{ once: true }}
+            className="text-center"
+          >
+            <Card className="bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
+              <CardContent className="p-8 sm:p-12">
+                <h3 className="text-2xl font-bold mb-4">
+                  Ready to Work Together?
+                </h3>
+                <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
+                  Let&apos;s discuss how we can help transform your ideas into exceptional digital experiences.
+                </p>
+                <button
+                  onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
+                  className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90 hover:scale-105"
+                >
+                  Start Your Project
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/components/sections/contact-section.tsx b/components/sections/contact-section.tsx
new file mode 100644
index 0000000..8ef88cb
--- /dev/null
+++ b/components/sections/contact-section.tsx
@@ -0,0 +1,327 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { 
+  Mail, 
+  Phone, 
+  MapPin, 
+  Send, 
+  CheckCircle, 
+  AlertCircle,
+  Clock,
+  MessageSquare
+} from 'lucide-react'
+import { toast } from 'sonner'
+
+const contactSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Please enter a valid email address'),
+  company: z.string().optional(),
+  phone: z.string().optional(),
+  message: z.string().min(10, 'Message must be at least 10 characters'),
+  budget: z.enum(['5k-15k', '15k-50k', '50k-100k', '100k+', 'not-sure']).optional(),
+})
+
+type ContactFormData = z.infer<typeof contactSchema>
+
+const contactInfo = [
+  {
+    icon: Mail,
+    label: 'Email',
+    value: 'hello@agencypro.com',
+    href: 'mailto:hello@agencypro.com'
+  },
+  {
+    icon: Phone,
+    label: 'Phone',
+    value: '+1 (555) 123-4567',
+    href: 'tel:+15551234567'
+  },
+  {
+    icon: MapPin,
+    label: 'Office',
+    value: 'San Francisco, CA',
+    href: 'https://maps.google.com'
+  },
+  {
+    icon: Clock,
+    label: 'Hours',
+    value: 'Mon-Fri 9AM-6PM PST',
+    href: null
+  }
+]
+
+export function ContactSection() {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset
+  } = useForm<ContactFormData>({
+    resolver: zodResolver(contactSchema)
+  })
+
+  const onSubmit = async (data: ContactFormData) => {
+    setIsSubmitting(true)
+    setSubmitStatus('idle')
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to send message')
+      }
+
+      setSubmitStatus('success')
+      toast.success('Message sent successfully! We&apos;ll get back to you soon.')
+      reset()
+    } catch (error) {
+      console.error('Contact form error:', error)
+      setSubmitStatus('error')
+      toast.error('Failed to send message. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <section id="contact" className="py-20 lg:py-32 bg-muted/20">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
+            Get In Touch
+          </h2>
+          <p className="mt-4 text-lg text-muted-foreground max-w-3xl mx-auto">
+            Ready to bring your ideas to life? Let&apos;s discuss your project and see how 
+            we can help you achieve your goals.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-12 lg:grid-cols-2">
+          {/* Contact Form */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            viewport={{ once: true }}
+          >
+            <Card className="border-border/50">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MessageSquare className="h-5 w-5" />
+                  Send us a message
+                </CardTitle>
+                <CardDescription>
+                  Fill out the form below and we&apos;ll get back to you within 24 hours.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label htmlFor="name">Name *</Label>
+                      <Input
+                        id="name"
+                        {...register('name')}
+                        placeholder="Your full name"
+                        aria-invalid={errors.name ? 'true' : 'false'}
+                        className={errors.name ? 'border-red-500' : ''}
+                      />
+                      {errors.name && (
+                        <p className="text-sm text-red-500 flex items-center gap-1">
+                          <AlertCircle className="h-4 w-4" />
+                          {errors.name.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="email">Email *</Label>
+                      <Input
+                        id="email"
+                        type="email"
+                        {...register('email')}
+                        placeholder="your@email.com"
+                        aria-invalid={errors.email ? 'true' : 'false'}
+                        className={errors.email ? 'border-red-500' : ''}
+                      />
+                      {errors.email && (
+                        <p className="text-sm text-red-500 flex items-center gap-1">
+                          <AlertCircle className="h-4 w-4" />
+                          {errors.email.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label htmlFor="company">Company</Label>
+                      <Input
+                        id="company"
+                        {...register('company')}
+                        placeholder="Your company name"
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="phone">Phone</Label>
+                      <Input
+                        id="phone"
+                        type="tel"
+                        {...register('phone')}
+                        placeholder="+1 (555) 123-4567"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="budget">Project Budget</Label>
+                    <select
+                      id="budget"
+                      {...register('budget')}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      <option value="">Select a budget range</option>
+                      <option value="5k-15k">$5,000 - $15,000</option>
+                      <option value="15k-50k">$15,000 - $50,000</option>
+                      <option value="50k-100k">$50,000 - $100,000</option>
+                      <option value="100k+">$100,000+</option>
+                      <option value="not-sure">I&apos;m not sure yet</option>
+                    </select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="message">Message *</Label>
+                    <Textarea
+                      id="message"
+                      {...register('message')}
+                      placeholder="Tell us about your project, goals, and any specific requirements..."
+                      rows={5}
+                      aria-invalid={errors.message ? 'true' : 'false'}
+                      className={errors.message ? 'border-red-500' : ''}
+                    />
+                    {errors.message && (
+                      <p className="text-sm text-red-500 flex items-center gap-1">
+                        <AlertCircle className="h-4 w-4" />
+                        {errors.message.message}
+                      </p>
+                    )}
+                  </div>
+
+                  <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full gap-2 py-6 text-lg font-semibold"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                        Sending...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="h-5 w-5" />
+                        Send Message
+                      </>
+                    )}
+                  </Button>
+
+                  {submitStatus === 'success' && (
+                    <div className="flex items-center gap-2 text-green-600 bg-green-50 dark:bg-green-950/20 p-3 rounded-lg">
+                      <CheckCircle className="h-5 w-5" />
+                      <span>Message sent successfully! We&apos;ll get back to you soon.</span>
+                    </div>
+                  )}
+
+                  {submitStatus === 'error' && (
+                    <div className="flex items-center gap-2 text-red-600 bg-red-50 dark:bg-red-950/20 p-3 rounded-lg">
+                      <AlertCircle className="h-5 w-5" />
+                      <span>Failed to send message. Please try again or contact us directly.</span>
+                    </div>
+                  )}
+                </form>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Contact Info */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            <div>
+              <h3 className="text-2xl font-bold mb-4">Let&apos;s Start a Conversation</h3>
+              <p className="text-muted-foreground text-lg leading-relaxed">
+                We&apos;re here to help you succeed. Whether you have a specific project in mind 
+                or just want to explore possibilities, we&apos;d love to hear from you.
+              </p>
+            </div>
+
+            <div className="space-y-6">
+              {contactInfo.map((item, index) => (
+                <div key={index} className="flex items-start gap-4">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                    <item.icon className="h-6 w-6 text-primary" />
+                  </div>
+                  <div>
+                    <div className="font-medium">{item.label}</div>
+                    {item.href ? (
+                      <a
+                        href={item.href}
+                        className="text-muted-foreground hover:text-primary transition-colors"
+                        target={item.href.startsWith('http') ? '_blank' : undefined}
+                        rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                      >
+                        {item.value}
+                      </a>
+                    ) : (
+                      <div className="text-muted-foreground">{item.value}</div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <Card className="bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
+              <CardContent className="p-6">
+                <h4 className="font-semibold mb-2">Quick Response Guarantee</h4>
+                <p className="text-sm text-muted-foreground">
+                  We typically respond to new inquiries within 2-4 hours during business hours. 
+                  For urgent matters, don&apos;t hesitate to give us a call.
+                </p>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/components/sections/portfolio-section.tsx b/components/sections/portfolio-section.tsx
new file mode 100644
index 0000000..bd9bda3
--- /dev/null
+++ b/components/sections/portfolio-section.tsx
@@ -0,0 +1,147 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import { PortfolioCard } from '@/components/ui/portfolio-card'
+import { Button } from '@/components/ui/button'
+
+const portfolioProjects = [
+  {
+    title: 'E-Commerce Platform',
+    description: 'A full-featured online store with modern UI, secure payments, and inventory management.',
+    image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['Next.js', 'TypeScript', 'Stripe', 'Tailwind CSS', 'PostgreSQL'],
+    category: 'Web App',
+    liveUrl: 'https://example.com',
+    githubUrl: 'https://github.com/example/project'
+  },
+  {
+    title: 'SaaS Dashboard',
+    description: 'A comprehensive analytics dashboard with real-time data visualization and user management.',
+    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['React', 'D3.js', 'Node.js', 'MongoDB', 'Chart.js'],
+    category: 'Dashboard',
+    liveUrl: 'https://example.com',
+    githubUrl: 'https://github.com/example/project'
+  },
+  {
+    title: 'Mobile Banking App',
+    description: 'Secure mobile banking application with biometric authentication and real-time transactions.',
+    image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['React Native', 'Firebase', 'Redux', 'Expo'],
+    category: 'Mobile App',
+    liveUrl: 'https://example.com'
+  },
+  {
+    title: 'Corporate Website',
+    description: 'Modern corporate website with CMS integration and performance optimization.',
+    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['Next.js', 'Strapi', 'Tailwind CSS', 'Vercel'],
+    category: 'Website',
+    liveUrl: 'https://example.com',
+    githubUrl: 'https://github.com/example/project'
+  },
+  {
+    title: 'AI Chat Platform',
+    description: 'Intelligent chatbot platform with natural language processing and machine learning.',
+    image: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['Python', 'OpenAI', 'FastAPI', 'React', 'WebSocket'],
+    category: 'AI/ML',
+    liveUrl: 'https://example.com'
+  },
+  {
+    title: 'Healthcare Portal',
+    description: 'Patient management system with appointment scheduling and medical record management.',
+    image: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&crop=entropy&auto=format&q=80',
+    technologies: ['Vue.js', 'Laravel', 'MySQL', 'HIPAA Compliant'],
+    category: 'Web App',
+    liveUrl: 'https://example.com',
+    githubUrl: 'https://github.com/example/project'
+  }
+]
+
+const categories = ['All', 'Web App', 'Mobile App', 'Dashboard', 'Website', 'AI/ML']
+
+export function PortfolioSection() {
+  const [selectedCategory, setSelectedCategory] = useState('All')
+
+  const filteredProjects = selectedCategory === 'All' 
+    ? portfolioProjects 
+    : portfolioProjects.filter(project => project.category === selectedCategory)
+
+  return (
+    <section id="portfolio" className="py-20 lg:py-32 bg-muted/20">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
+            Our Work
+          </h2>
+          <p className="mt-4 text-lg text-muted-foreground max-w-3xl mx-auto">
+            Explore our portfolio of successful projects. From startups to enterprise solutions, 
+            we&apos;ve delivered exceptional digital experiences across various industries.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="flex flex-wrap justify-center gap-4 mb-12"
+        >
+          {categories.map((category) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? 'default' : 'outline'}
+              onClick={() => setSelectedCategory(category)}
+              className="transition-all duration-200"
+            >
+              {category}
+            </Button>
+          ))}
+        </motion.div>
+
+        <div className="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {filteredProjects.map((project, index) => (
+            <PortfolioCard
+              key={project.title}
+              title={project.title}
+              description={project.description}
+              image={project.image}
+              technologies={project.technologies}
+              category={project.category}
+              liveUrl={project.liveUrl}
+              githubUrl={project.githubUrl}
+              index={index}
+            />
+          ))}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <p className="text-muted-foreground mb-6">
+            Want to see more of our work or discuss your project?
+          </p>
+          <Button 
+            size="lg"
+            onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
+            className="gap-2 px-8 py-6 text-lg font-semibold"
+          >
+            Start Your Project
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/components/sections/services-section.tsx b/components/sections/services-section.tsx
new file mode 100644
index 0000000..1a8d6e2
--- /dev/null
+++ b/components/sections/services-section.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { ServiceCard } from '@/components/ui/service-card'
+import { 
+  Code, 
+  Smartphone, 
+  Globe, 
+  Database, 
+  Palette,
+  Search,
+  Users
+} from 'lucide-react'
+
+const services = [
+  {
+    icon: Code,
+    title: 'Web Development',
+    description: 'Custom web applications built with modern frameworks and best practices.',
+    features: [
+      'React & Next.js Development',
+      'Full-stack Solutions',
+      'API Integration',
+      'Performance Optimization'
+    ]
+  },
+  {
+    icon: Smartphone,
+    title: 'Mobile Development',
+    description: 'Native and cross-platform mobile apps that deliver exceptional user experiences.',
+    features: [
+      'iOS & Android Apps',
+      'React Native Development',
+      'Cross-platform Solutions',
+      'App Store Deployment'
+    ]
+  },
+  {
+    icon: Palette,
+    title: 'UI/UX Design',
+    description: 'Beautiful, intuitive designs that convert visitors into customers.',
+    features: [
+      'User Experience Research',
+      'Interface Design',
+      'Prototyping & Testing',
+      'Design Systems'
+    ]
+  },
+  {
+    icon: Globe,
+    title: 'E-commerce Solutions',
+    description: 'Complete online stores with secure payment processing and inventory management.',
+    features: [
+      'Shopify & Custom Stores',
+      'Payment Integration',
+      'Inventory Management',
+      'Order Processing'
+    ]
+  },
+  {
+    icon: Database,
+    title: 'Backend Services',
+    description: 'Scalable server infrastructure and database solutions for your applications.',
+    features: [
+      'Database Design',
+      'API Development',
+      'Cloud Infrastructure',
+      'Data Migration'
+    ]
+  },
+  {
+    icon: Search,
+    title: 'SEO & Marketing',
+    description: 'Digital marketing strategies to increase your online visibility and reach.',
+    features: [
+      'Search Engine Optimization',
+      'Content Marketing',
+      'Social Media Strategy',
+      'Analytics & Reporting'
+    ]
+  }
+]
+
+export function ServicesSection() {
+  return (
+    <section id="services" className="py-20 lg:py-32">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
+            Our Services
+          </h2>
+          <p className="mt-4 text-lg text-muted-foreground max-w-3xl mx-auto">
+            We deliver comprehensive digital solutions to help your business thrive in the digital world. 
+            From concept to deployment, we&apos;ve got you covered.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 sm:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {services.map((service, index) => (
+            <ServiceCard
+              key={service.title}
+              icon={service.icon}
+              title={service.title}
+              description={service.description}
+              features={service.features}
+              index={index}
+            />
+          ))}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <p className="text-muted-foreground mb-6">
+            Need something custom? We adapt our services to meet your specific requirements.
+          </p>
+          <button 
+            onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+          >
+            <Users className="h-4 w-4" />
+            Discuss Your Project
+          </button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/components/ui/animated-hero.tsx b/components/ui/animated-hero.tsx
index b47fa57..a7a1fee 100644
--- a/components/ui/animated-hero.tsx
+++ b/components/ui/animated-hero.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
-import { MoveRight, PhoneCall } from 'lucide-react'
+import { ArrowDown, MoveRight } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import Image from 'next/image'
 
 function Hero() {
   const [titleNumber, setTitleNumber] = useState(0)
-  const titles = useMemo(() => ['Modern', 'Full-stack', 'Secure', 'Scalable', 'Powerful'], [])
+  const titles = useMemo(() => ['Beautiful', 'Scalable', 'Modern', 'Powerful', 'Professional'], [])
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -15,67 +14,106 @@ function Hero() {
       } else {
         setTitleNumber(titleNumber + 1)
       }
-    }, 2000)
+    }, 2500)
     return () => clearTimeout(timeoutId)
   }, [titleNumber, titles])
 
+  const scrollToContact = () => {
+    const contactSection = document.getElementById('contact')
+    if (contactSection) {
+      contactSection.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
   return (
-    <div className="w-full">
-      <div className="container mx-auto">
-        <div className="flex flex-col items-center justify-center gap-8 py-20 lg:py-40">
-          <div>
-            <a
-              href="https://codeguide.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex flex-row items-center gap-2"
-            >
-              <Image src="/codeguide-logo.png" alt="CodeGuide" width={42} height={42} />
-              <span className="logo-text text-3xl font-bold">CodeGuide</span>
-            </a>
-          </div>
-          <div className="flex flex-col gap-4">
-            <h1 className="font-regular max-w-2xl text-center text-5xl tracking-tighter md:text-7xl">
-              <span className="relative flex w-full justify-center overflow-hidden text-center md:mb-1">
-                &nbsp;
-                {titles.map((title, index) => (
-                  <motion.span
-                    key={index}
-                    className="absolute font-semibold"
-                    initial={{ opacity: 0, y: '-100' }}
-                    transition={{ type: 'spring', stiffness: 50 }}
-                    animate={
-                      titleNumber === index
-                        ? {
-                            y: 0,
-                            opacity: 1,
-                          }
-                        : {
-                            y: titleNumber > index ? -150 : 150,
-                            opacity: 0,
-                          }
-                    }
-                  >
-                    {title}
-                  </motion.span>
-                ))}
-              </span>
-              <span className="text-spektr-cyan-50">Starter Kit Lite</span>
-            </h1>
+    <section id="hero" className="min-h-screen w-full bg-gradient-to-b from-background to-muted/20">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-center gap-12 py-20 lg:py-32">
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="flex flex-col items-center gap-8"
+          >
+            <div className="flex flex-row items-center gap-3 rounded-full bg-muted/50 px-4 py-2 backdrop-blur-sm">
+              <div className="h-2 w-2 rounded-full bg-green-500"></div>
+              <span className="text-sm text-muted-foreground">Trusted by 100+ businesses</span>
+            </div>
+
+            <div className="flex flex-col gap-6 text-center">
+              <h1 className="font-regular max-w-4xl text-4xl tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl">
+                Build
+                <span className="relative mx-4 inline-block overflow-hidden">
+                  {titles.map((title, index) => (
+                    <motion.span
+                      key={index}
+                      className="absolute inset-0 font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-transparent"
+                      initial={{ opacity: 0, y: 100 }}
+                      transition={{ type: 'spring', stiffness: 100, damping: 20 }}
+                      animate={
+                        titleNumber === index
+                          ? { y: 0, opacity: 1 }
+                          : { y: titleNumber > index ? -100 : 100, opacity: 0 }
+                      }
+                    >
+                      {title}
+                    </motion.span>
+                  ))}
+                </span>
+                <br />
+                Digital Solutions
+              </h1>
+
+              <p className="mx-auto max-w-3xl text-lg leading-relaxed tracking-tight text-muted-foreground sm:text-xl md:text-2xl">
+                We create exceptional web applications and digital experiences that drive growth. 
+                From concept to deployment, we bring your vision to life with cutting-edge technology 
+                and expert craftsmanship.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-4 sm:flex-row sm:gap-6">
+              <Button 
+                size="lg" 
+                className="group gap-2 px-8 py-6 text-lg font-semibold transition-all hover:scale-105"
+                onClick={scrollToContact}
+              >
+                Start Your Project
+                <MoveRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+              </Button>
+              <Button 
+                variant="outline" 
+                size="lg" 
+                className="gap-2 px-8 py-6 text-lg font-semibold"
+                onClick={() => document.getElementById('portfolio')?.scrollIntoView({ behavior: 'smooth' })}
+              >
+                View Our Work
+                <ArrowDown className="h-5 w-5" />
+              </Button>
+            </div>
+          </motion.div>
 
-            <p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:mt-8 md:text-xl">
-              Start building with a modern web application template featuring authentication,
-              database integration. Built with Next.js 14, Clerk, Supabase.
-            </p>
-          </div>
-          <div className="flex flex-row gap-3">
-            <Button size="lg" className="gap-4">
-              Get Started <MoveRight className="h-4 w-4" />
-            </Button>
-          </div>
+          <motion.div 
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="mt-12 grid w-full max-w-4xl grid-cols-1 gap-8 sm:grid-cols-3"
+          >
+            <div className="flex flex-col items-center gap-2 text-center">
+              <div className="text-3xl font-bold">50+</div>
+              <div className="text-sm text-muted-foreground">Projects Delivered</div>
+            </div>
+            <div className="flex flex-col items-center gap-2 text-center">
+              <div className="text-3xl font-bold">98%</div>
+              <div className="text-sm text-muted-foreground">Client Satisfaction</div>
+            </div>
+            <div className="flex flex-col items-center gap-2 text-center">
+              <div className="text-3xl font-bold">24/7</div>
+              <div className="text-sm text-muted-foreground">Support Available</div>
+            </div>
+          </motion.div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }
 
diff --git a/components/ui/portfolio-card.tsx b/components/ui/portfolio-card.tsx
new file mode 100644
index 0000000..4cb5062
--- /dev/null
+++ b/components/ui/portfolio-card.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { ExternalLink, Github } from 'lucide-react'
+import Image from 'next/image'
+import { useState } from 'react'
+
+interface PortfolioCardProps {
+  title: string
+  description: string
+  image: string
+  technologies: string[]
+  liveUrl?: string
+  githubUrl?: string
+  category: string
+  index: number
+}
+
+export function PortfolioCard({ 
+  title, 
+  description, 
+  image, 
+  technologies, 
+  liveUrl, 
+  githubUrl, 
+  category,
+  index 
+}: PortfolioCardProps) {
+  const [imageLoaded, setImageLoaded] = useState(false)
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className="group"
+    >
+      <Card className="overflow-hidden border-border/50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+        <div className="relative overflow-hidden">
+          <div className="aspect-video bg-muted">
+            <Image
+              src={image}
+              alt={title}
+              fill
+              className={`object-cover transition-transform duration-300 group-hover:scale-105 ${
+                imageLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+              onLoad={() => setImageLoaded(true)}
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
+            {!imageLoaded && (
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/10 animate-pulse" />
+            )}
+          </div>
+          <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4">
+            {liveUrl && (
+              <a
+                href={liveUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 rounded-lg bg-white/90 px-4 py-2 text-sm font-medium text-gray-900 transition-colors hover:bg-white"
+                aria-label={`View live demo of ${title}`}
+              >
+                <ExternalLink className="h-4 w-4" />
+                Live Demo
+              </a>
+            )}
+            {githubUrl && (
+              <a
+                href={githubUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 rounded-lg bg-gray-900/90 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-900"
+                aria-label={`View source code for ${title}`}
+              >
+                <Github className="h-4 w-4" />
+                Code
+              </a>
+            )}
+          </div>
+          <div className="absolute top-3 left-3">
+            <Badge variant="secondary" className="bg-white/90 text-gray-900">
+              {category}
+            </Badge>
+          </div>
+        </div>
+        <CardContent className="p-6">
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg font-semibold">{title}</h3>
+              <p className="text-sm text-muted-foreground mt-2">{description}</p>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {technologies.map((tech, techIndex) => (
+                <Badge 
+                  key={techIndex} 
+                  variant="outline" 
+                  className="text-xs"
+                >
+                  {tech}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  )
+}
\ No newline at end of file
diff --git a/components/ui/service-card.tsx b/components/ui/service-card.tsx
new file mode 100644
index 0000000..14be5e9
--- /dev/null
+++ b/components/ui/service-card.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { LucideIcon } from 'lucide-react'
+
+interface ServiceCardProps {
+  icon: LucideIcon
+  title: string
+  description: string
+  features: string[]
+  index: number
+}
+
+export function ServiceCard({ icon: Icon, title, description, features, index }: ServiceCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className="group h-full"
+    >
+      <Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border-border/50 hover:border-border">
+        <CardHeader className="space-y-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 transition-colors group-hover:bg-primary/20">
+            <Icon className="h-6 w-6 text-primary" />
+          </div>
+          <div>
+            <CardTitle className="text-xl font-semibold">{title}</CardTitle>
+            <CardDescription className="text-base text-muted-foreground mt-2">
+              {description}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <ul className="space-y-2">
+            {features.map((feature, featureIndex) => (
+              <li key={featureIndex} className="flex items-center text-sm text-muted-foreground">
+                <div className="mr-2 h-1.5 w-1.5 rounded-full bg-primary"></div>
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </motion.div>
+  )
+}
\ No newline at end of file
diff --git a/documentation/app_flowchart.md b/documentation/app_flowchart.md
new file mode 100644
index 0000000..4f0a2e7
--- /dev/null
+++ b/documentation/app_flowchart.md
@@ -0,0 +1,12 @@
+flowchart TD
+  layout[layout tsx] --> clerk[ClerkClientProvider]
+  clerk --> page[page tsx]
+  page --> services[Services Section]
+  page --> portfolio[Portfolio Section]
+  page --> contact[Contact Section]
+  page --> cta[CTA Section]
+  page --> ui[UI Component Library]
+  ui --> accordion[Accordion Component]
+  ui --> button[Button Component]
+  ui --> card[Card Component]
+  ui --> other[Other UI Components]
\ No newline at end of file
diff --git a/documentation/backend_structure_document.md b/documentation/backend_structure_document.md
new file mode 100644
index 0000000..3a65eeb
--- /dev/null
+++ b/documentation/backend_structure_document.md
@@ -0,0 +1,126 @@
+# Backend Structure Document
+
+This document outlines the backend setup for the **mvp-agency-landing** project. It covers architecture, data handling, APIs, hosting, infrastructure, security, and monitoring. The goal is to give a clear picture of how the backend works, even for readers without a deep technical background.
+
+## 1. Backend Architecture
+
+Overall, the backend is built on top of Next.js (version 13+). It uses the built-in API routes and server components to handle dynamic tasks. Key points:
+
+- Next.js App Router supports both server-side rendering (SSR) and static site generation (SSG). This ensures pages load quickly and can also update in real time when needed.  
+- API routes (under `/pages/api` or `/app/api`) provide small serverless functions for form submissions, health checks, etc.  
+- Clerk is integrated for authentication. Clerk runs as a managed service, so user management (sign-up, sign-in, sessions) is offloaded.
+
+How this supports project goals:
+- Scalability: Vercel’s serverless functions and Clerk’s infrastructure grow automatically with traffic.  
+- Maintainability: Code lives alongside the frontend. Teams can edit UI and related API code in one place.  
+- Performance: Pre-rendered pages (SSG) deliver instantly, while API calls stay lightweight.
+
+## 2. Database Management
+
+Currently, the project does **not** run its own database server. Instead:
+
+- User profiles and authentication data live in **Clerk** (a hosted authentication platform).  
+- Landing-page content is static, baked into the app at build time—no external database needed for text or images.  
+- Contact form submissions (if enabled) are sent via email or a third-party service (e.g., SendGrid) rather than stored in a database.
+
+This approach keeps the MVP simple and avoids database overhead. If the project expands, we can introduce a dedicated database later.
+
+## 3. Database Schema
+
+Since there is no self-hosted SQL or NoSQL database today, we rely on Clerk’s user store. Clerk’s default user schema includes fields like:
+
+•  **User ID** (unique identifier)
+•  **Email address**
+•  **Full name**
+•  **Profile picture URL**
+•  **Sign-up date**
+•  **Session tokens**
+
+If a future phase requires its own database (e.g., to track leads or orders), we would likely choose PostgreSQL. A simple user table might look like:
+
+    CREATE TABLE users (
+      id SERIAL PRIMARY KEY,
+      email VARCHAR(255) UNIQUE NOT NULL,
+      name VARCHAR(100),
+      created_at TIMESTAMP DEFAULT NOW()
+    );
+
+But for the current MVP, this is not in use.
+
+## 4. API Design and Endpoints
+
+We follow a RESTful style using Next.js API routes. Key endpoints:
+
+- **GET /api/health**  
+  Purpose: Quick status check to see if the backend is running.  
+  Returns: 200 OK with a simple JSON message.
+
+- **POST /api/contact**  
+  Purpose: Receive contact form submissions from the landing page.  
+  Input: `{ name, email, message }` in JSON.  
+  Processing: Sends an email to the agency or stores the message in a third-party tool.  
+  Returns: 200 OK on success, or 4xx on validation errors.
+
+- **(Protected) GET /api/user**  
+  Purpose: Fetch the current authenticated user’s profile.  
+  Authentication: Expects a Clerk session token.  
+  Returns: User details (ID, email, name).
+
+APIs sit alongside the UI code, making it easy to see how data flows from the page to the server.
+
+## 5. Hosting Solutions
+
+We host on **Vercel**, the platform made by the Next.js team. Benefits:
+
+- **Serverless functions** for API routes.  
+- **Global CDN** automatically distributes static assets and pre-rendered pages close to users.  
+- **Automatic scaling:** no manual server management.  
+- **Free tier** suitable for an MVP, with easy upgrade paths.
+
+DNS and SSL are handled automatically by Vercel, so we get HTTPS by default.
+
+## 6. Infrastructure Components
+
+Beyond Vercel and Clerk, the key pieces are:
+
+- **Edge Caching / CDN**  
+  Static assets (CSS, fonts, images) and SSG pages are cached at the edge for ultra-fast delivery.
+
+- **Serverless Functions**  
+  Next.js API routes spin up on demand. No idle servers mean lower cost.
+
+- **Third-Party Email Service** (e.g., SendGrid or Mailgun)  
+  Handles outbound emails from the contact form.
+
+- **Custom Domain & DNS**  
+  Pointed to Vercel. DNS managed through your registrar or a service like Cloudflare.
+
+## 7. Security Measures
+
+We follow best practices to keep user data safe:
+
+- **HTTPS everywhere:** Vercel provides SSL certificates automatically.  
+- **Clerk Authentication:** Secure, token-based sessions. Passwords and tokens never touch our code.  
+- **Environment Variables:** API keys and secrets (Clerk, email service) live in Vercel’s environment settings, not in code.  
+- **Input Validation:** All API routes validate incoming data to prevent injection attacks.  
+- **CORS & Headers:** We set appropriate HTTP headers (Content Security Policy, X-Frame-Options) via Next.js or a custom middleware.
+
+## 8. Monitoring and Maintenance
+
+To ensure reliability and catch issues early:
+
+- **Vercel Dashboard:** Real-time logs and function usage metrics.  
+- **Error Tracking (optional):** Services like Sentry can be added to catch runtime errors in both frontend and API code.  
+- **Uptime Checks:** Use a simple scheduled ping (e.g., UptimeRobot) on `/api/health`.  
+- **Dependency Updates:** Regularly run `npm audit` and keep Next.js and Clerk SDKs up to date.  
+- **Backups (future):** If a database is introduced, schedule automated backups.
+
+## 9. Conclusion and Overall Backend Summary
+
+This MVP backend is designed to be lightweight, cost-effective, and easy to maintain. By leveraging:
+
+- Next.js serverless functions for dynamic needs,  
+- Clerk for secure user management,  
+- Vercel for hosting and global delivery,  
+
+we achieve a setup that meets the agency landing page’s needs today while leaving clear paths for future growth. Should the project expand to include a full client portal, data tracking, or custom business logic, the foundation is in place to add a dedicated database, more API routes, and advanced monitoring—all without a major rework.
\ No newline at end of file
diff --git a/documentation/cursor_project_rules.mdc b/documentation/cursor_project_rules.mdc
new file mode 100644
index 0000000..616c30e
--- /dev/null
+++ b/documentation/cursor_project_rules.mdc
@@ -0,0 +1,107 @@
+---
+description: Apply these rules when making changes to the project
+globs:
+alwaysApply: true
+---
+
+Update this rule if user requested changes to the project requirement, etc.
+## Project Overview
+
+*   **Type:** cursor_project_rules
+*   **Description:** This repository, `mvp-agency-landing`, appears to be a minimal viable product (MVP) for an agency's landing page. Its primary purpose is to showcase information and potentially offer services, leveraging modern web technologies for a responsive and interactive user experience.
+*   **Primary Goal:** Showcase agency information and offer services through a responsive, interactive landing page using modern web technologies.
+
+## Project Structure
+
+### Framework-Specific Routing
+
+*   **Directory Rules:**
+    *   Next.js 13+ (App Router): `app/[route]/page.tsx` conventions
+    *   Example 1: "Next.js 14 (App Router)" → `app/[route]/page.tsx` conventions
+    *   Example 2: "Next.js (Pages Router)" → `pages/[route].tsx` pattern
+    *   Example 3: "React Router 6" → `src/routes/` with `createBrowserRouter`
+
+### Core Directories
+
+*   **Versioned Structure:**
+    *   `app/`: Next.js 13+ App Router entrypoint with nested routes and layouts
+    *   `components/ui`: Reusable UI components (accordions, buttons, cards) for scalable design system
+    *   `components/providers`: Context providers (ClerkClientProvider)
+    *   `fonts`: Custom typography assets (GeistMonoVF.woff, GeistVF.woff)
+    *   `app/globals.css`: Global styles and Tailwind CSS imports
+    *   `.cursor/`: Cursor AI assistant configuration and rules
+
+### Key Files
+
+*   **Stack-Versioned Patterns:**
+    *   `app/layout.tsx`: Next.js 13+ root layout for wrapping global providers and metadata
+    *   `app/page.tsx`: Main landing page component using server and client components
+    *   `components/providers/clerk-client-provider.tsx`: Clerk context initialization
+    *   `components/ui/button.tsx`: Utility-first styled button component (Tailwind CSS)
+    *   `.cursor/rules.mdc`: AI-driven linting and documentation rules
+
+## Tech Stack Rules
+
+*   **Version Enforcement:**
+    *   next@13+: App Router required, no `pages/` directory
+    *   tailwindcss@^3.0: Purge unused styles in production, configure theme in `tailwind.config.js`
+    *   @clerk/clerk-react@^4.x: Wrap app in `ClerkProvider`, enforce secure session management
+
+## PRD Compliance
+
+*   "Primary purpose is to showcase information and potentially offer services": Enforce SSR/SSG for SEO-critical sections
+
+## App Flow Integration
+
+*   **Stack-Aligned Flow:**
+    *   Next.js 13+ Auth Flow → `app/auth/login/page.tsx` uses server actions for sign-in
+    *   Clerk-protected client portal → `app/dashboard/layout.tsx` wraps content with `ClerkSecureRoute`
+
+## Best Practices
+
+*   Next.js 13+
+    *   Use App Router exclusively, avoid legacy pages/ directory
+    *   Leverage server components for data fetching and reduce client bundle size
+    *   Organize nested layouts for shared UI (headers, footers)
+
+*   Tailwind CSS
+    *   Purge unused classes via `content` paths in config
+    *   Use design tokens in `tailwind.config.js` for colors, spacing
+    *   Apply variants (responsive, hover, focus) for accessible styling
+
+*   Clerk
+    *   Wrap application root in `ClerkProvider` and use `useUser()` hook
+    *   Protect routes via server-side session checks in `middleware.ts`
+    *   Handle auth edge cases (session expiry, multi-factor auth)
+
+*   Cursor AI
+    *   Keep `.cursor/rules.mdc` in sync with evolving coding standards
+    *   Review AI suggestions and mark rules as disabled/enabled explicitly
+    *   Update documentation snippets in `.cursor` after major refactors
+
+## Rules
+
+*   Derive folder/file patterns directly from techStackDoc versions.
+*   If Next.js 14 App Router: Enforce `app/` directory with nested route folders.
+*   If Pages Router: Use `pages/*.tsx` flat structure.
+*   Mirror this logic for React Router, SvelteKit, etc.
+*   Never mix version patterns (e.g., no `pages/` in App Router projects).
+
+## Rules Metrics
+
+Before starting the project development, create a metrics file in the root of the project called
+
+`cursor_metrics.md`.
+
+### Instructions:
+
+*   Each time a cursor rule is used as context, update `cursor_metrics.md`.
+*   Use the following format for `cursor_metrics.md:` Rules Metrics (h1)
+
+Usage (h2)
+
+The number of times rules is used as context
+
+*   rule-name.mdc: 5
+*   another-rule.mdc: 2
+*   ...other rules
\ No newline at end of file
diff --git a/documentation/frontend_guidelines_document.md b/documentation/frontend_guidelines_document.md
new file mode 100644
index 0000000..7544521
--- /dev/null
+++ b/documentation/frontend_guidelines_document.md
@@ -0,0 +1,138 @@
+# Frontend Guideline Document
+
+This document outlines the frontend setup, architecture, and best practices for the `mvp-agency-landing` project. It uses plain language to make the concepts clear even if you don’t have a deep technical background.
+
+## 1. Frontend Architecture
+
+### Framework and Libraries
+- **Next.js 13+ (App Router)**: We rely on Next.js for its routing, server-side rendering (SSR), and static site generation (SSG). This gives us fast initial page loads, great SEO, and flexibility for dynamic or static content.
+- **React**: Under the hood, Next.js uses React. We build each UI piece as a React component (small, reusable building blocks).
+- **Clerk**: A third-party authentication service that handles sign-in, user sessions, and account management. We wrap our app in a Clerk provider so any part of the site can check who’s logged in.
+- **Tailwind CSS**: A utility-first styling framework. It helps us write clean, consistent styles quickly.
+
+### How It Supports Scalability, Maintainability, and Performance
+- **Scalability**: The app is split into small components. When new features come along—like a blog section or client portal—we can add pages and components without rewriting the whole site.
+- **Maintainability**: File-based routing (`app/` folder) keeps pages and layouts organized. Shared components live in `components/ui/`, so fixing or updating one button style updates every button.
+- **Performance**: Next.js automatically pre-renders pages, reduces bundle size with code splitting, and lets us lazy-load heavy parts (like large images or interactive widgets).
+
+---
+## 2. Design Principles
+
+### Usability
+- Clear calls-to-action (buttons, links) guide users step by step.
+- Logical content sections (hero, services, portfolio, contact).
+
+### Accessibility
+- Proper ARIA labels on interactive elements (accordions, buttons).
+- Keyboard-friendly navigation and focus management.
+- Sufficient color contrast for readability.
+
+### Responsiveness
+- Layouts adapt fluidly across mobile, tablet, and desktop.
+- Tailwind’s responsive utilities (`sm:`, `md:`, `lg:`) make adjusting styles for breakpoints straightforward.
+
+How We Apply These:
+- Every component is tested on various screen sizes.
+- We follow semantic HTML (using `<header>`, `<nav>`, `<main>`, `<section>`, etc.).
+- Interactive widgets include `role` and `aria-` attributes where needed.
+
+---
+## 3. Styling and Theming
+
+### Styling Approach
+- **Tailwind CSS**: We use Tailwind for all styling. No separate CSS files per component—styles live right alongside markup via class names.
+- **Global Styles**: A `globals.css` file holds base styles (fonts, body margin resets, CSS variables).
+
+### Theming
+- Tailwind’s config file defines our color palette and font choices so everything stays consistent.
+
+### Visual Style
+- Modern, flat design with a hint of depth (shadows) for interactive elements.
+
+### Color Palette
+- Primary: Indigo-600 (#4F46E5)
+- Secondary: Indigo-400 (#818CF8)
+- Accent: Teal-500 (#14B8A6)
+- Neutral Light: Gray-100 (#F3F4F6)
+- Neutral Dark: Gray-800 (#1F2937)
+
+### Typography
+- **Headings & Body**: Geist VF (loaded from `fonts/GeistVF.woff`)
+- **Monospace / Code**: Geist Mono VF (`fonts/GeistMonoVF.woff`)
+- Fallback: `system-ui`, `sans-serif`
+
+---
+## 4. Component Structure
+
+- All UI pieces live in `components/ui/`, organized by type (e.g., `button.tsx`, `card.tsx`, `accordion.tsx`).
+- We follow an atomic design mindset:
+  - **Atoms**: Buttons, Inputs, Icons
+  - **Molecules**: Card (combines image + text + button)
+  - **Organisms**: Hero section (combines card, heading, button)
+
+Why It Matters
+- **Reusability**: One button component works everywhere.
+- **Consistency**: Shared design language and behavior across the site.
+- **Maintainability**: Fix a bug in one place, and it’s fixed everywhere.
+
+---
+## 5. State Management
+
+- **Local State**: We use React’s built-in `useState` and `useEffect` for component-level state (e.g., toggling an accordion).
+- **Authentication State**: Managed by Clerk. The Clerk provider exposes user info and session status via React Context, so any component can check `isSignedIn` or `user`.
+- **Future Growth**: If we need more shared state (forms, shopping carts), we can add React Context or a lightweight library like Zustand.
+
+---
+## 6. Routing and Navigation
+
+- **File-Based Routing**: Every folder and file under `app/` becomes a route. For example, `app/page.tsx` is the homepage.
+- **Layouts**: `app/layout.tsx` wraps every page, providing global elements (header, footer, meta tags, Clerk provider).
+- **Linking**: We use `next/link` for client-side navigation—click a link, and the page changes without a full reload.
+
+User Flow
+- Users land on `/` (the main landing page).
+- Navigation links (in a header or footer) jump to page sections or future pages (e.g., `/contact`, `/portfolio`).
+
+---
+## 7. Performance Optimization
+
+- **SSR & SSG**: Next.js pre-renders pages for fast first loads and SEO.
+- **Code Splitting**: Only the code needed for each page loads.
+- **Lazy Loading**: Large images or widgets load when they scroll into view (`dynamic import` or `next/image`).
+- **Tailwind JIT**: Generates only the CSS we use, keeping the final stylesheet small.
+- **Font Loading**: We preload our custom fonts to avoid layout shifts.
+
+---
+## 8. Testing and Quality Assurance
+
+### Unit Tests
+- **Jest** + **React Testing Library**: Test individual components (e.g., button renders, accordion toggles).
+
+### Integration Tests
+- Test how multiple components work together (e.g., form input + submit button).
+
+### End-to-End (E2E) Tests
+- **Cypress** or **Playwright**: Simulate real user flows (navigating sections, submitting contact form).
+
+### Linting & Formatting
+- **ESLint**: Enforces code style and best practices.
+- **Prettier**: Auto-formats code for consistency.
+- **Pre-commit Hooks**: Run linting and tests before code is committed.
+
+---
+## 9. Developer Tooling and Code Quality
+
+- **Cursor AI**: An AI assistant integrated via the `.cursor/` directory to help with code suggestions, linting rules, and documentation snippets.
+- **Version Control**: Git with clear commit messages and pull request reviews.
+- **CI/CD**: Automatic builds and test runs on each push (e.g., via GitHub Actions).
+
+---
+## 10. Conclusion and Overall Frontend Summary
+
+This frontend setup leverages Next.js, React, and Tailwind CSS to deliver a fast, responsive, and maintainable agency landing page. Our component-based structure, clear design principles, and robust tooling ensure:
+
+- A consistent look and feel across the site.
+- Easy onboarding for new developers.
+- A foundation that scales as we add authentication, blogs, client portals, or other features.
+
+By following these guidelines, we keep our code organized, our users happy, and our development process smooth.
diff --git a/documentation/project_requirements_document.md b/documentation/project_requirements_document.md
new file mode 100644
index 0000000..285d13a
--- /dev/null
+++ b/documentation/project_requirements_document.md
@@ -0,0 +1,89 @@
+# Project Requirements Document (PRD)
+
+## 1. Project Overview
+
+mvp-agency-landing is a minimal viable product (MVP) for an agency’s public-facing landing page. Its goal is to present the agency’s brand, showcase services and portfolio items, and drive prospective clients to take action—whether that’s submitting a contact form, scheduling a call, or exploring service details. By using modern web technologies, it delivers a fast, responsive, and visually engaging experience across devices.
+
+This landing page is being built to establish an online presence quickly and cost-effectively, while laying the groundwork for future expansion—such as gated client portals, dynamic content management, or user accounts. The key success criteria for version one are: fast page load times (under 2 seconds), clear service presentation, a working contact form with email capture, consistent branding (fonts, colors), and mobile-friendly layout across common screen sizes.
+
+## 2. In-Scope vs. Out-of-Scope
+
+In-Scope (Version 1):
+- Static landing page with sections: Hero, Services, Portfolio, About, Contact
+- Responsive design for mobile, tablet, and desktop using Tailwind CSS
+- SEO optimization via Next.js static generation (SSG) and meta tags
+- Call-to-action (CTA) contact form that sends submissions via email or webhook
+- Custom typography (GeistMonoVF, GeistVF) loaded globally
+- UI component library (buttons, cards, accordions) under `components/ui/`
+- Clerk authentication scaffolding (no visible login UI yet, but configured)
+- Basic analytics integration (e.g., Google Analytics placeholder)
+- AI-assistant configuration files (`.cursor/`) for code quality checks
+
+Out-of-Scope (Future Phases):
+- Full user authentication flows (signup, login, password reset)
+- Client dashboard or gated content areas
+- Dynamic content management via headless CMS
+- Payment or subscription processing
+- Internationalization (i18n) or multi-language support
+- Advanced animations beyond basic CSS effects
+- End-to-end testing suites (to be added later)
+
+## 3. User Flow
+
+When a visitor arrives at the landing page, they see a full-width hero section with a headline, subheading, and a primary CTA button (e.g., “Get Started”). Scrolling down reveals distinct sections: a grid of core services (with icons or cards), a portfolio showcase with clickable project previews, a brief “About Us” blurb, and finally a contact section with a simple form (name, email, message fields). Global navigation or a sticky hamburger menu allows quick jumps to any section.
+
+If the visitor clicks the CTA or the “Contact Us” button, the page scrolls smoothly to the contact form in the footer. The visitor fills out their details and hits “Submit.” Upon submission, a loading spinner appears, the form data is sent to a configured endpoint or email service, and the visitor sees a confirmation message—“Thank you! We’ll be in touch soon.” Throughout, the layout adapts seamlessly from mobile to desktop, offering an optimal reading and interaction experience.
+
+## 4. Core Features
+
+- **Static Site Generation (SSG):** Use Next.js to pre-render pages at build time for speed and SEO.
+- **Responsive Design:** Utility-first CSS (Tailwind) ensures layouts adjust for all screen sizes.
+- **UI Component Library:** Pre-built, reusable components—buttons, cards, accordions, headers,
+- **Hero Section:** Attention-grabbing headline, subheadline, primary CTA button.
+- **Services Section:** Card-based layout describing agency offerings.
+- **Portfolio Section:** Visual showcase with project thumbnails and brief descriptions.
+- **Contact Form:** Name, email, message fields sending data to email/webhook.
+- **Custom Typography:** Global font imports and application for brand consistency.
+- **Clerk Setup:** Starter integration for future user authentication, wrapped in provider.
+- **SEO Tags & Metadata:** Proper `<title>`, `<meta>` descriptions, and Open Graph tags.
+- **Analytics Placeholder:** Script snippet for later integration of Google Analytics or similar.
+
+## 5. Tech Stack & Tools
+
+- **Frontend Framework:** Next.js 13+ (App Router) with React 18
+- **Styling:** Tailwind CSS for utility-first styling
+- **Authentication:** Clerk (client provider configured)
+- **Fonts:** Custom `.woff` files imported via Next.js `@next/font`
+- **AI Assistant:** Cursor.sh configuration in `.cursor/` for linting and code suggestions
+- **Build & Deployment:** Vercel (recommended) or Netlify
+- **Version Control:** GitHub repository
+- **Form Handling:** Next.js API Route or external API endpoint (e.g., Zapier webhook)
+
+## 6. Non-Functional Requirements
+
+- **Performance:** First contentful paint under 1.5s; total load time under 2s on 3G slow networks.
+- **SEO:** All sections indexable; structured data (JSON-LD) for organization and breadcrumbs.
+- **Accessibility (A11y):** WCAG 2.1 AA standards—semantic HTML, ARIA labels on interactive components, keyboard navigation.
+- **Security:** HTTPS-only, no sensitive data in code, Clerk authorization scaffolding.
+- **Usability:** Clear CTAs, consistent spacing, readable font sizes (16px+ body), mobile-friendly form inputs.
+
+## 7. Constraints & Assumptions
+
+- **Next.js Environment:** Assumes Node 16+ and Next.js 13+ feature support.
+- **Clerk Availability:** Clerk service must be available; placeholder keys used in development.
+- **Static Content:** All text and images are known at build time; dynamic CMS integration deferred.
+- **Font Licensing:** GeistMonoVF and GeistVF fonts are properly licensed for web embed.
+- **Analytics:** Placeholder code is safe; actual tracking IDs provided later.
+
+## 8. Known Issues & Potential Pitfalls
+
+- **Clerk Rate Limits:** Early integration may hit API limits; monitor dashboard and apply throttling.
+- **Form Spam:** Without CAPTCHA, contact form could attract spam. Consider adding reCAPTCHA later.
+- **Tailwind Purge:** Misconfiguration in `tailwind.config.js` may result in unused CSS not being purged, increasing bundle size.
+- **Image Optimization:** Large portfolio images could slow down the page if not optimized. Use Next.js `Image` component.
+- **SEO Overlook:** Missing Open Graph or Twitter Card tags can reduce social-sharing impact. Double-check metadata.
+
+
+---
+
+This document provides a clear, step-by-step outline for implementing the MVP landing page. Subsequent technical documents on file structure, frontend guidelines, and backend structure can reference these requirements without ambiguity. Let’s turn this PRD into a polished, live landing page!
\ No newline at end of file
diff --git a/documentation/security_guideline_document.md b/documentation/security_guideline_document.md
new file mode 100644
index 0000000..f9a419a
--- /dev/null
+++ b/documentation/security_guideline_document.md
@@ -0,0 +1,119 @@
+# Security Guidelines for `mvp-agency-landing`
+
+This document provides security-by-design guidance for the **mvp-agency-landing** repository—a Next.js 13+ based single-page landing application integrated with Clerk for future authentication. Follow these principles and recommendations to ensure a robust, maintainable, and secure codebase.
+
+---
+
+## 1. Security by Design
+- Embed security considerations into every phase: design, implementation, testing, and deployment.  
+- Review code against these guidelines during code reviews and automate checks (linters, CI gates).
+
+## 2. Authentication & Access Control
+
+### 2.1 Clerk Integration
+- Ensure the Clerk client provider is configured with environment variables (e.g., `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`) loaded via a secure secrets manager (do not commit them).  
+- Verify `ClerkProvider` wraps only the routes/components that truly require authentication.
+
+### 2.2 Session Management & JWT
+- Rely on Clerk’s best practices for session cookies. They should be `HttpOnly`, `Secure`, and have a reasonable expiration (`maxAge`).  
+- Avoid custom JWT handling—leverage Clerk’s built-in token validation and rotation.
+
+### 2.3 Least Privilege & Role-Based Access Control (RBAC)
+- If introducing roles (e.g., `admin`, `client`), define them centrally and enforce checks server-side in API routes or Next.js `middleware.ts`.  
+- Limit Clerk webhook access or API keys to only the scopes needed (e.g., user.read).
+
+## 3. Input Handling & Output Encoding
+
+### 3.1 Server-Side Validation
+- Validate all incoming data in **API routes** or **server actions** using a schema library (e.g., Zod).  
+- Never trust client-side sanitization alone.
+
+### 3.2 Prevent Injection Attacks
+- Use Next.js’s built-in Parameterized Queries or ORM (e.g., Prisma) when integrating databases in the future.  
+- Sanitize any dynamic values used in HTML or CSS (e.g., classNames).
+
+### 3.3 Mitigate XSS & Template Injection
+- When rendering user-supplied content (e.g., testimonials), apply React’s default escaping or a library like `dompurify` for rich text.  
+- Enforce a strict Content Security Policy (CSP) header via `next.config.js` or Vercel settings:
+  ```js
+  Content-Security-Policy:
+    default-src 'self';
+    script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' data:;
+  ```
+
+## 4. Data Protection & Privacy
+
+### 4.1 Transport Encryption
+- Enforce HTTPS (TLS 1.2+) for all traffic. Configure HSTS in Vercel or your hosting:
+  ```yaml
+  strictTransportSecurity:
+    maxAge: 63072000;
+    includeSubDomains: true;
+    preload: true;
+  ```
+
+### 4.2 Sensitive Data at Rest
+- Do not store PII or secrets in plaintext. If you integrate a database later, use field-level encryption or an encrypted volumes feature.  
+- Rely on Clerk for user credential storage (hashed with Argon2/bcrypt).
+
+### 4.3 Secrets Management
+- Store API keys and secrets in a managed vault or environment variables injected at runtime (Vercel Secrets, AWS Secrets Manager).  
+- Ensure `.env.local` is in `.gitignore`.
+
+## 5. API & Service Security
+
+### 5.1 Rate Limiting & Throttling
+- Implement basic rate limiting on any custom API routes (e.g., using `express-rate-limit` or Vercel Edge Middleware).  
+- Protect forms (e.g., contact form) from spam via CAPTCHA or honeypots.
+
+### 5.2 CORS & HTTP Methods
+- If the app exposes any JSON API, configure CORS to trusted origins only.  
+- Enforce correct HTTP verbs (`GET` for reads, `POST` for submissions).
+
+## 6. Web Application Security Hygiene
+
+### 6.1 Security Headers
+- Set the following headers in `next.config.js` or at the edge:
+  - `Strict-Transport-Security` (HSTS)
+  - `X-Content-Type-Options: nosniff`
+  - `X-Frame-Options: DENY`
+  - `Referrer-Policy: strict-origin-when-cross-origin`
+  - `Permissions-Policy: geolocation=(), microphone=()`
+
+### 6.2 CSRF Protection
+- If you later integrate server-rendered forms or state-changing API routes, use a CSRF token library like `next-csrf` or `csrf` middleware.
+
+### 6.3 Secure Cookies
+- Ensure any cookies you set include `Secure; HttpOnly; SameSite=Lax` at minimum.
+
+## 7. Infrastructure & Configuration Management
+
+### 7.1 Server Hardening
+- Disable default Next.js debugging in production (`NEXT_PUBLIC_NODE_ENV=production`).
+- Limit public file uploads—currently no upload feature, but if added, store files outside `public/` and scan them for malware.
+
+### 7.2 Dependency & Patch Management
+- Use a lockfile (`package-lock.json` or `yarn.lock`) and audit dependencies regularly (`npm audit`).  
+- Subscribe to vulnerability alerts for your repositories.
+
+## 8. Dependency Management
+
+- Vet all third-party UI/utility libraries. Prefer actively maintained packages.  
+- Remove unused dependencies to minimize the attack surface.  
+- Automate checks with SCA tools (e.g., GitHub Dependabot, Snyk).
+
+## 9. Testing & Monitoring
+
+- Write unit tests for security-sensitive code (Clerk wrapper, API routes).  
+- Implement end-to-end tests for authentication flows.  
+- Monitor runtime logs for unauthorized access attempts, using a centralized logging service.
+
+## 10. Accessibility & Performance (Supporting Security)
+- Enforce ARIA attributes on all interactive components (accordions, buttons) to prevent misuse.  
+- Ensure no sensitive data leaks through performance profiling or debug logs.
+
+---
+
+By following these guidelines, the **mvp-agency-landing** project will maintain a strong security posture, safeguarding both user data and application integrity while enabling future growth. Regularly review and update this document as the application evolves.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fd6ea0a..bc4e21e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,7 @@
       },
       "devDependencies": {
         "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/react": "18.3.23",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.23",
@@ -71,7 +71,7 @@
         "prettier": "^3.4.2",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5"
+        "typescript": "5.9.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -228,10 +228,11 @@
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
-      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
       },
@@ -2082,10 +2083,11 @@
       "devOptional": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
-      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2109,20 +2111,21 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.21.0.tgz",
-      "integrity": "sha512-eTH+UOR4I7WbdQnG4Z48ebIA6Bgi7WO8HvFEneeYBxG8qCOYgTOFPSg6ek9ITIDvGjDQzWHcoWHCDO2biByNzA==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.39.1.tgz",
+      "integrity": "sha512-yYegZ5n3Yr6eOcqgj2nJH8cH/ZZgF+l0YIdKILSDjYFRjgYQMgv/lRjV5Z7Up04b9VYUondt8EPMqg7kTWgJ2g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.21.0",
-        "@typescript-eslint/type-utils": "8.21.0",
-        "@typescript-eslint/utils": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0",
+        "@typescript-eslint/scope-manager": "8.39.1",
+        "@typescript-eslint/type-utils": "8.39.1",
+        "@typescript-eslint/utils": "8.39.1",
+        "@typescript-eslint/visitor-keys": "8.39.1",
         "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
+        "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.0.0"
+        "ts-api-utils": "^2.1.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2132,21 +2135,32 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "@typescript-eslint/parser": "^8.39.1",
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.21.0.tgz",
-      "integrity": "sha512-Wy+/sdEH9kI3w9civgACwabHbKl+qIOu0uFZ9IMKzX3Jpv9og0ZBJrZExGrPpFAY7rWsXuxs5e7CPPP17A4eYA==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.39.1.tgz",
+      "integrity": "sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.21.0",
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/typescript-estree": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0",
+        "@typescript-eslint/scope-manager": "8.39.1",
+        "@typescript-eslint/types": "8.39.1",
+        "@typescript-eslint/typescript-estree": "8.39.1",
+        "@typescript-eslint/visitor-keys": "8.39.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2158,17 +2172,40 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.39.1.tgz",
+      "integrity": "sha512-8fZxek3ONTwBu9ptw5nCKqZOSkXshZB7uAxuFF0J/wTMkKydjXCzqqga7MlFMpHi9DoG4BadhmTkITBcg8Aybw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.39.1",
+        "@typescript-eslint/types": "^8.39.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.21.0.tgz",
-      "integrity": "sha512-G3IBKz0/0IPfdeGRMbp+4rbjfSSdnGkXsM/pFZA8zM9t9klXDnB/YnKOBQ0GoPmoROa4bCq2NeHgJa5ydsQ4mA==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.39.1.tgz",
+      "integrity": "sha512-RkBKGBrjgskFGWuyUGz/EtD8AF/GW49S21J8dvMzpJitOF1slLEbbHnNEtAHtnDAnx8qDEdRrULRnWVx27wGBw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0"
+        "@typescript-eslint/types": "8.39.1",
+        "@typescript-eslint/visitor-keys": "8.39.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2178,16 +2215,35 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.39.1.tgz",
+      "integrity": "sha512-ePUPGVtTMR8XMU2Hee8kD0Pu4NDE1CN9Q1sxGSGd/mbOtGZDM7pnhXNJnzW63zk/q+Z54zVzj44HtwXln5CvHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.21.0.tgz",
-      "integrity": "sha512-95OsL6J2BtzoBxHicoXHxgk3z+9P3BEcQTpBKriqiYzLKnM2DeSqs+sndMKdamU8FosiadQFT3D+BSL9EKnAJQ==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.39.1.tgz",
+      "integrity": "sha512-gu9/ahyatyAdQbKeHnhT4R+y3YLtqqHyvkfDxaBYk97EcbfChSJXyaJnIL3ygUv7OuZatePHmQvuH5ru0lnVeA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.21.0",
-        "@typescript-eslint/utils": "8.21.0",
+        "@typescript-eslint/types": "8.39.1",
+        "@typescript-eslint/typescript-estree": "8.39.1",
+        "@typescript-eslint/utils": "8.39.1",
         "debug": "^4.3.4",
-        "ts-api-utils": "^2.0.0"
+        "ts-api-utils": "^2.1.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2198,14 +2254,15 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.21.0.tgz",
-      "integrity": "sha512-PAL6LUuQwotLW2a8VsySDBwYMm129vFm4tMVlylzdoTybTHaAi0oBp7Ac6LhSrHHOdLM3efH+nAR6hAWoMF89A==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.39.1.tgz",
+      "integrity": "sha512-7sPDKQQp+S11laqTrhHqeAbsCfMkwJMrV7oTDvtDds4mEofJYir414bYKUEb8YPUm9QL3U+8f6L6YExSoAGdQw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -2215,19 +2272,22 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.21.0.tgz",
-      "integrity": "sha512-x+aeKh/AjAArSauz0GiQZsjT8ciadNMHdkUSwBB9Z6PrKc/4knM4g3UfHml6oDJmKC88a6//cdxnO/+P2LkMcg==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.39.1.tgz",
+      "integrity": "sha512-EKkpcPuIux48dddVDXyQBlKdeTPMmALqBUbEk38McWv0qVEZwOpVJBi7ugK5qVNgeuYjGNQxrrnoM/5+TI/BPw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/visitor-keys": "8.21.0",
+        "@typescript-eslint/project-service": "8.39.1",
+        "@typescript-eslint/tsconfig-utils": "8.39.1",
+        "@typescript-eslint/types": "8.39.1",
+        "@typescript-eslint/visitor-keys": "8.39.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
         "minimatch": "^9.0.4",
         "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.0"
+        "ts-api-utils": "^2.1.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2237,14 +2297,15 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -2254,6 +2315,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -2265,15 +2327,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.21.0.tgz",
-      "integrity": "sha512-xcXBfcq0Kaxgj7dwejMbFyq7IOHgpNMtVuDveK7w3ZGwG9owKzhALVwKpTF2yrZmEwl9SWdetf3fxNzJQaVuxw==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.39.1.tgz",
+      "integrity": "sha512-VF5tZ2XnUSTuiqZFXCZfZs1cgkdd3O/sSYmdo2EpSyDlC86UM/8YytTmKnehOW3TGAlivqTDT6bS87B/GQ/jyg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.21.0",
-        "@typescript-eslint/types": "8.21.0",
-        "@typescript-eslint/typescript-estree": "8.21.0"
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.39.1",
+        "@typescript-eslint/types": "8.39.1",
+        "@typescript-eslint/typescript-estree": "8.39.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2284,17 +2347,18 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.21.0.tgz",
-      "integrity": "sha512-BkLMNpdV6prozk8LlyK/SOoWLmUFi+ZD+pcqti9ILCbVvHGk1ui1g4jJOc2WDLaeExz2qWwojxlPce5PljcT3w==",
+      "version": "8.39.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.39.1.tgz",
+      "integrity": "sha512-W8FQi6kEh2e8zVhQ0eeRnxdvIoOkAp/CPAahcNio6nO9dsIwb9b34z90KOlheoyuVf6LSOEdjlkxSkapNEc+4A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.21.0",
-        "eslint-visitor-keys": "^4.2.0"
+        "@typescript-eslint/types": "8.39.1",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2305,10 +2369,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -7332,10 +7397,11 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/ts-api-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.0.tgz",
-      "integrity": "sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18.12"
       },
@@ -7464,10 +7530,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index f72ddbc..15a3e04 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "18.3.23",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.23",
@@ -72,6 +72,6 @@
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "5.9.2"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index e7ff90f..d81d4ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }