[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "ProGrowth Labs - Curated Peer Mentorship for Early Professionals", description: "Join curated peer-learning groups, mentorship, and accountability programs to help early-career professionals, freelancers, and startup founders grow faster in Pakistan.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67", "swr": "2.3.6" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { Users, UserCheck, Calendar, Target, MessageCircle, TrendingUp, ArrowRight, CheckCircle, Clock, MapPin, } from "lucide-react" export default function HowItWorksPage() { return (

{/* Hero Section */}

Simple Process, Powerful Results

How ProGrowth Labs Works

From application to growth acceleration - discover our proven methodology for peer mentorship and professional development in Pakistan.

{/* Process Steps */}

Your Journey in 4 Simple Steps

We've designed a streamlined process to get you connected and growing quickly.

Apply & Get Matched

Complete our application form. We'll review your background, goals, and preferences to find your perfect peer circle.

Join Your Circle

Meet your 6-8 peer circle members in a curated group based on experience level, industry, and growth objectives.

Attend Sessions

Participate in bi-weekly accountability sessions, share challenges, celebrate wins, and get actionable feedback.

Track & Grow

Monitor your progress through our dashboard, access mentors for 1:1 guidance, and achieve your professional goals.

{/* Detailed Breakdown */}

Peer Circles: The Heart of Growth

Our curated peer circles are small, focused groups designed for maximum impact and meaningful connections.

Small Group Size (6-8 Members)

Intimate groups ensure everyone gets attention and can build genuine relationships.

Goal-Oriented Matching

Members are matched based on career stage, industry focus, and specific growth objectives.

Bi-weekly Sessions

Regular 90-minute sessions focused on accountability, problem-solving, and peer learning.

What Happens in Each Session?

Check-in on previous goals and commitments

Share current challenges and roadblocks

Collaborative problem-solving and brainstorming

Set actionable goals for the next two weeks

Peer feedback and accountability partnerships

{/* Mentorship Section */}

Expert Mentorship Access

1:1 Mentor Sessions

Monthly sessions with industry experts

Strategic Guidance

Career planning and business strategy advice

Network Introductions

Connect with relevant industry contacts

Skill Development

Personalized learning recommendations

Beyond Peer Learning

Access our network of experienced mentors from Pakistan's leading companies and successful startups.

Industry Expertise

Our mentors span technology, finance, marketing, entrepreneurship, and other key sectors in Pakistan.

Real-World Experience

Learn from professionals who have navigated the Pakistani market and built successful careers.

Ongoing Support

Get guidance not just during sessions, but throughout your professional journey.

{/* Location & Format */}

Available Across Pakistan

Join circles in major cities with both in-person and virtual options.

Lahore

In-person circles meeting in central locations with virtual backup options.

5 Active Circles

Karachi

Multiple circles across different areas of the city for easy accessibility.

3 Active Circles

Islamabad

Growing community with hybrid meeting formats for maximum flexibility.

2 Active Circles

{/* CTA Section */}

Ready to Start Your Growth Journey?

Join our free pilot program and experience the power of curated peer mentorship.

) } [V0_FILE]typescriptreact:file="app/join-member/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Users, Target, Clock, CheckCircle, ArrowRight } from "lucide-react" export default function JoinMemberPage() { return (

{/* Hero Section */}

Free Pilot Program - Limited Spots

Join as a Member

Apply to join our curated peer circles and accelerate your professional growth with like-minded individuals in Pakistan.

{/* Benefits Section */}

What You'll Get as a Member

Everything you need to accelerate your professional growth and build meaningful connections.

Peer Circle Access

Join a curated group of 6-8 professionals

Goal Tracking

Dashboard to monitor your progress and achievements

Bi-weekly Sessions

Regular accountability and growth sessions

Mentor Access

1:1 sessions with industry experts

{/* Application Form */}

Member Application

Tell us about yourself so we can match you with the perfect peer circle.

Application Form

First Name *

Last Name *

Email Address *

Phone Number *

City *

Years of Experience *

Current Role/Profession *

Industry *

Professional Goals *

</div>

<div className="space-y-2">
                  <Label htmlFor="challenges">Current Challenges</Label>
                  <Textarea
                    id="challenges"
                    placeholder="What are the biggest challenges you're facing in your career or business right now?"
                    rows={3}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="availability">Preferred Meeting Time *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="When are you available for bi-weekly sessions?" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="weekday-morning">Weekday Mornings</SelectItem>
                      <SelectItem value="weekday-evening">Weekday Evenings</SelectItem>
                      <SelectItem value="weekend-morning">Weekend Mornings</SelectItem>
                      <SelectItem value="weekend-evening">Weekend Evenings</SelectItem>
                      <SelectItem value="flexible">Flexible</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="format">Preferred Format *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="How would you like to attend sessions?" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="in-person">In-person only</SelectItem>
                      <SelectItem value="virtual">Virtual only</SelectItem>
                      <SelectItem value="hybrid">Hybrid (both)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="referral">How did you hear about us?</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select referral source" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="social-media">Social Media</SelectItem>
                      <SelectItem value="friend">Friend/Colleague</SelectItem>
                      <SelectItem value="search">Google Search</SelectItem>
                      <SelectItem value="event">Event/Conference</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox id="terms" />
                  <Label htmlFor="terms" className="text-sm">
                    I agree to the terms and conditions and privacy policy *
                  </Label>
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox id="updates" />
                  <Label htmlFor="updates" className="text-sm">
                    I'd like to receive updates about ProGrowth Labs programs and events
                  </Label>
                </div>

<Button className="w-full" size="lg">
                  Submit Application
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>

<p className="text-sm text-muted-foreground text-center">
                  We'll review your application and get back to you within 3-5 business days.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/join-business/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Building, Users, TrendingUp, Target, CheckCircle, ArrowRight, Briefcase } from "lucide-react"

export default function JoinBusinessPage() {
  return (
    <div className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="py-20 lg:py-32">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="secondary" className="mb-6">
              Partnership Opportunities Available
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-balance mb-6">
              Partner with <span className="text-primary">ProGrowth Labs</span>
            </h1>
            <p className="text-xl text-muted-foreground text-balance mb-8 max-w-2xl mx-auto">
              Connect with Pakistan's most ambitious professionals through mentorship, upskilling programs, and talent
              partnerships.
            </p>
          </div>
        </div>
      </section>

{/* Partnership Benefits */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Why Partner with ProGrowth Labs?</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Access top talent, provide mentorship, and contribute to Pakistan's professional development ecosystem.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                  <Users className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Access Top Talent</h3>
                <p className="text-muted-foreground">
                  Connect with pre-screened, motivated professionals actively working on their growth and development.
                </p>
              </CardContent>
            </Card>

<Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                  <TrendingUp className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Brand Visibility</h3>
                <p className="text-muted-foreground">
                  Increase your company's visibility among Pakistan's emerging professional community.
                </p>
              </CardContent>
            </Card>

<Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                  <Target className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Team Development</h3>
                <p className="text-muted-foreground">
                  Upskill your existing team through our structured peer learning and mentorship programs.
                </p>
              </CardContent>
            </Card>

<Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                  <Building className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Corporate Social Impact</h3>
                <p className="text-muted-foreground">
                  Contribute to Pakistan's professional development and build a positive corporate reputation.
                </p>
              </CardContent>
            </Card>

<Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                  <Briefcase className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Project Partnerships</h3>
                <p className="text-muted-foreground">
                  Collaborate on real-world projects with our member community for mutual benefit.
                </p>
              </CardContent>
            </Card>

<Card className="border-0 shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8">
                <div className="h-12 w-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                  <CheckCircle className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Flexible Engagement</h3>
                <p className="text-muted-foreground">
                  Choose from various partnership models that fit your company's goals and resources.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Partnership Types */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Partnership Opportunities</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Multiple ways to engage with our community based on your business objectives.
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            <Card className="relative">
              <CardHeader>
                <Badge className="w-fit mb-2">Most Popular</Badge>
                <CardTitle className="text-2xl">Mentorship Partner</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-muted-foreground">
                  Provide expert mentors from your team to guide our members in their professional development.
                </p>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Monthly mentor sessions</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Brand recognition in community</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Access to talent pipeline</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Quarterly impact reports</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-2xl">Upskilling Partner</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-muted-foreground">
                  Sponsor training programs and workshops for our member community and your own team.
                </p>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Custom training programs</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Team development sessions</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Skills assessment tools</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Progress tracking dashboard</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-2xl">Project Partner</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-muted-foreground">
                  Collaborate on real-world projects with our members for practical experience and business value.
                </p>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Project-based collaboration</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Access to diverse skill sets</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Cost-effective solutions</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-primary" />
                    <span className="text-sm">Talent evaluation opportunity</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Business Application Form */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">Business Partnership Application</h2>
              <p className="text-muted-foreground">
                Tell us about your company and how you'd like to partner with ProGrowth Labs.
              </p>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Partnership Application</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="companyName">Company Name *</Label>
                  <Input id="companyName" placeholder="Enter your company name" />
                </div>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="contactName">Contact Person *</Label>
                    <Input id="contactName" placeholder="Your full name" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="jobTitle">Job Title *</Label>
                    <Input id="jobTitle" placeholder="Your position" />
                  </div>
                </div>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="businessEmail">Business Email *</Label>
                    <Input id="businessEmail" type="email" placeholder="contact@company.com" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="businessPhone">Phone Number *</Label>
                    <Input id="businessPhone" placeholder="+92 21 1234567" />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="website">Company Website</Label>
                  <Input id="website" placeholder="https://www.company.com" />
                </div>

<div className="space-y-2">
                  <Label htmlFor="companySize">Company Size *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select company size" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1-10">1-10 employees</SelectItem>
                      <SelectItem value="11-50">11-50 employees</SelectItem>
                      <SelectItem value="51-200">51-200 employees</SelectItem>
                      <SelectItem value="201-500">201-500 employees</SelectItem>
                      <SelectItem value="500+">500+ employees</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="businessIndustry">Industry *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select your industry" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="technology">Technology</SelectItem>
                      <SelectItem value="finance">Finance & Banking</SelectItem>
                      <SelectItem value="consulting">Consulting</SelectItem>
                      <SelectItem value="healthcare">Healthcare</SelectItem>
                      <SelectItem value="education">Education</SelectItem>
                      <SelectItem value="ecommerce">E-commerce</SelectItem>
                      <SelectItem value="manufacturing">Manufacturing</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="partnershipType">Partnership Interest *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="What type of partnership interests you?" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="mentorship">Mentorship Partner</SelectItem>
                      <SelectItem value="upskilling">Upskilling Partner</SelectItem>
                      <SelectItem value="project">Project Partner</SelectItem>
                      <SelectItem value="multiple">Multiple Partnership Types</SelectItem>
                      <SelectItem value="custom">Custom Partnership</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="objectives">Partnership Objectives *</Label>
                  <Textarea
                    id="objectives"
                    placeholder="What are your main objectives for partnering with ProGrowth Labs? What do you hope to achieve?"
                    rows={4}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="resources">Available Resources</Label>
                  <Textarea
                    id="resources"
                    placeholder="What resources can your company contribute? (e.g., mentors, training programs, project opportunities, funding)"
                    rows={3}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="timeline">Preferred Timeline *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="When would you like to start the partnership?" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="immediate">Immediately</SelectItem>
                      <SelectItem value="1-month">Within 1 month</SelectItem>
                      <SelectItem value="3-months">Within 3 months</SelectItem>
                      <SelectItem value="6-months">Within 6 months</SelectItem>
                      <SelectItem value="flexible">Flexible</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="budget">Budget Range (Optional)</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="What's your approximate budget for this partnership?" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="under-100k">Under PKR 100,000</SelectItem>
                      <SelectItem value="100k-500k">PKR 100,000 - 500,000</SelectItem>
                      <SelectItem value="500k-1m">PKR 500,000 - 1,000,000</SelectItem>
                      <SelectItem value="1m-plus">PKR 1,000,000+</SelectItem>
                      <SelectItem value="discuss">Prefer to discuss</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="additionalInfo">Additional Information</Label>
                  <Textarea
                    id="additionalInfo"
                    placeholder="Any additional information you'd like to share about your company or partnership ideas?"
                    rows={3}
                  />
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox id="businessTerms" />
                  <Label htmlFor="businessTerms" className="text-sm">
                    I agree to the terms and conditions and privacy policy *
                  </Label>
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox id="businessUpdates" />
                  <Label htmlFor="businessUpdates" className="text-sm">
                    I'd like to receive updates about ProGrowth Labs partnership opportunities
                  </Label>
                </div>

<Button className="w-full" size="lg">
                  Submit Partnership Application
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>

<p className="text-sm text-muted-foreground text-center">
                  We'll review your application and schedule a partnership discussion within 5-7 business days.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/professional-woman-product-manager.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-product-manager-vTEZusRRQXhYImIZdghFURWUKlUpAE.png" isMerged="true"
[V0_FILE]jpg:file="public/professional-man-entrepreneur-ceo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-entrepreneur-ceo-eyN6SUYRcFoA5WqH3dPrJrw59PsCgA.jpg" isMerged="true"
[V0_FILE]png:file="public/professional-marketing-executive.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-marketing-executive-Oi77uHGqVUcso08DrQFQHNgSJ0MAmi.png" isMerged="true"
[V0_FILE]jpg:file="public/professional-man-software-engineer-director.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-software-engineer-director-mnIuVxI2a1b20DS1vfrVvMhLK8jrXT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-woman-finance-executive.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-finance-executive-s7raVZ99xZxgF8APZacoCiVLZ28Gu4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-man-creative-director-designer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-creative-director-designer-km728g509JDiSJ0EGyItV5sENViFJJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-professional-man-software-engineer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-professional-man-software-engineer-vTTHcHFOtiOuBBGe4Y8y7wwoYe9nSW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-professional-woman-marketing-manager.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-professional-woman-marketing-manager-z5mRhnZTYsoYaTepAFMdyBym2Asw6R.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-entrepreneur-man-startup-founder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-entrepreneur-man-startup-founder-lQGgG4EYkyAyHEfHUftpLymBJo2VaX.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-professional-woman-finance-analyst.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-professional-woman-finance-analyst-uoatyg2AZDJAaTAaP8O0AwfkrGf8d6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-creative-professional-man-designer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-creative-professional-man-designer-lRMVFML8JaadDrDFdmVysOJf85zmgw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-professional-woman-hr-manager.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-professional-woman-hr-manager-utZ88qpGepuPska0xXfH0aHsYAOB1O.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-woman-testimonial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-testimonial-KU0hm2Rz2twBJXQ40u7bouFOe5l0qN.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { Check, Users, Target, MessageCircle, TrendingUp, ArrowRight } from "lucide-react"

export default function PricingPage() {
  const pricingPlans = [
    {
      name: "Free Pilot",
      price: "Free",
      duration: "3 months",
      description: "Perfect for trying out our peer mentorship approach",
      features: [
        "Access to peer circle (6-8 members)",
        "Bi-weekly accountability sessions",
        "Goal tracking dashboard",
        "Community platform access",
        "1 mentor introduction session",
        "Basic progress reports",
      ],
      limitations: ["Limited to 3 months", "Basic mentor access", "Standard support"],
      cta: "Join Free Pilot",
      popular: true,
      available: true,
    },
    {
      name: "Growth Member",
      price: "PKR 15,000",
      duration: "per month",
      description: "Full access to all mentorship and growth programs",
      features: [
        "Everything in Free Pilot",
        "Unlimited peer circle access",
        "Monthly 1:1 mentor sessions",
        "Priority mentor matching",
        "Advanced goal tracking & analytics",
        "Exclusive workshops & events",
        "Network introductions",
        "Career strategy sessions",
        "Priority support",
      ],
      limitations: [],
      cta: "Coming Soon",
      popular: false,
      available: false,
    },
    {
      name: "Business Partner",
      price: "Custom",
      duration: "pricing",
      description: "Tailored solutions for companies and organizations",
      features: [
        "Team mentorship programs",
        "Custom peer circles for employees",
        "Leadership development tracks",
        "Company-specific workshops",
        "Dedicated account manager",
        "Progress reporting & analytics",
        "Talent pipeline access",
        "Brand partnership opportunities",
      ],
      limitations: [],
      cta: "Contact Sales",
      popular: false,
      available: true,
    },
  ]

const faqs = [
    {
      question: "Why is the pilot program free?",
      answer:
        "We're in our pilot phase and want to validate our approach with real users. This allows us to refine our matching process, improve our platform, and gather feedback before launching our full paid programs.",
    },
    {
      question: "What happens after the 3-month pilot?",
      answer:
        "Pilot members will have the option to continue with our Growth Member plan at a discounted rate. We'll also provide detailed progress reports and recommendations for continued growth.",
    },
    {
      question: "How are peer circles formed?",
      answer:
        "We use a proprietary matching algorithm that considers your industry, experience level, career goals, location, and personality traits to create the most effective peer groups.",
    },
    {
      question: "Can I choose my mentor?",
      answer:
        "We provide 2-3 mentor recommendations based on your goals and industry. You can have introduction calls with each and choose the best fit for your needs.",
    },
    {
      question: "What if I'm not satisfied with my peer circle?",
      answer:
        "We offer a 30-day satisfaction guarantee. If you're not happy with your peer circle, we'll work to find you a better match or provide a full refund.",
    },
    {
      question: "Are sessions conducted in English or Urdu?",
      answer:
        "Sessions can be conducted in either English or Urdu, depending on the preference of the peer circle members. Most of our mentors are bilingual.",
    },
  ]

return (
    <div className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="py-20 lg:py-32">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="secondary" className="mb-6">
              Free Pilot Program Available
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-balance mb-6">
              Transparent <span className="text-primary">Pricing</span> for Your Growth
            </h1>
            <p className="text-xl text-muted-foreground text-balance mb-8 max-w-2xl mx-auto">
              Start with our free pilot program and experience the power of peer mentorship before committing to paid
              plans.
            </p>
          </div>
        </div>
      </section>

{/* Pricing Cards */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {pricingPlans.map((plan, index) => (
              <Card
                key={index}
                className={`relative ${
                  plan.popular ? "border-primary shadow-lg scale-105" : "border-border"
                } transition-all hover:shadow-md`}
              >
                {plan.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-primary text-primary-foreground">Most Popular</Badge>
                  </div>
                )}

<CardHeader className="text-center pb-8">
                  <CardTitle className="text-2xl mb-2">{plan.name}</CardTitle>
                  <div className="mb-4">
                    <span className="text-4xl font-bold">{plan.price}</span>
                    {plan.duration && <span className="text-muted-foreground ml-2">/{plan.duration}</span>}
                  </div>
                  <p className="text-muted-foreground">{plan.description}</p>
                </CardHeader>

<CardContent className="space-y-6">
                  <div className="space-y-3">
                    {plan.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-start space-x-3">
                        <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-sm">{feature}</span>
                      </div>
                    ))}
                  </div>

{plan.limitations.length > 0 && (
                    <div className="pt-4 border-t">
                      <p className="text-sm font-medium text-muted-foreground mb-2">Limitations:</p>
                      <div className="space-y-2">
                        {plan.limitations.map((limitation, limitIndex) => (
                          <div key={limitIndex} className="flex items-start space-x-3">
                            <div className="h-2 w-2 bg-muted-foreground rounded-full flex-shrink-0 mt-2"></div>
                            <span className="text-sm text-muted-foreground">{limitation}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

<div className="pt-6">
                    {plan.available ? (
                      <Link href={plan.name === "Business Partner" ? "/join-business" : "/join-member"}>
                        <Button
                          className={`w-full ${plan.popular ? "" : "variant-outline"}`}
                          variant={plan.popular ? "default" : "outline"}
                          size="lg"
                        >
                          {plan.cta}
                          <ArrowRight className="ml-2 h-5 w-5" />
                        </Button>
                      </Link>
                    ) : (
                      <Button disabled className="w-full" size="lg">
                        {plan.cta}
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Value Proposition */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Why ProGrowth Labs is Worth It</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Compare the cost of our programs to the value you'll receive in career advancement and personal growth.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="text-center border-0 shadow-sm">
              <CardContent className="p-6">
                <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <TrendingUp className="h-6 w-6 text-primary" />
                </div>
                <h3 className="font-semibold mb-2">Average Salary Increase</h3>
                <div className="text-2xl font-bold text-primary mb-1">35%</div>
                <p className="text-sm text-muted-foreground">Within 12 months of joining</p>
              </CardContent>
            </Card>

<Card className="text-center border-0 shadow-sm">
              <CardContent className="p-6">
                <div className="h-12 w-12 bg-secondary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Users className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="font-semibold mb-2">Network Growth</h3>
                <div className="text-2xl font-bold text-secondary mb-1">50+</div>
                <p className="text-sm text-muted-foreground">Professional connections made</p>
              </CardContent>
            </Card>

<Card className="text-center border-0 shadow-sm">
              <CardContent className="p-6">
                <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Target className="h-6 w-6 text-primary" />
                </div>
                <h3 className="font-semibold mb-2">Goal Achievement</h3>
                <div className="text-2xl font-bold text-primary mb-1">85%</div>
                <p className="text-sm text-muted-foreground">Members achieve primary goals</p>
              </CardContent>
            </Card>

<Card className="text-center border-0 shadow-sm">
              <CardContent className="p-6">
                <div className="h-12 w-12 bg-secondary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <MessageCircle className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="font-semibold mb-2">Mentor Sessions</h3>
                <div className="text-2xl font-bold text-secondary mb-1">12+</div>
                <p className="text-sm text-muted-foreground">Hours of expert guidance</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Get answers to common questions about our pricing and programs.
            </p>
          </div>

<div className="max-w-3xl mx-auto space-y-6">
            {faqs.map((faq, index) => (
              <Card key={index} className="border-0 shadow-sm">
                <CardContent className="p-6">
                  <h3 className="font-semibold mb-3">{faq.question}</h3>
                  <p className="text-muted-foreground">{faq.answer}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-bold mb-6">Ready to Invest in Your Growth?</h2>
            <p className="text-xl mb-8 opacity-90">
              Start with our free pilot program and experience the transformative power of peer mentorship.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/join-member">
                <Button size="lg" variant="secondary" className="text-lg px-8">
                  Join Free Pilot
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/contact">
                <Button
                  size="lg"
                  variant="outline"
                  className="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary bg-transparent"
                >
                  Have Questions?
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Mail, Phone, MapPin, Clock, MessageCircle, ArrowRight, Facebook, Linkedin, Instagram } from "lucide-react"

export default function ContactPage() {
  const contactMethods = [
    {
      icon: Mail,
      title: "Email Us",
      description: "Get in touch via email for detailed inquiries",
      contact: "partnerships@progrowthlabs.com",
      action: "Send Email",
    },
    {
      icon: Phone,
      title: "Call Us",
      description: "Speak directly with our team",
      contact: "+923311469995",
      action: "Call Now",
    },
    {
      icon: MessageCircle,
      title: "WhatsApp",
      description: "Quick questions and support",
      contact: "+923311469995",
      action: "Message Us",
    },
  ]

const offices = [
    {
      city: "From home",
      address: "Remote-first approach",
      phone: "+923311469995",
      email: "partnerships@progrowthlabs.com",
    },
  ]

const faqs = [
    {
      question: "How can I join the waitlist?",
      answer:
        "You can join our waitlist by filling out the application form. We'll notify you when new cohorts are available and match you with suitable mentorship opportunities.",
    },
    {
      question: "What mentorship programs do you offer?",
      answer:
        "We offer 1:1 mentorship sessions with industry experts across various fields including product management, data analytics, HR, and entrepreneurship. Each mentor brings real-world experience from leading companies.",
    },
    {
      question: "How does the mentorship matching work?",
      answer:
        "We carefully match mentees with mentors based on career goals, industry experience, and specific skill development needs to ensure the most valuable mentorship experience.",
    },
    {
      question: "Do you offer corporate packages?",
      answer:
        "Yes! We have tailored mentorship programs for companies looking to develop their teams. Contact us for custom packages and group mentorship options.",
    },
  ]

return (
    <div className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="py-20 lg:py-32">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="secondary" className="mb-6">
              We're Here to Help
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-balance mb-6">
              Get in <span className="text-primary">Touch</span>
            </h1>
            <p className="text-xl text-muted-foreground text-balance mb-8 max-w-2xl mx-auto">
              Have questions about ProGrowth Labs? Want to learn more about our mentorship programs? We'd love to hear
              from you.
            </p>
          </div>
        </div>
      </section>

{/* Contact Methods */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Multiple Ways to Reach Us</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Choose the method that works best for you. We're committed to responding quickly.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            {contactMethods.map((method, index) => (
              <Card key={index} className="text-center border-0 shadow-sm hover:shadow-md transition-shadow">
                <CardContent className="p-8">
                  <div className="h-16 w-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <method.icon className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-xl font-semibold mb-4">{method.title}</h3>
                  <p className="text-muted-foreground mb-4">{method.description}</p>
                  <p className="font-medium mb-6">{method.contact}</p>
                  <Button variant="outline" className="bg-transparent">
                    {method.action}
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Contact Form */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-16">
            {/* Form */}
            <div>
              <div className="mb-8">
                <h2 className="text-3xl font-bold mb-4">Send Us a Message</h2>
                <p className="text-muted-foreground">
                  Fill out the form below and we'll get back to you within 24 hours.
                </p>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Contact Form</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">First Name *</Label>
                      <Input id="firstName" placeholder="Enter your first name" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Last Name *</Label>
                      <Input id="lastName" placeholder="Enter your last name" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Email Address *</Label>
                    <Input id="email" type="email" placeholder="your.email@example.com" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="phone">Phone Number</Label>
                    <Input id="phone" placeholder="+92 300 1234567" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="subject">Subject *</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="What is this regarding?" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="general">General Inquiry</SelectItem>
                        <SelectItem value="membership">Membership Questions</SelectItem>
                        <SelectItem value="business">Business Partnership</SelectItem>
                        <SelectItem value="mentorship">Mentorship Program</SelectItem>
                        <SelectItem value="technical">Technical Support</SelectItem>
                        <SelectItem value="feedback">Feedback</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="message">Message *</Label>
                    <Textarea
                      id="message"
                      placeholder="Tell us more about your inquiry or how we can help you..."
                      rows={5}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="city">Preferred City</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Which city are you based in?" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="lahore">Lahore</SelectItem>
                        <SelectItem value="karachi">Karachi</SelectItem>
                        <SelectItem value="islamabad">Islamabad</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<Button className="w-full" size="lg">
                    Send Message
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Button>

<p className="text-sm text-muted-foreground text-center">
                    We'll respond to your message within 24 hours during business days.
                  </p>
                </CardContent>
              </Card>
            </div>

{/* Contact Info */}
            <div className="space-y-8">
              <div>
                <h3 className="text-2xl font-bold mb-6">Our Offices</h3>
                <div className="space-y-6">
                  {offices.map((office, index) => (
                    <Card key={index} className="border-0 shadow-sm">
                      <CardContent className="p-6">
                        <div className="flex items-start space-x-4">
                          <div className="h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                            <MapPin className="h-5 w-5 text-primary" />
                          </div>
                          <div className="flex-1">
                            <h4 className="font-semibold mb-2">{office.city}</h4>
                            <p className="text-muted-foreground text-sm mb-2">{office.address}</p>
                            <div className="space-y-1 text-sm">
                              <div className="flex items-center space-x-2">
                                <Phone className="h-4 w-4 text-muted-foreground" />
                                <span>{office.phone}</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <Mail className="h-4 w-4 text-muted-foreground" />
                                <span>{office.email}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>

<div>
                <h3 className="text-2xl font-bold mb-6">Business Hours</h3>
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-6">
                    <div className="flex items-start space-x-4">
                      <div className="h-10 w-10 bg-secondary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                        <Clock className="h-5 w-5 text-secondary" />
                      </div>
                      <div className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <span>Monday - Friday:</span>
                          <span className="font-medium">9:00 AM - 6:00 PM</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Saturday:</span>
                          <span className="font-medium">10:00 AM - 4:00 PM</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Sunday:</span>
                          <span className="font-medium">Closed</span>
                        </div>
                        <p className="text-muted-foreground mt-3">
                          Response time: Within 24 hours during business days
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div>
                <h3 className="text-2xl font-bold mb-6">Follow Us</h3>
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-6">
                    <p className="text-muted-foreground mb-4">
                      Stay updated with our latest mentorship programs and professional development tips.
                    </p>
                    <div className="flex flex-wrap gap-4">
                      <Link
                        href="https://www.linkedin.com/company/progrowth-labs"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Linkedin className="h-4 w-4 mr-2" />
                          LinkedIn
                        </Button>
                      </Link>
                      <Link href="https://www.instagram.com/progrowth_labs/" target="_blank" rel="noopener noreferrer">
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Instagram className="h-4 w-4 mr-2" />
                          Instagram
                        </Button>
                      </Link>
                      <Link
                        href="https://www.facebook.com/profile.php?id=61574818872297"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Button variant="outline" size="sm" className="bg-transparent">
                          <Facebook className="h-4 w-4 mr-2" />
                          Facebook
                        </Button>
                      </Link>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Quick Answers</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Find answers to commonly asked questions before reaching out.
            </p>
          </div>

<div className="max-w-3xl mx-auto grid md:grid-cols-2 gap-6">
            {faqs.map((faq, index) => (
              <Card key={index} className="border-0 shadow-sm">
                <CardContent className="p-6">
                  <h3 className="font-semibold mb-3">{faq.question}</h3>
                  <p className="text-muted-foreground text-sm">{faq.answer}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-bold mb-6">Ready to Start Your Growth Journey?</h2>
            <p className="text-xl text-muted-foreground mb-8">
              Join our waitlist and get notified when new mentorship opportunities become available.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/join-member">
                <Button size="lg" className="text-lg px-8">
                  Join Waitlist
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/how-it-works">
                <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
                  Learn How It Works
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/hammad-rafique-real.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1743944086126.jpg-RVPET1Uks7aKJ40K9aYq4anJ7sE8AV.jpeg" isMerged="true"
[V0_FILE]png:file="public/mehras-tayyab-real.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1743944086126.jpg-RVPET1Uks7aKJ40K9aYq4anJ7sE8AV.jpeg" isMerged="true"
[V0_FILE]png:file="public/sheharyar-javed-real.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1743944086126.jpg-RVPET1Uks7aKJ40K9aYq4anJ7sE8AV.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/mehras-tayyab-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mehras.jpg-0Ai475QgDxvxESBW6NQXo1zcgQS9Ul.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/muhammad-sheharyar-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Muhammad.jpg-46CMrwu6j5SYqLNIBVoc9XYsGinOQa.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/hammad-rafique-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hammad.jpg-h8oGucvL5cwA3dYqkO1JLPLmxAoxjp.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/zeeshan-hayat-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Zeeshan.jpg-rowJCF7laTbnlKJPN0x3OeZMaKdLXR.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/rida-kamran-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rida.jpg-usAdSNj6XKRbddos2iKoAjixhhnt1o.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/taaha-waseem-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Taaha.jpg-HPrzkaHFpBneH3HiA7sjvLoGBfOXL8.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/rahma-farrukh-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rahma.jpg-hv5hp3dSfXoCTkzyizehP2EHDROVoh.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/areesha-najam-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Areesha.jpg-lkytsga7tFwhIeI6vzwRAyesoDtv3c.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Facebook, Linkedin, Instagram } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-muted/50 border-t">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
                <span className="text-primary-foreground font-bold text-sm">PG</span>
              </div>
              <span className="font-bold text-xl">ProGrowth Labs</span>
            </div>
            <p className="text-muted-foreground text-sm">
              Curated peer mentorship for early professionals and founders in Pakistan.
            </p>
            <div className="flex space-x-4">
              <Link
                href="https://www.facebook.com/profile.php?id=61574818872297"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-foreground"
              >
                <Facebook className="h-5 w-5" />
              </Link>
              <Link
                href="https://www.linkedin.com/company/progrowth-labs"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-foreground"
              >
                <Linkedin className="h-5 w-5" />
              </Link>
              <Link
                href="https://www.instagram.com/progrowth_labs/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-foreground"
              >
                <Instagram className="h-5 w-5" />
              </Link>
            </div>
          </div>

{/* Platform */}
          <div className="space-y-4">
            <h3 className="font-semibold">Platform</h3>
            <div className="space-y-2 text-sm">
              <Link href="/how-it-works" className="block text-muted-foreground hover:text-foreground">
                How It Works
              </Link>
              <Link href="/mentors" className="block text-muted-foreground hover:text-foreground">
                Mentors
              </Link>
              <Link href="/success-stories" className="block text-muted-foreground hover:text-foreground">
                Success Stories
              </Link>
            </div>
          </div>

{/* Join */}
          <div className="space-y-4">
            <h3 className="font-semibold">Join</h3>
            <div className="space-y-2 text-sm">
              <Link href="/join-member" className="block text-muted-foreground hover:text-foreground">
                Join as Member
              </Link>
              <Link href="/join-business" className="block text-muted-foreground hover:text-foreground">
                Join as Business
              </Link>
              <Link href="/contact" className="block text-muted-foreground hover:text-foreground">
                Contact Us
              </Link>
            </div>
          </div>

{/* Support */}
          <div className="space-y-4">
            <h3 className="font-semibold">Support</h3>
            <div className="space-y-2 text-sm">
              <Link href="#" className="block text-muted-foreground hover:text-foreground">
                Help Center
              </Link>
              <Link href="#" className="block text-muted-foreground hover:text-foreground">
                Privacy Policy
              </Link>
              <Link href="#" className="block text-muted-foreground hover:text-foreground">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>

<div className="border-t mt-8 pt-8 text-center text-sm text-muted-foreground">
          <p>© 2025 ProGrowth Labs. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/success-stories/page.tsx" isEdit="true" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { TrendingUp, Users, Target, ArrowRight, BookOpen, Award, Lightbulb } from "lucide-react"

export default function WhyJoinPage() {
  const impactStats = [
    {
      number: "75%",
      label: "of executives credit their mentors for shaping their career success",
      source: "LinkedIn Executive Survey",
    },
    {
      number: "5x",
      label: "higher promotion rates for employees with mentors",
      source: "Harvard Business Review",
    },
    {
      number: "23%",
      label: "higher salary growth for mentored professionals",
      source: "Academic Research Studies",
    },
    {
      number: "89%",
      label: "of mentored individuals become mentors themselves",
      source: "Mentorship Impact Studies",
    },
  ]

const mentorshipBenefits = [
    {
      icon: Target,
      title: "Accelerated Career Growth",
      description:
        "Organizations with mandatory mentorship programs see significantly better outcomes when many employees engage in structured mentoring relationships.",
      research: "Harvard Business Review Research",
    },
    {
      icon: Users,
      title: "Holistic Development",
      description:
        "Mentors who engage fully learn to support the 'whole person,' not just skills — contributing to deeper, more sustainable professional growth.",
      research: "Harvard Business Review Study",
    },
    {
      icon: BookOpen,
      title: "Higher Productivity",
      description:
        "In academic and professional settings, mentorship correlates with higher productivity and success rates among protégés.",
      research: "Malmgren, Ottino, Amaral — arXiv Study",
    },
    {
      icon: Award,
      title: "Leadership Development",
      description:
        "Mentored professionals are more likely to develop strong leadership skills and take on management roles within their organizations.",
      research: "Corporate Leadership Studies",
    },
    {
      icon: Lightbulb,
      title: "Innovation & Problem-Solving",
      description:
        "Mentorship relationships foster creative thinking and innovative problem-solving approaches through diverse perspectives and experiences.",
      research: "Innovation Research Institute",
    },
    {
      icon: TrendingUp,
      title: "Long-term Success",
      description:
        "The benefits of mentorship extend far beyond immediate career gains, creating lasting professional networks and continuous learning habits.",
      research: "Longitudinal Career Studies",
    },
  ]

return (
    <div className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="py-20 lg:py-32">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="secondary" className="mb-6">
              Research-Backed Impact
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-balance mb-6">
              Why <span className="text-primary">Mentorship</span> Accelerates Success
            </h1>
            <p className="text-xl text-muted-foreground text-balance mb-8 max-w-2xl mx-auto">
              Discover the proven impact of professional mentorship on career growth, backed by research from leading
              institutions and real-world data.
            </p>
          </div>
        </div>
      </section>

{/* Impact Stats */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">The Numbers Don't Lie</h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Research from Harvard Business Review, LinkedIn, and academic institutions consistently shows the
              transformative power of mentorship.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {impactStats.map((stat, index) => (
              <Card key={index} className="text-center border-0 shadow-sm">
                <CardContent className="p-6">
                  <div className="text-4xl lg:text-5xl font-bold text-primary mb-2">{stat.number}</div>
                  <p className="text-sm font-medium mb-2">{stat.label}</p>
                  <p className="text-xs text-muted-foreground">{stat.source}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Why Mentorship Works */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Why Mentorship Works</h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Understanding the science behind mentorship helps explain why it's one of the most effective ways to
              accelerate professional growth.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {mentorshipBenefits.map((benefit, index) => (
              <Card key={index} className="border-0 shadow-sm hover:shadow-md transition-shadow">
                <CardContent className="p-6">
                  <div className="h-12 w-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                    <benefit.icon className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="font-semibold mb-3">{benefit.title}</h3>
                  <p className="text-sm text-muted-foreground mb-3">{benefit.description}</p>
                  <p className="text-xs text-primary font-medium">{benefit.research}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* What Makes ProGrowth Labs Different */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold mb-4">What Makes ProGrowth Labs Different</h2>
              <p className="text-xl text-muted-foreground">
                We've designed our mentorship program based on research insights to maximize impact and ensure
                meaningful connections.
              </p>
            </div>

<div className="grid md:grid-cols-2 gap-8">
              <Card className="border-0 shadow-sm">
                <CardContent className="p-8">
                  <h3 className="text-xl font-semibold mb-4">Structured Engagement</h3>
                  <p className="text-muted-foreground mb-4">
                    Research shows that mentorship programs with structured engagement and clear goals produce better
                    outcomes than informal arrangements.
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-2">
                    <li>• Regular scheduled sessions</li>
                    <li>• Goal-setting frameworks</li>
                    <li>• Progress tracking systems</li>
                  </ul>
                </CardContent>
              </Card>

<Card className="border-0 shadow-sm">
                <CardContent className="p-8">
                  <h3 className="text-xl font-semibold mb-4">Whole-Person Focus</h3>
                  <p className="text-muted-foreground mb-4">
                    Our mentors are trained to support your complete professional development, not just technical
                    skills.
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-2">
                    <li>• Career strategy guidance</li>
                    <li>• Leadership development</li>
                    <li>• Work-life integration</li>
                  </ul>
                </CardContent>
              </Card>

<Card className="border-0 shadow-sm">
                <CardContent className="p-8">
                  <h3 className="text-xl font-semibold mb-4">Experienced Mentors</h3>
                  <p className="text-muted-foreground mb-4">
                    Our mentors are carefully selected professionals with proven track records in their respective
                    fields.
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-2">
                    <li>• Industry expertise</li>
                    <li>• Leadership experience</li>
                    <li>• Mentoring training</li>
                  </ul>
                </CardContent>
              </Card>

<Card className="border-0 shadow-sm">
                <CardContent className="p-8">
                  <h3 className="text-xl font-semibold mb-4">Community Support</h3>
                  <p className="text-muted-foreground mb-4">
                    Beyond one-on-one mentorship, you'll join a community of ambitious professionals supporting each
                    other's growth.
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-2">
                    <li>• Peer learning opportunities</li>
                    <li>• Networking events</li>
                    <li>• Collaborative projects</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-bold mb-6">Ready to Accelerate Your Growth?</h2>
            <p className="text-xl text-muted-foreground mb-8">
              Join our waitlist and get matched with experienced mentors who can help you achieve your professional
              goals faster.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/join-member">
                <Button size="lg" className="text-lg px-8">
                  Join Waitlist
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/mentors">
                <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
                  Meet Our Mentors
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/progrowth-labs-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/labs.-aSlhQLQ3DXzwEvWZFB3bHscFEgGBFq.png" isMerged="true"
[V0_FILE]png:file="public/progrowth-labs-logo-solid.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Solid_standard_logo%20%281%29-rVfyVqb4LL7rv7dMU5v0zelunOanAN.png" isMerged="true"
[V0_FILE]png:file="public/progrowth-labs-logo-gradient.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Color_gradient-FeP8SN9iJQdBVK0l1IgpAsMxpLnEvX.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, UserCheck, Calendar, TrendingUp, Activity, Clock } from "lucide-react"
import useSWR from "swr"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { AnalyticsChart } from "@/components/analytics-chart"
import { RecentActivity } from "@/components/recent-activity"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function AdminDashboard() {
  // Real-time data fetching with 5-second refresh interval
  const { data: stats, error: statsError } = useSWR("/api/admin/stats", fetcher, {
    refreshInterval: 5000,
    revalidateOnFocus: true,
  })

const { data: chartData, error: chartError } = useSWR("/api/admin/chart-data", fetcher, {
    refreshInterval: 10000,
    revalidateOnFocus: true,
  })

const { data: recentActivity, error: activityError } = useSWR("/api/admin/recent-activity", fetcher, {
    refreshInterval: 3000,
    revalidateOnFocus: true,
  })

const isLoading = !stats || !chartData || !recentActivity
  const hasError = statsError || chartError || activityError

if (hasError) {
    return (
      <div className="min-h-screen bg-background">
        <Navigation />
        <div className="container mx-auto px-4 py-20">
          <Card className="border-destructive">
            <CardContent className="p-8 text-center">
              <p className="text-destructive">Failed to load dashboard data. Please try again.</p>
            </CardContent>
          </Card>
        </div>
        <Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Navigation />

<div className="container mx-auto px-4 sm:px-6 py-8 sm:py-12">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-2">
            <h1 className="text-3xl sm:text-4xl font-bold">Admin Dashboard</h1>
            <Badge variant="secondary" className="flex items-center gap-2">
              <Activity className="h-3 w-3 animate-pulse" />
              Live
            </Badge>
          </div>
          <p className="text-muted-foreground">Real-time analytics and platform insights</p>
        </div>

{/* Stats Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card className="border-2 hover:border-primary/50 transition-all">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Members</CardTitle>
              <Users className="h-5 w-5 text-primary" />
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {isLoading ? (
                  <div className="h-9 w-20 bg-muted animate-pulse rounded" />
                ) : (
                  stats.totalMembers.toLocaleString()
                )}
              </div>
              {!isLoading && (
                <p className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
                  <TrendingUp className="h-3 w-3 text-green-500" />+{stats.memberGrowth}% from last month
                </p>
              )}
            </CardContent>
          </Card>

<Card className="border-2 hover:border-secondary/50 transition-all">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Active Mentors</CardTitle>
              <UserCheck className="h-5 w-5 text-secondary" />
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {isLoading ? (
                  <div className="h-9 w-20 bg-muted animate-pulse rounded" />
                ) : (
                  stats.activeMentors.toLocaleString()
                )}
              </div>
              {!isLoading && (
                <p className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
                  <TrendingUp className="h-3 w-3 text-green-500" />+{stats.mentorGrowth}% from last month
                </p>
              )}
            </CardContent>
          </Card>

<Card className="border-2 hover:border-accent/50 transition-all">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Sessions This Month</CardTitle>
              <Calendar className="h-5 w-5 text-accent" />
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {isLoading ? (
                  <div className="h-9 w-20 bg-muted animate-pulse rounded" />
                ) : (
                  stats.sessionsThisMonth.toLocaleString()
                )}
              </div>
              {!isLoading && (
                <p className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
                  <TrendingUp className="h-3 w-3 text-green-500" />+{stats.sessionGrowth}% from last month
                </p>
              )}
            </CardContent>
          </Card>

<Card className="border-2 hover:border-primary/50 transition-all">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Avg. Session Time</CardTitle>
              <Clock className="h-5 w-5 text-primary" />
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {isLoading ? <div className="h-9 w-20 bg-muted animate-pulse rounded" /> : `${stats.avgSessionTime}m`}
              </div>
              {!isLoading && <p className="text-xs text-muted-foreground mt-2">Target: 30-45 minutes</p>}
            </CardContent>
          </Card>
        </div>

{/* Charts and Activity */}
        <div className="grid lg:grid-cols-3 gap-6">
          {/* Growth Chart */}
          <Card className="lg:col-span-2 border-2">
            <CardHeader>
              <CardTitle>Platform Growth</CardTitle>
              <p className="text-sm text-muted-foreground">Member and mentor signups over time</p>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="h-80 bg-muted animate-pulse rounded" />
              ) : (
                <AnalyticsChart data={chartData} />
              )}
            </CardContent>
          </Card>

{/* Recent Activity */}
          <Card className="border-2">
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
              <p className="text-sm text-muted-foreground">Latest platform events</p>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="space-y-4">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <div key={i} className="h-16 bg-muted animate-pulse rounded" />
                  ))}
                </div>
              ) : (
                <RecentActivity activities={recentActivity} />
              )}
            </CardContent>
          </Card>
        </div>

{/* Additional Metrics */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          <Card className="border-2">
            <CardHeader>
              <CardTitle className="text-lg">Match Success Rate</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-4xl font-bold text-gradient mb-2">
                {isLoading ? (
                  <div className="h-12 w-24 bg-muted animate-pulse rounded" />
                ) : (
                  `${stats.matchSuccessRate}%`
                )}
              </div>
              <p className="text-sm text-muted-foreground">Successful mentor-mentee matches</p>
            </CardContent>
          </Card>

<Card className="border-2">
            <CardHeader>
              <CardTitle className="text-lg">Engagement Score</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-4xl font-bold text-gradient mb-2">
                {isLoading ? (
                  <div className="h-12 w-24 bg-muted animate-pulse rounded" />
                ) : (
                  `${stats.engagementScore}/10`
                )}
              </div>
              <p className="text-sm text-muted-foreground">Average platform engagement</p>
            </CardContent>
          </Card>

<Card className="border-2">
            <CardHeader>
              <CardTitle className="text-lg">Waitlist</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-4xl font-bold text-gradient mb-2">
                {isLoading ? (
                  <div className="h-12 w-24 bg-muted animate-pulse rounded" />
                ) : (
                  stats.waitlistCount.toLocaleString()
                )}
              </div>
              <p className="text-sm text-muted-foreground">Pending member applications</p>
            </CardContent>
          </Card>
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/analytics-chart.tsx" isMerged="true"
"use client"

import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, Legend } from "recharts"

interface AnalyticsChartProps {
  data: Array<{
    month: string
    members: number
    mentors: number
  }>
}

export function AnalyticsChart({ data }: AnalyticsChartProps) {
  return (
    <ResponsiveContainer width="100%" height={320}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
        <XAxis dataKey="month" className="text-xs" />
        <YAxis className="text-xs" />
        <Tooltip
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "var(--radius)",
          }}
        />
        <Legend />
        <Line
          type="monotone"
          dataKey="members"
          stroke="hsl(var(--primary))"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--primary))", r: 4 }}
          activeDot={{ r: 6 }}
          name="Members"
        />
        <Line
          type="monotone"
          dataKey="mentors"
          stroke="hsl(var(--secondary))"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--secondary))", r: 4 }}
          activeDot={{ r: 6 }}
          name="Mentors"
        />
      </LineChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/recent-activity.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"
import { UserPlus, Calendar, MessageSquare, Award } from "lucide-react"

interface Activity {
  id: string
  type: "signup" | "session" | "message" | "achievement"
  description: string
  timestamp: string
  user: string
}

interface RecentActivityProps {
  activities: Activity[]
}

const activityIcons = {
  signup: UserPlus,
  session: Calendar,
  message: MessageSquare,
  achievement: Award,
}

const activityColors = {
  signup: "text-primary",
  session: "text-secondary",
  message: "text-accent",
  achievement: "text-yellow-500",
}

export function RecentActivity({ activities }: RecentActivityProps) {
  return (
    <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
      {activities.map((activity) => {
        const Icon = activityIcons[activity.type]
        const colorClass = activityColors[activity.type]

return (
          <div key={activity.id} className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors">
            <div className={`mt-1 ${colorClass}`}>
              <Icon className="h-5 w-5" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium leading-relaxed">{activity.description}</p>
              <div className="flex items-center gap-2 mt-1">
                <Badge variant="outline" className="text-xs">
                  {activity.user}
                </Badge>
                <span className="text-xs text-muted-foreground">{activity.timestamp}</span>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/admin/stats/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  // Simulate real-time data with slight variations
  const baseStats = {
    totalMembers: 1247,
    memberGrowth: 12.5,
    activeMentors: 89,
    mentorGrowth: 8.3,
    sessionsThisMonth: 342,
    sessionGrowth: 15.7,
    avgSessionTime: 38,
    matchSuccessRate: 94,
    engagementScore: 8.7,
    waitlistCount: 523,
  }

// Add small random variations to simulate real-time changes
  const stats = {
    ...baseStats,
    totalMembers: baseStats.totalMembers + Math.floor(Math.random() * 5),
    sessionsThisMonth: baseStats.sessionsThisMonth + Math.floor(Math.random() * 3),
    waitlistCount: baseStats.waitlistCount + Math.floor(Math.random() * 10),
  }

return NextResponse.json(stats)
}
[V0_FILE]typescript:file="app/api/admin/chart-data/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  // Generate chart data for the last 6 months
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
  const baseMembers = [850, 920, 1010, 1090, 1180, 1247]
  const baseMentors = [65, 70, 75, 80, 85, 89]

const chartData = months.map((month, index) => ({
    month,
    members: baseMembers[index] + Math.floor(Math.random() * 10),
    mentors: baseMentors[index] + Math.floor(Math.random() * 3),
  }))

return NextResponse.json(chartData)
}
[V0_FILE]typescript:file="app/api/admin/recent-activity/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const activityTemplates = [
  {
    type: "signup" as const,
    descriptions: [
      "New member joined the platform",
      "Professional signed up for mentorship",
      "Entrepreneur joined the waitlist",
    ],
  },
  {
    type: "session" as const,
    descriptions: ["Mentorship session completed", "First session scheduled", "Follow-up session booked"],
  },
  {
    type: "message" as const,
    descriptions: ["New message in mentor chat", "Feedback submitted for session", "Goal update shared"],
  },
  {
    type: "achievement" as const,
    descriptions: [
      "Member reached career milestone",
      "Mentor completed 10 sessions",
      "Successful job transition reported",
    ],
  },
]

const names = [
  "Ahmed K.",
  "Fatima S.",
  "Hassan M.",
  "Ayesha R.",
  "Ali Z.",
  "Sara N.",
  "Usman A.",
  "Zainab H.",
  "Bilal F.",
  "Maryam I.",
]

function getRandomItem<T>(array: T[]): T {
  return array[Math.floor(Math.random() * array.length)]
}

function getTimeAgo(): string {
  const minutes = Math.floor(Math.random() * 60)
  if (minutes < 1) return "Just now"
  if (minutes === 1) return "1 min ago"
  if (minutes < 60) return `${minutes} mins ago`
  return "1 hour ago"
}

export async function GET() {
  // Generate 8 random activities
  const activities = Array.from({ length: 8 }, (_, index) => {
    const template = getRandomItem(activityTemplates)
    return {
      id: `activity-${Date.now()}-${index}`,
      type: template.type,
      description: getRandomItem(template.descriptions),
      timestamp: getTimeAgo(),
      user: getRandomItem(names),
    }
  })

return NextResponse.json(activities)
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isQuickEdit="true"
"use client"

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

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false)

const navItems = [
    { href: "/", label: "Home" },
    { href: "/how-it-works", label: "How It Works" },
    { href: "/mentors", label: "Mentors" },
    { href: "/success-stories", label: "Why Join" },
    { href: "/contact", label: "Contact" },
  ]

return (
    <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto px-4">
        <div className="flex h-20 sm:h-24 items-center justify-between">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-2xl sm:text-3xl font-bold text-gradient text-primary">ProGrowth Labs</span>
          </Link>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-6 lg:space-x-8">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="hover:text-foreground transition-colors text-primary"
              >
                {item.label}
              </Link>
            ))}
          </div>

{/* CTA Buttons */}
          <div className="hidden md:flex items-center space-x-3 lg:space-x-4">
            <Link href="/join-member">
              <Button variant="outline">Join as Member</Button>
            </Link>
            <Link href="/join-business">
              <Button>Join as Business</Button>
            </Link>
          </div>

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

{/* Mobile Navigation */}
        {isOpen && (
          <div className="md:hidden py-4 border-t">
            <div className="flex flex-col space-y-4">
              {navItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="text-muted-foreground hover:text-foreground transition-colors"
                  onClick={() => setIsOpen(false)}
                >
                  {item.label}
                </Link>
              ))}
              <div className="flex flex-col space-y-2 pt-4">
                <Link href="/join-member" onClick={() => setIsOpen(false)}>
                  <Button variant="outline" className="w-full bg-transparent">
                    Join as Member
                  </Button>
                </Link>
                <Link href="/join-business" onClick={() => setIsOpen(false)}>
                  <Button className="w-full">Join as Business</Button>
                </Link>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { Users, Target, TrendingUp, CheckCircle, ArrowRight, Sparkles, BookOpen, Award, Rocket } from "lucide-react"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />

<section className="relative py-16 sm:py-20 lg:py-28 xl:py-36 overflow-hidden">
        <div className="absolute inset-0 bg-progrowth-gradient-light"></div>
        <div className="container mx-auto px-4 sm:px-6 relative z-10">
          <div className="max-w-5xl mx-auto text-center">
            <div className="mb-8 sm:mb-10">
              <h1 className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-gradient mb-2 text-primary">
                ProGrowth Labs
              </h1>
            </div>
            <h2 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-balance mb-6 sm:mb-8 px-4 leading-tight">
              Unlocking Potential &<br />
              <span className="text-gradient">Future Growth</span>
            </h2>
            <p className="text-lg sm:text-xl lg:text-2xl text-muted-foreground text-balance mb-8 sm:mb-10 max-w-3xl mx-auto px-4 leading-relaxed">
              Connect with industry mentors and accelerate your growth through personalized mentorship programs designed
              for Pakistan's ambitious professionals.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
              <Link href="/join-member" className="w-full sm:w-auto">
                <Button
                  size="lg"
                  className="text-lg px-10 py-6 w-full sm:w-auto shadow-lg hover:shadow-xl transition-all"
                >
                  Join ProGrowth Labs
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/how-it-works" className="w-full sm:w-auto">
                <Button
                  size="lg"
                  variant="outline"
                  className="text-lg px-10 py-6 bg-background/80 backdrop-blur-sm w-full sm:w-auto border-2 hover:bg-background"
                >
                  How It Works
                </Button>
              </Link>
            </div>
          </div>
        </div>

<section className="py-16 sm:py-20 lg:py-24">
        <div className="container mx-auto px-4 sm:px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12 sm:mb-16">
              <Badge variant="secondary" className="mb-4 text-sm px-4 py-1">
                For Mentors
              </Badge>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
                Share Your Experience.
                <br />
                Shape Futures.
              </h2>
              <p className="text-xl sm:text-2xl text-muted-foreground max-w-2xl mx-auto px-4">
                Leave a legacy by guiding the next generation.
              </p>
            </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
              <Card className="border-2 hover:border-primary/50 transition-all hover:shadow-lg group">
                <CardContent className="p-8">
                  <div className="h-14 w-14 bg-gradient-to-br from-primary to-accent rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <Sparkles className="h-7 w-7 text-white" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Thought Leadership</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Build your personal brand and establish yourself as an industry leader.
                  </p>
                </CardContent>
              </Card>

<Card className="border-2 hover:border-secondary/50 transition-all hover:shadow-lg group">
                <CardContent className="p-8">
                  <div className="h-14 w-14 bg-gradient-to-br from-secondary to-accent rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <Target className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Make Real Impact</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Guide the next generation of Pakistani professionals and entrepreneurs.
                  </p>
                </CardContent>
              </Card>

<Card className="border-2 hover:border-primary/50 transition-all hover:shadow-lg group">
                <CardContent className="p-8">
                  <div className="h-14 w-14 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <Users className="h-7 w-7 text-white" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Exclusive Community</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Join a network of Pakistan's most accomplished professionals.
                  </p>
                </CardContent>
              </Card>

<Card className="border-2 hover:border-accent/50 transition-all hover:shadow-lg group">
                <CardContent className="p-8">
                  <div className="h-14 w-14 bg-gradient-to-br from-accent to-secondary rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <BookOpen className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Content Opportunities</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Share your insights through articles and reach thousands.
                  </p>
                </CardContent>
              </Card>
            </div>

<Card className="bg-gradient-to-br from-primary/5 via-accent/5 to-secondary/5 border-2 border-primary/20 shadow-xl">
              <CardContent className="p-8 sm:p-10 lg:p-12">
                <h3 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8">Your Commitment</h3>
                <ul className="space-y-5 mb-8 sm:mb-10">
                  <li className="flex items-start gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <span className="text-base sm:text-lg leading-relaxed">
                      <strong>1-2 sessions per month</strong> — 30 minutes each, online, flexible scheduling
                    </span>
                  </li>
                  <li className="flex items-start gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <span className="text-base sm:text-lg leading-relaxed">
                      <strong>Show up as yourself</strong> — No scripts, just share your experience and honest advice
                    </span>
                  </li>
                  <li className="flex items-start gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <span className="text-base sm:text-lg leading-relaxed">
                      <strong>Optional content</strong> — Write 1 article every 2-3 months to amplify your impact
                    </span>
                  </li>
                  <li className="flex items-start gap-4">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                    <span className="text-base sm:text-lg leading-relaxed">
                      <strong>We handle everything else</strong> — Vetting, scheduling, prep collection, follow-ups
                    </span>
                  </li>
                </ul>
                <Link href="/join-mentor" className="w-full sm:w-auto inline-block">
                  <Button size="lg" className="w-full sm:w-auto text-lg px-10 py-6 shadow-lg">
                    Become a Mentor
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-20 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12 sm:mb-16">
              <Badge variant="outline" className="mb-4 text-sm px-4 py-1">
                For Professionals
              </Badge>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
                Break Through Stagnation.
                <br />
                <span className="text-gradient">Accelerate Your Career.</span>
              </h2>
              <p className="text-xl sm:text-2xl text-muted-foreground max-w-2xl mx-auto px-4">
                Achieve your ambitious goals with expert guidance.
              </p>
            </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
              <Card className="border-2 hover:border-primary/50 transition-all hover:shadow-lg">
                <CardContent className="p-8 text-center">
                  <div className="h-16 w-16 bg-gradient-to-br from-primary to-accent rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <Users className="h-8 w-8 text-white" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">1:1 Guidance</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Get personalized advice from mentors who've walked the path you're on.
                  </p>
                </CardContent>
              </Card>

<Card className="border-2 hover:border-secondary/50 transition-all hover:shadow-lg">
                <CardContent className="p-8 text-center">
                  <div className="h-16 w-16 bg-gradient-to-br from-secondary to-accent rounded-2xl flex items-center justify-center mx-auto mb-6 text-primary bg-primary">
                    <BookOpen className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Curated Insights</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Access expert-written articles and resources tailored to your growth journey.
                  </p>
                </CardContent>
              </Card>

<Card className="border-2 hover:border-accent/50 transition-all hover:shadow-lg">
                <CardContent className="p-8 text-center">
                  <div className="h-16 w-16 bg-gradient-to-br from-accent to-primary rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <Target className="h-8 w-8 text-white" />
                  </div>
                  <h3 className="text-xl font-bold mb-4">Goal-Based Growth</h3>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    Structured sessions focused on your specific challenges and aspirations.
                  </p>
                </CardContent>
              </Card>
            </div>

<Card className="bg-gradient-to-br from-secondary/10 via-accent/10 to-primary/10 border-2 border-secondary/30 text-center shadow-xl">
              <CardContent className="p-8 sm:p-10 lg:p-12">
                <Badge variant="secondary" className="mb-6 text-sm px-4 py-2">
                  Limited Slots Available
                </Badge>
                <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
                  We carefully curate both mentors and mentees to ensure quality matches and meaningful growth outcomes.
                </p>
                <Link href="/join-member" className="w-full sm:w-auto inline-block">
                  <Button size="lg" variant="secondary" className="w-full sm:w-auto text-lg px-10 py-6 shadow-lg">
                    Join as Professional
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-20 lg:py-24">
        <div className="container mx-auto px-4 sm:px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12 sm:mb-16">
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">Why Mentorship Matters</h2>
              <p className="text-xl sm:text-2xl text-muted-foreground max-w-3xl mx-auto px-4 leading-relaxed">
                Mentorship powers the next generation of Pakistani professionals, entrepreneurs, and innovators.
              </p>
            </div>

<div className="grid sm:grid-cols-3 gap-8 mb-16">
              <Card className="text-center border-2 hover:border-primary/50 transition-all hover:shadow-xl group">
                <CardContent className="p-10">
                  <div className="text-6xl font-bold text-gradient mb-4 group-hover:scale-110 transition-transform text-destructive-foreground">
                    71%
                  </div>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    of Fortune 500 companies have mentoring programs
                  </p>
                </CardContent>
              </Card>

<Card className="text-center border-2 hover:border-secondary/50 transition-all hover:shadow-xl group">
                <CardContent className="p-10">
                  <div className="text-6xl font-bold text-gradient mb-4 group-hover:scale-110 transition-transform text-destructive-foreground">
                    5x
                  </div>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    higher promotion rates for mentees compared to non-mentees
                  </p>
                </CardContent>
              </Card>

<Card className="text-center border-2 hover:border-accent/50 transition-all hover:shadow-xl group">
                <CardContent className="p-10">
                  <div className="text-6xl font-bold text-gradient mb-4 group-hover:scale-110 transition-transform text-destructive-foreground">
                    97%
                  </div>
                  <p className="text-base text-muted-foreground leading-relaxed">
                    of people with mentors say they are valuable
                  </p>
                </CardContent>
              </Card>
            </div>

<div className="grid md:grid-cols-2 gap-8">
              <Card className="bg-gradient-to-br from-primary/5 to-accent/5 border-2 border-primary/20">
                <CardContent className="p-8">
                  <blockquote className="text-lg italic mb-4 leading-relaxed">
                    "Mentoring is a brain to pick, an ear to listen, and a push in the right direction."
                  </blockquote>
                  <p className="text-base text-muted-foreground font-medium">— John C. Crosby</p>
                </CardContent>
              </Card>

<Card className="bg-gradient-to-br from-secondary/5 to-accent/5 border-2 border-secondary/20">
                <CardContent className="p-8">
                  <blockquote className="text-lg italic mb-4 leading-relaxed">
                    "The delicate balance of mentoring someone is not creating them in your own image, but giving them
                    the opportunity to create themselves."
                  </blockquote>
                  <p className="text-base text-muted-foreground font-medium">— Steven Spielberg</p>
                </CardContent>
              </Card>
            </div>

<p className="text-sm text-muted-foreground text-center mt-8">
              Sources: Harvard Business Review, Forbes, CNBC
            </p>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-20 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6">
          <div className="text-center mb-12 sm:mb-16">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">Perfect for All Ambitious Professionals</h2>
            <p className="text-xl sm:text-2xl text-muted-foreground max-w-3xl mx-auto px-4 leading-relaxed">
              Whether you're starting your career, scaling your business, or leading a team.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <Card className="text-center border-2 hover:border-primary/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-20 w-20 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-6">
                  <TrendingUp className="h-10 w-10 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Early to Mid-Career</h3>
                <p className="text-base text-muted-foreground mb-6 leading-relaxed">
                  1-8 years experience looking to accelerate growth and build leadership skills.
                </p>
                <Badge className="bg-primary/10 text-primary border-primary/20">Perfect Match</Badge>
              </CardContent>
            </Card>

<Card className="text-center border-2 hover:border-secondary/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-20 w-20 bg-gradient-to-br from-secondary to-accent rounded-full flex items-center justify-center mx-auto mb-6">
                  <Rocket className="h-10 w-10 text-primary" />
                </div>
                <h3 className="text-xl font-bold mb-4">Entrepreneurs</h3>
                <p className="text-base text-muted-foreground mb-6 leading-relaxed">
                  Founders and business owners seeking strategic guidance and peer support.
                </p>
                <Badge className="bg-secondary/10 text-secondary border-secondary/20">Great Fit</Badge>
              </CardContent>
            </Card>

<Card className="text-center border-2 hover:border-accent/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-20 w-20 bg-gradient-to-br from-accent to-primary rounded-full flex items-center justify-center mx-auto mb-6">
                  <Award className="h-10 w-10 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Senior Leaders</h3>
                <p className="text-base text-muted-foreground mb-6 leading-relaxed">
                  Experienced professionals looking to mentor while continuing their growth.
                </p>
                <Badge className="bg-accent/10 text-accent border-accent/20">Ideal Choice</Badge>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-20 lg:py-24 relative overflow-hidden">
        <div className="absolute inset-0 bg-progrowth-gradient opacity-5"></div>
        <div className="container mx-auto px-4 sm:px-6 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6 px-4">Ready to Join ProGrowth Labs?</h2>
            <p className="text-xl sm:text-2xl text-muted-foreground mb-10 px-4 leading-relaxed">
              Join our waitlist and get matched with industry mentors who can accelerate your professional growth.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
              <Link href="/join-member" className="w-full sm:w-auto">
                <Button
                  size="lg"
                  className="text-lg px-10 py-6 w-full sm:w-auto shadow-xl hover:shadow-2xl transition-all"
                >
                  Join Waitlist
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/contact" className="w-full sm:w-auto">
                <Button
                  size="lg"
                  variant="outline"
                  className="text-lg px-10 py-6 bg-background/80 backdrop-blur-sm w-full sm:w-auto border-2 hover:bg-background"
                >
                  Get in Touch
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/mentors/zeeshan.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Zeeshan-ThA4UCb5K2xoTEQ96554ba1KPLIYaw.jpeg"
[V0_FILE]jpeg:file="public/mentors/rida.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rida-sHaiEOrD5cVYR298bs5MGoHaDSYZ3d.jpeg"
[V0_FILE]jpeg:file="public/mentors/muhammad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Muhmmad-osHoTxXByWPzhRSui1Fp3uA4ZcyVsH.jpeg"
[V0_FILE]jpeg:file="public/mentors/rahma.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rahma-Q3w1K1IgJa5USJ6IeJNuIqRt6hnOCQ.jpeg"
[V0_FILE]jpeg:file="public/mentors/taaha.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Taaha-8TVAaJgsjWovm9YjhkUYTejJ4s1Htu.jpeg"
[V0_FILE]jpeg:file="public/mentors/mehras.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mehras-dic36R6QvCGYt0UnvtWDL5scj2pmHT.jpeg"
[V0_FILE]jpeg:file="public/mentors/hammad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hammad-LAPExgAPZElMsvZlPFIt2U3v3cp19E.jpeg"
[V0_FILE]typescriptreact:file="app/mentors/page.tsx" isEdit="true" isQuickEdit="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { MessageCircle, Star, Users, Target, TrendingUp, ArrowRight, Briefcase, MapPin } from "lucide-react"
import Image from "next/image"

export default function MentorsPage() {
  const mentors = [
    {
      name: "Hammad Rafique",
      title: "Operations Lead",
      company: "Stadium",
      expertise: ["Operations Strategy", "Supply Chain", "Startup Operations", "Team Building", "Systems Design"],
      experience: "6+ years",
      location: "Lahore",
      bio: "NUST Graduate with extensive experience building operations and supply chain functions from ground up at hypergrowth startups like Airlift, Fleek, and Dastgyr. Expert in scaling teams and optimizing processes.",
      image: "/mentors/hammad.jpeg",
      initials: "HR",
      color: "from-primary to-accent",
      availableSlots: ["Tuesdays 6-8 PM", "Saturdays 10 AM-12 PM"],
      achievements: [
        "Scaled supply function from 10 to 300+ team members",
        "Reduced logistics costs by 27%",
        "Led operations across 8+ cities and 70+ dark stores",
      ],
    },
    {
      name: "Muhammad Sheharyar Javed",
      title: "Head of Growth",
      company: "Dastgyr",
      expertise: [
        "Growth Strategy",
        "Operations Excellence",
        "Business Development",
        "Process Optimization",
        "Team Leadership",
      ],
      experience: "7+ years",
      location: "Lahore",
      bio: "NUST Graduate with proven track record at Dastgyr, Fleek, and Airlift. Expert in building growth functions from scratch and driving significant business impact through data-driven strategies.",
      image: "/mentors/muhammad.jpeg",
      initials: "MS",
      color: "from-secondary to-accent",
      availableSlots: ["Wednesdays 7-9 PM", "Sundays 2-4 PM"],
      achievements: [
        "Built demand/growth function from scratch",
        "Reduced operations cost by 42%",
        "Set up KAM function delivering £2M monthly revenue",
      ],
    },
    {
      name: "Mehras Tayyab",
      title: "Strategy & Analytics Lead",
      company: "Rewaa (KSA)",
      expertise: [
        "Strategy Development",
        "Business Analytics",
        "SaaS Growth",
        "Market Expansion",
        "Operational Excellence",
      ],
      experience: "5+ years",
      location: "Lahore",
      bio: "LUMS Graduate leading strategy & analytics at Rewaa, one of MENA's top SaaS startups. Former co-founder with expertise in driving impact at high-growth companies like Airlift and Fleek.",
      image: "/mentors/mehras.jpeg",
      initials: "MT",
      color: "from-accent to-primary",
      availableSlots: ["Thursdays 8-10 PM", "Fridays 4-6 PM"],
      achievements: [
        "Led strategy at top MENA SaaS startup",
        "Ex-cofounder with successful exit",
        "Expert in operational excellence",
      ],
    },
    {
      name: "Zeeshan Hayat",
      title: "Product Manager",
      company: "Yassir (YC W20)",
      expertise: [
        "Product Strategy",
        "International Expansion",
        "Data Analytics",
        "Agile Management",
        "Business Intelligence",
      ],
      experience: "6+ years",
      location: "Lahore",
      bio: "LUMS Graduate and seasoned Product Manager with track record of driving global product success at Yassir, Airlift, and SmashCloud. Expert in international market expansion and data-driven decision making.",
      image: "/mentors/zeeshan.jpeg",
      initials: "ZH",
      color: "from-primary to-secondary",
      availableSlots: ["Mondays 7-9 PM", "Thursdays 5-7 PM"],
      achievements: [
        "Led grocery experience across 5+ geographies",
        "Increased conversion rates and CLTV through personalization",
        "Reduced packaging costs from Rs 43 to Rs 11 per order",
      ],
    },
    {
      name: "Taaha Waseem",
      title: "Business Analyst",
      company: "Metal (YC W23)",
      expertise: [
        "Data Analysis",
        "Business Intelligence",
        "Operations Management",
        "Problem Solving",
        "Team Leadership",
      ],
      experience: "4+ years",
      location: "Lahore",
      bio: "Monash University graduate with experience at Metal, Fleek, Daraz, and Airlift. Expert in building data functions and leading analyst teams to identify solutions for core business problems.",
      image: "/mentors/taaha.jpeg",
      initials: "TW",
      color: "from-secondary to-primary",
      availableSlots: ["Tuesdays 6-8 PM", "Saturdays 2-4 PM"],
      achievements: [
        "Built data analysis function at Fleek from scratch",
        "Led team of analysts at PathPilot for AI model evaluation",
        "Improved demand forecasting accuracy at Airlift",
      ],
    },
    {
      name: "Rida Kamran",
      title: "Product Manager",
      company: "SE Health",
      expertise: ["Product Management", "Data Analytics", "Machine Learning", "User Retention", "Growth Strategy"],
      experience: "6+ years",
      location: "Canada",
      bio: "Fulbright Scholar with MS in Business Analytics from University of Rochester and BS in Economics from LUMS. Product Manager at SE Health with proven track record at Bayt.com, Airlift, and Daraz. Expert in data-driven product strategies and user engagement.",
      image: "/mentors/rida.jpeg",
      initials: "RK",
      color: "from-accent to-secondary",
      availableSlots: ["Wednesdays 6-8 PM", "Sundays 11 AM-1 PM"],
      achievements: [
        "Increased registrations by 14% and engagement by 3.5% at Bayt.com",
        "Boosted repurchase rates by 12% through ML recommendations at Daraz",
        "Enhanced rider utilization from 1.5 to 1.7 orders per hour at Airlift",
      ],
    },
    {
      name: "Rahma Farrukh",
      title: "HR People Partner",
      company: "Unilever",
      expertise: ["Human Resources", "Talent Management", "Recruitment", "Performance Management", "People Operations"],
      experience: "4+ years",
      location: "United Kingdom",
      bio: "LSE graduate with MSc in Human Resources Management and BS in Political Science from LUMS. Currently HR People Partner at Unilever with extensive experience at Airlift Technologies. Expert in recruitment, people operations, and performance management.",
      image: "/mentors/rahma.jpeg",
      initials: "RF",
      color: "from-primary to-accent",
      availableSlots: ["Fridays 7-9 PM", "Saturdays 3-5 PM"],
      achievements: [
        "Led recruitment and HRBP functions at Airlift Technologies",
        "Assistant HR Business Partner at Unilever Customer Development",
        "Graduated with Highest Distinction and Dean's Honor List",
      ],
    },
  ]

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="py-16 lg:py-24 relative overflow-hidden">
        <div className="absolute inset-0 bg-progrowth-gradient-light"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="secondary" className="mb-6 text-sm px-4 py-1">
              15+ Expert Mentors
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-balance mb-6">
              Learn from Pakistan's <span className="text-gradient">Top Professionals</span>
            </h1>
            <p className="text-xl text-muted-foreground text-balance mb-8 max-w-2xl mx-auto leading-relaxed">
              Get guidance from experienced leaders across technology, finance, marketing, and entrepreneurship who are
              committed to your growth.
            </p>
            <Link href="/join-member">
              <Button size="lg" className="text-lg px-10 py-6 shadow-lg">
                Get Matched with a Mentor
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Mentorship Benefits */}
      <section className="py-16 lg:py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Why Our Mentorship Works</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
              Structured, goal-oriented mentorship designed for maximum impact on your professional journey.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <Card className="text-center border-2 hover:border-primary/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-16 w-16 bg-gradient-to-br from-primary to-accent rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <Target className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Goal-Oriented Sessions</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Every mentorship session is focused on specific objectives and actionable outcomes for your career.
                </p>
              </CardContent>
            </Card>

<Card className="text-center border-2 hover:border-secondary/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-16 w-16 bg-gradient-to-br from-secondary to-accent rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <Users className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Perfect Matching</h3>
                <p className="text-muted-foreground leading-relaxed">
                  We match you with mentors based on your industry, career stage, and specific growth objectives.
                </p>
              </CardContent>
            </Card>

<Card className="text-center border-2 hover:border-accent/50 transition-all hover:shadow-xl">
              <CardContent className="p-10">
                <div className="h-16 w-16 bg-gradient-to-br from-accent to-primary rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <TrendingUp className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Proven Track Record</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Our mentors have guided 200+ professionals to achieve significant career milestones and business
                  success.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Mentors Grid */}
      <section className="py-16 lg:py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">Meet Our Expert Mentors</h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
              Industry leaders who are passionate about sharing their knowledge and helping you succeed.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {mentors.map((mentor, index) => (
              <Card key={index} className="border-2 hover:border-primary/50 transition-all hover:shadow-xl group">
                <CardContent className="p-8">
                  <div className="text-center mb-6">
                    <div className="w-24 h-24 rounded-full mx-auto mb-4 overflow-hidden group-hover:scale-110 transition-transform">
                      <Image
                        src={mentor.image || "/placeholder.svg"}
                        alt={mentor.name}
                        width={96}
                        height={96}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <h3 className="text-xl font-bold mb-1">{mentor.name}</h3>
                    <p className="text-primary font-medium">{mentor.title}</p>
                    <p className="text-muted-foreground text-sm">{mentor.company}</p>
                  </div>

<div className="space-y-4">
                    <div>
                      <p className="text-sm text-muted-foreground mb-2 font-medium">Expertise:</p>
                      <div className="flex flex-wrap gap-2">
                        {mentor.expertise.slice(0, 3).map((skill, skillIndex) => (
                          <Badge key={skillIndex} variant="outline" className="text-xs">
                            {skill}
                          </Badge>
                        ))}
                        {mentor.expertise.length > 3 && (
                          <Badge variant="outline" className="text-xs">
                            +{mentor.expertise.length - 3} more
                          </Badge>
                        )}
                      </div>
                    </div>

<div className="flex items-center justify-between text-sm text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Briefcase className="h-4 w-4" />
                        <span>{mentor.experience}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        <span>{mentor.location}</span>
                      </div>
                    </div>

<p className="text-sm text-muted-foreground leading-relaxed">{mentor.bio}</p>

{mentor.achievements && (
                      <div>
                        <p className="text-sm text-muted-foreground mb-2 font-medium">Key Achievements:</p>
                        <ul className="text-xs text-muted-foreground space-y-2">
                          {mentor.achievements.slice(0, 2).map((achievement, achIndex) => (
                            <li key={achIndex} className="flex items-start gap-2">
                              <div className="h-1.5 w-1.5 bg-primary rounded-full mt-1.5 flex-shrink-0"></div>
                              <span className="leading-relaxed">{achievement}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    )}

<div className="flex items-center justify-between pt-4 border-t">
                      <div className="flex items-center space-x-1">
                        {[...Array(5)].map((_, i) => (
                          <Star key={i} className="h-4 w-4 fill-secondary text-secondary" />
                        ))}
                        <span className="text-sm text-muted-foreground ml-2 font-medium">5.0</span>
                      </div>
                      <Link href="/join-member">
                        <Button
                          size="sm"
                          variant="outline"
                          className="hover:bg-primary hover:text-primary-foreground transition-colors bg-transparent"
                        >
                          <MessageCircle className="h-4 w-4 mr-2" />
                          Request
                        </Button>
                      </Link>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* How Mentorship Works */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold mb-4">How Mentorship Works</h2>
              <p className="text-xl text-muted-foreground">
                A structured approach to maximize the value of your mentorship experience.
              </p>
            </div>

<div className="grid md:grid-cols-2 gap-12 items-center">
              <div className="space-y-8">
                <div className="flex items-start space-x-4">
                  <div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 text-primary-foreground font-bold text-sm">
                    1
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Initial Matching</h3>
                    <p className="text-muted-foreground">
                      Based on your application, we match you with 2-3 potential mentors who align with your goals and
                      industry.
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 text-primary-foreground font-bold text-sm">
                    2
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Introduction Call</h3>
                    <p className="text-muted-foreground">
                      Have a 30-minute introduction call to discuss your objectives and establish the mentorship
                      relationship.
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 text-primary-foreground font-bold text-sm">
                    3
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Monthly Sessions</h3>
                    <p className="text-muted-foreground">
                      Regular 60-minute sessions focused on your specific challenges, goals, and professional
                      development.
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 text-primary-foreground font-bold text-sm">
                    4
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Ongoing Support</h3>
                    <p className="text-muted-foreground">
                      Access to your mentor for quick questions and guidance between sessions via our platform.
                    </p>
                  </div>
                </div>
              </div>

<Card className="border-0 shadow-lg">
                <CardContent className="p-8">
                  <h3 className="text-xl font-semibold mb-6">What to Expect</h3>
                  <div className="space-y-4">
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Career strategy and planning guidance</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Industry insights and market knowledge</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Network introductions and connections</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Skill development recommendations</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Accountability and progress tracking</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="h-2 w-2 bg-primary rounded-full"></div>
                      <span className="text-sm">Real-world problem solving</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-bold mb-6">Ready to Find Your Mentor?</h2>
            <p className="text-xl text-muted-foreground mb-8">
              Join ProGrowth Labs and get matched with an expert mentor who can accelerate your professional growth.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/join-member">
                <Button size="lg" className="text-lg px-8">
                  Apply for Mentorship
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="/how-it-works">
                <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
                  Learn More
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated color palette to match blue theme from PDF */
  --background: hsl(0 0% 100%); /* Pure white */
  --foreground: hsl(222.2 84% 4.9%); /* Deep charcoal */
  --card: hsl(0 0% 100%); /* White cards */
  --card-foreground: oklch(0.145 0 0);
  --popover: hsl(0 0% 100%);
  --popover-foreground: oklch(0.145 0 0);
  --primary: hsl(221.2 83.2% 53.3%); /* Vibrant blue #5B7FFF */
  --primary-foreground: rgb(255, 255, 255);
  --secondary: hsl(210 40% 96%); /* Bright cyan #00D4FF */
  --secondary-foreground: oklch(0.205 0 0);
  --muted: hsl(210 40% 96%);
  --muted-foreground: oklch(0.556 0 0);
  --accent: hsl(210 40% 96%); /* Mid-gradient blue-cyan */
  --accent-foreground: oklch(0.205 0 0);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: hsl(214.3 31.8% 91.4%);
  --input: hsl(214.3 31.8% 91.4%);
  --ring: hsl(221.2 83.2% 53.3%);
  --chart-1: hsl(221.2 83.2% 53.3%);
  --chart-2: hsl(212 95% 68%);
  --chart-3: hsl(216 92% 60%);
  --chart-4: hsl(210 98% 78%);
  --chart-5: hsl(212 97% 87%);
  --radius: 0.625rem; /* Larger, more modern radius */
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: rgb(37, 99, 235);
  --sidebar-primary: rgb(37, 99, 235);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: rgb(37, 99, 235);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --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.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --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;
  }
}</article></body></html>