[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.985 0.002 106.423); --foreground: oklch(0.189 0.015 285.885); --card: oklch(1 0 0); --card-foreground: oklch(0.189 0.015 285.885); --popover: oklch(1 0 0); --popover-foreground: oklch(0.189 0.015 285.885); --primary: oklch(0.553 0.186 264.436); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.189 0.015 285.885); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.922 0.002 106.423); --muted-foreground: oklch(0.506 0.013 285.885); --accent: oklch(0.677 0.195 142.495); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.863 0.002 106.423); --input: oklch(0.863 0.002 106.423); --ring: oklch(0.553 0.186 264.436); --chart-1: oklch(0.553 0.186 264.436); --chart-2: oklch(0.677 0.195 142.495); --chart-3: oklch(0.189 0.015 285.885); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.189 0.015 285.885); --sidebar-primary: oklch(0.553 0.186 264.436); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.922 0.002 106.423); --sidebar-accent-foreground: oklch(0.189 0.015 285.885); --sidebar-border: oklch(0.863 0.002 106.423); --sidebar-ring: oklch(0.553 0.186 264.436); } .dark { --background: oklch(0.145 0.008 285.885); --foreground: oklch(0.985 0.002 106.423); --card: oklch(0.189 0.015 285.885); --card-foreground: oklch(0.985 0.002 106.423); --popover: oklch(0.189 0.015 285.885); --popover-foreground: oklch(0.985 0.002 106.423); --primary: oklch(0.553 0.186 264.436); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.269 0.015 285.885); --secondary-foreground: oklch(0.985 0.002 106.423); --muted: oklch(0.269 0.015 285.885); --muted-foreground: oklch(0.708 0.008 285.885); --accent: oklch(0.677 0.195 142.495); --accent-foreground: oklch(0.145 0.008 285.885); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.985 0.002 106.423); --border: oklch(0.269 0.015 285.885); --input: oklch(0.269 0.015 285.885); --ring: oklch(0.553 0.186 264.436); --chart-1: oklch(0.553 0.186 264.436); --chart-2: oklch(0.677 0.195 142.495); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.189 0.015 285.885); --sidebar-foreground: oklch(0.985 0.002 106.423); --sidebar-primary: oklch(0.553 0.186 264.436); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.269 0.015 285.885); --sidebar-accent-foreground: oklch(0.985 0.002 106.423); --sidebar-border: oklch(0.269 0.015 285.885); --sidebar-ring: oklch(0.553 0.186 264.436); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Header } from "@/components/header" import { Hero } from "@/components/hero" import { Services } from "@/components/services" import { About } from "@/components/about" import { Testimonials } from "@/components/testimonials" import { Contact } from "@/components/contact" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Car, Shield, Award } from "lucide-react" export function Hero() { return (

Learn to Drive with Confidence

Professional driving instruction tailored to your needs. Whether you're a complete beginner or need a refresher, we'll help you become a safe, confident driver.

500+

Students Passed

98%

Pass Rate

15+

Years Experience

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Star } from "lucide-react" const testimonials = [ { name: "Emily Rodriguez", role: "First-time driver", content: "Sarah was absolutely amazing! I was so nervous about learning to drive, but she made me feel comfortable from day one. Passed my test first time!", rating: 5, }, { name: "Michael Chen", role: "Passed after 18 lessons", content: "Professional, patient, and knowledgeable. The structured lessons really helped me build confidence. Highly recommend to anyone learning to drive.", rating: 5, }, { name: "Jessica Thompson", role: "Refresher course student", content: "After not driving for 5 years, I needed a refresher. Sarah helped me regain my confidence on the road. Excellent instructor!", rating: 5, }, ] export function Testimonials() { return (

What Students Say

Don't just take our word for it. Here's what our students have to say about their experience.

{testimonials.map((testimonial) => (

{Array.from({ length: testimonial.rating }).map((_, i) => ( ))}

"{testimonial.content}"

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]jpg:file="public/professional-driving-instructor-in-modern-car-teac.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-driving-instructor-in-modern-car-teac-i8PZEH9rbKAVvlVcvASzTFZ5sS9vgE.jpg" isMerged="true" [V0_FILE]jpg:file="public/friendly-certified-driving-instructor-portrait-pro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/friendly-certified-driving-instructor-portrait-pro-Uu6SIpY80BwZA7abvQUPaSUGPOM8UP.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/images/senti.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_0096-Awwz2Zk91jNsGvUSZrDr1idqabOTZi.png" isMerged="true" [V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" const packages = [ { name: "Single Session", price: "$200", priceNote: "per session", description: "Pay as you go lessons", features: [ "1-hour driving lesson", "Personalized instruction", "Pick your own dates", "All skill levels welcome", "Free pickup and drop-off", ], }, { name: "Class N License", price: "$1,600", priceNote: "8 sessions included", description: "Novice license preparation", features: [ "8 hours of instruction", "Class N road test prep", "Basic to intermediate skills", "Parking & maneuvering", "Mock road test included", "You choose your schedule", ], popular: true, }, { name: "Full License", price: "$2,400", priceNote: "12 sessions included", description: "Complete license preparation", features: [ "12 hours of instruction", "Full license road test prep", "Highway & advanced driving", "All scenarios covered", "Multiple mock tests", "Flexible scheduling", ], }, ] export function Services() { return (

Choose Your Learning Path

Flexible packages designed to fit your schedule and learning pace. All packages include modern, dual-control vehicles.

{packages.map((pkg) => ( {pkg.popular && (

Ready to Get Started?

Book your first lesson today or get in touch if you have any questions. We're here to help!

Send us a message Fill out the form below and we'll get back to you within 24 hours

Name setFormData({ ...formData, name: e.target.value })} required />

Email setFormData({ ...formData, email: e.target.value })} required />

Phone setFormData({ ...formData, phone: e.target.value })} required />

Message

setFormData({ ...formData, message: e.target.value })}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full">
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Contact Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-start gap-3">
                  <Phone className="w-5 h-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Phone</p>
                    <p className="text-sm text-muted-foreground">(604) 346-8847</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Mail className="w-5 h-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Email</p>
                    <p className="text-sm text-muted-foreground">sentijassal@gmail.com</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <MapPin className="w-5 h-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <p className="font-medium text-sm">Service Area</p>
                    <p className="text-sm text-muted-foreground">Surrey Area</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-primary text-primary-foreground">
              <CardContent className="pt-6">
                <p className="font-semibold mb-2">Flexible Scheduling</p>
                <div className="space-y-2 text-sm">
                  <p>You pick your own dates and times!</p>
                  <p className="text-primary-foreground/80">Sign up and let me know which dates work best for you. I'll accommodate your schedule.</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/images/instructor.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/instructor-aM1UMCb8rpgudNoVXragqzaGDFdbAV.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/senti.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_2209-yXnJDbfRA10hmPHFahpogEBPzfGFDN.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true"
import { Award, BookOpen, Clock, Users } from "lucide-react"

const features = [
  {
    icon: Award,
    title: "Certified Professional",
    description: "Fully qualified ADI (Approved Driving Instructor) with advanced training certifications.",
  },
  {
    icon: Users,
    title: "Patient & Friendly",
    description: "Creating a comfortable learning environment where you can progress at your own pace.",
  },
  {
    icon: Clock,
    title: "Flexible Schedule",
    description: "Early morning, evening, and weekend slots available to fit your busy lifestyle.",
  },
  {
    icon: BookOpen,
    title: "Comprehensive Training",
    description: "From basic controls to advanced maneuvers, we cover everything you need to pass.",
  },
]

export function About() {
  return (
    <section id="about" className="py-20 px-4 lg:px-8">
      <div className="container mx-auto">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="relative order-2 lg:order-1">
            <img
              src="/images/senti.jpg"
              alt="Senti - Professional Driving Instructor"
              className="rounded-2xl w-full h-auto shadow-xl object-cover"
            />
          </div>

<div className="space-y-6 order-1 lg:order-2">
            <h2 className="text-3xl md:text-4xl font-bold text-balance">Meet Your Instructor</h2>
            <p className="text-lg text-muted-foreground leading-relaxed">
              Hi, I'm Senti, and I'm passionate about helping new drivers gain confidence on the road. My mission is simple: to
              help you become a safe, skilled driver who feels comfortable behind the wheel.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              I believe that everyone learns differently, so I tailor each lesson to your individual needs and learning
              style. Whether you're preparing for your Class N or going for your full license, I'm here to guide you every step of the way with patience and expertise.
            </p>

<div className="grid sm:grid-cols-2 gap-6 pt-4">
              {features.map((feature) => (
                <div key={feature.title} className="space-y-2">
                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                    <feature.icon className="w-6 h-6 text-primary" />
                  </div>
                  <h3 className="font-semibold">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Driving Lessons with Senti - Expert Driving Instructor in Surrey",
  description:
    "Professional driving instruction with Senti in Surrey. Learn to drive safely and confidently with personalized lessons for Class N and full license.",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { useState } from "react"

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b border-border">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
              <span className="text-primary-foreground font-bold text-xl">S</span>
            </div>
            <span className="font-semibold text-lg">Driving Lessons with Senti</span>
          </div>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-8">
            <a href="#services" className="text-sm font-medium text-foreground hover:text-primary transition-colors">
              Services
            </a>
            <a href="#about" className="text-sm font-medium text-foreground hover:text-primary transition-colors">
              About
            </a>
            <a
              href="#testimonials"
              className="text-sm font-medium text-foreground hover:text-primary transition-colors"
            >
              Testimonials
            </a>
            <a href="#contact" className="text-sm font-medium text-foreground hover:text-primary transition-colors">
              Contact
            </a>
          </nav>

<div className="hidden md:block">
            <Button asChild>
              <a href="#contact">Book a Lesson</a>
            </Button>
          </div>

{/* Mobile Menu Button */}
          <button className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} aria-label="Toggle menu">
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

{/* Mobile Navigation */}
        {mobileMenuOpen && (
          <nav className="md:hidden py-4 space-y-4">
            <a
              href="#services"
              className="block text-sm font-medium text-foreground hover:text-primary transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              Services
            </a>
            <a
              href="#about"
              className="block text-sm font-medium text-foreground hover:text-primary transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              About
            </a>
            <a
              href="#testimonials"
              className="block text-sm font-medium text-foreground hover:text-primary transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              Testimonials
            </a>
            <a
              href="#contact"
              className="block text-sm font-medium text-foreground hover:text-primary transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              Contact
            </a>
            <Button asChild className="w-full">
              <a href="#contact" onClick={() => setMobileMenuOpen(false)}>
                Book a Lesson
              </a>
            </Button>
          </nav>
        )}
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
export function Footer() {
  return (
    <footer className="bg-secondary text-secondary-foreground py-12 px-4 lg:px-8">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-4 gap-8 mb-8">
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                <span className="text-primary-foreground font-bold text-xl">S</span>
              </div>
              <span className="font-semibold text-lg">Driving Lessons with Senti</span>
            </div>
            <p className="text-sm text-secondary-foreground/80 leading-relaxed">
              Professional driving instruction helping students become confident, safe drivers.
            </p>
          </div>

<div>
            <h3 className="font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="#services"
                  className="text-secondary-foreground/80 hover:text-secondary-foreground transition-colors"
                >
                  Services
                </a>
              </li>
              <li>
                <a
                  href="#about"
                  className="text-secondary-foreground/80 hover:text-secondary-foreground transition-colors"
                >
                  About
                </a>
              </li>
              <li>
                <a
                  href="#testimonials"
                  className="text-secondary-foreground/80 hover:text-secondary-foreground transition-colors"
                >
                  Testimonials
                </a>
              </li>
              <li>
                <a
                  href="#contact"
                  className="text-secondary-foreground/80 hover:text-secondary-foreground transition-colors"
                >
                  Contact
                </a>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold mb-4">Services</h3>
            <ul className="space-y-2 text-sm text-secondary-foreground/80">
              <li>Single Sessions - $200</li>
              <li>Class N Preparation</li>
              <li>Full License Training</li>
              <li>Flexible Scheduling</li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold mb-4">Contact</h3>
            <ul className="space-y-2 text-sm text-secondary-foreground/80">
              <li>(604) 346-8847</li>
              <li>sentijassal@gmail.com</li>
              <li>Surrey Area</li>
            </ul>
          </div>
        </div>

<div className="border-t border-secondary-foreground/10 pt-8 text-center text-sm text-secondary-foreground/60">
          <p>© {new Date().getFullYear()} Driving Lessons with Senti. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}</article></body></html>