[V0_FILE]typescriptreact:file="app/page.tsx" import Header from "@/components/Header" import Hero from "@/components/Hero" import Search from "@/components/Search" import Features from "@/components/Features" import CallToAction from "@/components/CallToAction" import Footer from "@/components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/Header.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" export default function Header() { return (

RCP

) } [V0_FILE]typescriptreact:file="components/Hero.tsx" import { Button } from "@/components/ui/button" export default function Hero() { return (

Find Your Climbing Partner in Portugal

Connect with fellow climbers, share rides, and explore Portugal's best climbing spots.

) } [V0_FILE]typescriptreact:file="components/Search.tsx" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" export default function Search() { return (

Find Partnerships and Rides

) } [V0_FILE]typescriptreact:file="components/Features.tsx" import { Car, Users, Map, Calendar } from "lucide-react" const features = [ { icon: , title: "Ride Sharing", description: "Find or offer rides to climbing spots across Portugal.", }, { icon: , title: "Partner Matching", description: "Connect with climbers of similar skill levels and interests.", }, { icon: , title: "Spot Discovery", description: "Explore new climbing locations recommended by the community.", }, { icon: , title: "Event Planning", description: "Organize and join climbing events and meetups.", }, ] export default function Features() { return (

Why Choose RockClimbingPortugal

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/CallToAction.tsx" import { Button } from "@/components/ui/button" export default function CallToAction() { return (

Ready to Start Your Climbing Adventure?

Join our community of passionate climbers and explore Portugal's beautiful landscapes.

) } [V0_FILE]typescriptreact:file="components/Footer.tsx" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import "@/styles/globals.css" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "RockClimbingPortugal - Connect, Climb, Explore", description: "Find climbing partners and share rides to the best climbing spots in Portugal.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/create-ride/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" export default function CreateRide() { const [formData, setFormData] = useState({ destination: "", date: "", time: "", seats: "", description: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // TODO: Implement ride creation logic console.log("Ride created:", formData) } return (

Create a Ride

Destination

Date

Time

Available Seats

Description

</div>
        <Button type="submit">Create Ride</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/create-partnership/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export default function CreatePartnership() {
  const [formData, setFormData] = useState({
    title: "",
    date: "",
    location: "",
    description: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement partnership creation logic
    console.log("Partnership created:", formData)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Create a Partnership</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="title" className="block mb-1">
            Title
          </label>
          <Input id="title" name="title" value={formData.title} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="date" className="block mb-1">
            Date
          </label>
          <Input id="date" name="date" type="date" value={formData.date} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="location" className="block mb-1">
            Location
          </label>
          <Input id="location" name="location" value={formData.location} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="description" className="block mb-1">
            Description
          </label>
          <Textarea id="description" name="description" value={formData.description} onChange={handleChange} rows={4} />
        </div>
        <Button type="submit">Create Partnership</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/search/page.tsx"
"use client"

import { useState } from "react"
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"
import "leaflet/dist/leaflet.css"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export default function Search() {
  const [searchType, setSearchType] = useState("place")
  const [searchQuery, setSearchQuery] = useState("")

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement search logic
    console.log("Searching for:", searchType, searchQuery)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Search Climbing Spots</h1>
      <form onSubmit={handleSearch} className="mb-6 flex space-x-4">
        <select value={searchType} onChange={(e) => setSearchType(e.target.value)} className="border rounded px-2 py-1">
          <option value="place">Place</option>
          <option value="region">Region</option>
        </select>
        <Input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder={`Search by ${searchType}`}
          className="flex-grow"
        />
        <Button type="submit">Search</Button>
      </form>
      <div className="h-[600px] w-full">
        <MapContainer center={[39.5, -8]} zoom={7} style={{ height: "100%", width: "100%" }}>
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          />
          {/* TODO: Add markers for climbing spots */}
        </MapContainer>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/auth/login/page.tsx"
"use client"

import { useState } from "react"
import { signIn } from "next-auth/react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function Login() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement login logic
    const result = await signIn("credentials", {
      redirect: false,
      email,
      password,
    })
    if (result?.error) {
      console.error(result.error)
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Login</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </div>
        <div>
          <label htmlFor="password" className="block mb-1">
            Password
          </label>
          <Input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <Button type="submit">Login</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/auth/signup/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function Signup() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement signup logic
    console.log("Signup:", formData)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Sign Up</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="name" className="block mb-1">
            Name
          </label>
          <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="password" className="block mb-1">
            Password
          </label>
          <Input
            id="password"
            name="password"
            type="password"
            value={formData.password}
            onChange={handleChange}
            required
          />
        </div>
        <div>
          <label htmlFor="confirmPassword" className="block mb-1">
            Confirm Password
          </label>
          <Input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            value={formData.confirmPassword}
            onChange={handleChange}
            required
          />
        </div>
        <Button type="submit">Sign Up</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/auth/recover/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function RecoverPassword() {
  const [email, setEmail] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement password recovery logic
    console.log("Recover password for:", email)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Recover Password</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </div>
        <Button type="submit">Send Recovery Email</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/auth/reset-password/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function ResetPassword() {
  const [formData, setFormData] = useState({
    password: "",
    confirmPassword: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement password reset logic
    console.log("Reset password:", formData)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Reset Password</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="password" className="block mb-1">
            New Password
          </label>
          <Input
            id="password"
            name="password"
            type="password"
            value={formData.password}
            onChange={handleChange}
            required
          />
        </div>
        <div>
          <label htmlFor="confirmPassword" className="block mb-1">
            Confirm New Password
          </label>
          <Input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            value={formData.confirmPassword}
            onChange={handleChange}
            required
          />
        </div>
        <Button type="submit">Reset Password</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectGroup,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from "@/components/ui/select"

const climbingStyles = ["Bouldering", "Sport Climbing", "Trad Climbing", "Free Solo"]
const grades = [
  "5.7",
  "5.8",
  "5.9",
  "5.10a",
  "5.10b",
  "5.10c",
  "5.10d",
  "5.11a",
  "5.11b",
  "5.11c",
  "5.11d",
  "5.12a",
  "5.12b",
  "5.12c",
  "5.12d",
  "5.13a",
  "5.13b",
  "5.13c",
  "5.13d",
  "5.14a",
  "5.14b",
  "5.14c",
  "5.14d",
  "5.15a",
  "5.15b",
  "5.15c",
  "5.15d",
]

export default function Profile() {
  const [profile, setProfile] = useState({
    name: "",
    email: "",
    bio: "",
    region: "",
    profilePicture: "",
    favoriteStyles: [],
    maxGrade: "",
  })

useEffect(() => {
    // TODO: Fetch user profile data
    // This is a placeholder. Replace with actual API call.
    setProfile({
      name: "John Doe",
      email: "john@example.com",
      bio: "Passionate rock climber",
      region: "Lisbon",
      profilePicture: "/placeholder.svg",
      favoriteStyles: ["Sport Climbing", "Bouldering"],
      maxGrade: "5.12a",
    })
  }, [])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setProfile((prev) => ({ ...prev, [name]: value }))
  }

const handleStyleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, checked } = e.target
    setProfile((prev) => ({
      ...prev,
      favoriteStyles: checked
        ? [...prev.favoriteStyles, value]
        : prev.favoriteStyles.filter((style) => style !== value),
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement profile update logic
    console.log("Updated profile:", profile)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Your Profile</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="profilePicture" className="block mb-1">
            Profile Picture
          </label>
          <Input id="profilePicture" name="profilePicture" type="file" accept="image/*" onChange={handleChange} />
          {profile.profilePicture && (
            <img
              src={profile.profilePicture || "/placeholder.svg"}
              alt="Profile"
              className="mt-2 w-32 h-32 object-cover rounded-full"
            />
          )}
        </div>
        <div>
          <label htmlFor="name" className="block mb-1">
            Name
          </label>
          <Input id="name" name="name" value={profile.name} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <Input id="email" name="email" type="email" value={profile.email} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="bio" className="block mb-1">
            Bio
          </label>
          <Textarea id="bio" name="bio" value={profile.bio} onChange={handleChange} rows={4} />
        </div>
        <div>
          <label htmlFor="region" className="block mb-1">
            Region
          </label>
          <Input id="region" name="region" value={profile.region} onChange={handleChange} />
        </div>
        <div>
          <label className="block mb-1">Favorite Climbing Styles</label>
          <div className="space-y-2">
            {climbingStyles.map((style) => (
              <label key={style} className="flex items-center">
                <input
                  type="checkbox"
                  name="favoriteStyles"
                  value={style}
                  checked={profile.favoriteStyles.includes(style)}
                  onChange={handleStyleChange}
                  className="mr-2"
                />
                {style}
              </label>
            ))}
          </div>
        </div>
        <div>
          <label htmlFor="maxGrade" className="block mb-1">
            Max Grade
          </label>
          <Select id="maxGrade" name="maxGrade" value={profile.maxGrade} onChange={handleChange}>
            <option value="">Select a grade</option>
            {grades.map((grade) => (
              <option key={grade} value={grade}>
                {grade}
              </option>
            ))}
          </Select>
        </div>
        <Button type="submit">Update Profile</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/users/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import Link from "next/link"

interface User {
  id: number
  name: string
  region: string
  profilePicture: string
  favoriteStyles: string[]
  maxGrade: string
}

export default function BrowseUsers() {
  const [users, setUsers] = useState<User[]>([])
  const [filteredUsers, setFilteredUsers] = useState<User[]>([])
  const [regionFilter, setRegionFilter] = useState("")

useEffect(() => {
    // TODO: Fetch users from API
    // This is a placeholder. Replace with actual API call.
    setUsers([
      {
        id: 1,
        name: "Alice",
        region: "Lisbon",
        profilePicture: "/placeholder.svg",
        favoriteStyles: ["Sport Climbing", "Bouldering"],
        maxGrade: "5.11c",
      },
      {
        id: 2,
        name: "Bob",
        region: "Porto",
        profilePicture: "/placeholder.svg",
        favoriteStyles: ["Trad Climbing"],
        maxGrade: "5.10b",
      },
      {
        id: 3,
        name: "Charlie",
        region: "Algarve",
        profilePicture: "/placeholder.svg",
        favoriteStyles: ["Bouldering", "Sport Climbing"],
        maxGrade: "5.12a",
      },
    ])
  }, [])

useEffect(() => {
    setFilteredUsers(users.filter((user) => user.region.toLowerCase().includes(regionFilter.toLowerCase())))
  }, [users, regionFilter])

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Browse Users</h1>
      <div className="mb-4">
        <Input
          type="text"
          placeholder="Filter by region"
          value={regionFilter}
          onChange={(e) => setRegionFilter(e.target.value)}
        />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredUsers.map((user) => (
          <div key={user.id} className="border p-4 rounded">
            <img
              src={user.profilePicture || "/placeholder.svg"}
              alt={`${user.name}'s profile`}
              className="w-24 h-24 object-cover rounded-full mb-2"
            />
            <h2 className="text-xl font-semibold">{user.name}</h2>
            <p>Region: {user.region}</p>
            <p>Favorite Styles: {user.favoriteStyles.join(", ")}</p>
            <p>Max Grade: {user.maxGrade}</p>
            <Link href={`/users/${user.id}`}>
              <Button className="mt-2">View Profile</Button>
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/users/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"

interface User {
  id: number
  name: string
  email: string
  bio: string
  region: string
  profilePicture: string
  favoriteStyles: string[]
  maxGrade: string
}

export default function UserProfile() {
  const [user, setUser] = useState<User | null>(null)
  const params = useParams()
  const { id } = params

useEffect(() => {
    // TODO: Fetch user data from API
    // This is a placeholder. Replace with actual API call.
    setUser({
      id: Number(id),
      name: "John Doe",
      email: "john@example.com",
      bio: "Passionate rock climber with 5 years of experience.",
      region: "Lisbon",
      profilePicture: "/placeholder.svg",
      favoriteStyles: ["Sport Climbing", "Bouldering"],
      maxGrade: "5.12a",
    })
  }, [id])

if (!user) {
    return <div>Loading...</div>
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-2xl mx-auto">
        <div className="flex items-center space-x-4 mb-6">
          <img
            src={user.profilePicture || "/placeholder.svg"}
            alt={`${user.name}'s profile`}
            className="w-32 h-32 object-cover rounded-full"
          />
          <div>
            <h1 className="text-3xl font-bold">{user.name}</h1>
            <p className="text-gray-600">{user.region}</p>
          </div>
        </div>
        <div className="space-y-4">
          <div>
            <h2 className="text-xl font-semibold mb-2">Bio</h2>
            <p>{user.bio}</p>
          </div>
          <div>
            <h2 className="text-xl font-semibold mb-2">Favorite Climbing Styles</h2>
            <ul className="list-disc list-inside">
              {user.favoriteStyles.map((style) => (
                <li key={style}>{style}</li>
              ))}
            </ul>
          </div>
          <div>
            <h2 className="text-xl font-semibold mb-2">Max Grade</h2>
            <p>{user.maxGrade}</p>
          </div>
          <div>
            <h2 className="text-xl font-semibold mb-2">Contact</h2>
            <p>{user.email}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]json:file="package.json"
{
  "name": "rock-climbing-portugal-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2",
    "leaflet": "^1.9.4",
    "react-leaflet": "^4.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

[V0_FILE]javascript:file="vite.config.js"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

[V0_FILE]javascript:file="postcss.config.js"
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]html:file="index.html"
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Climbing Portugal</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

[V0_FILE]typescriptreact:file="src/main.tsx"
import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter as Router } from "react-router-dom"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

[V0_FILE]css:file="src/index.css"
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Add any global styles here */

[V0_FILE]typescriptreact:file="src/App.tsx"
import { Routes, Route } from "react-router-dom"
import Header from "./components/Header"
import Footer from "./components/Footer"
import Home from "./pages/Home"
import CreateRide from "./pages/CreateRide"
import CreatePartnership from "./pages/CreatePartnership"
import Search from "./pages/Search"
import Login from "./pages/Login"
import Signup from "./pages/Signup"
import RecoverPassword from "./pages/RecoverPassword"
import ResetPassword from "./pages/ResetPassword"
import Profile from "./pages/Profile"
import BrowseUsers from "./pages/BrowseUsers"
import UserProfile from "./pages/UserProfile"

function App() {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/create-ride" element={<CreateRide />} />
          <Route path="/create-partnership" element={<CreatePartnership />} />
          <Route path="/search" element={<Search />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          <Route path="/recover-password" element={<RecoverPassword />} />
          <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/users" element={<BrowseUsers />} />
          <Route path="/users/:id" element={<UserProfile />} />
        </Routes>
      </main>
      <Footer />
    </div>
  )
}

export default App

[V0_FILE]typescriptreact:file="src/components/Header.tsx"
import { Link } from "react-router-dom"
import { Button } from "./ui/button"

export default function Header() {
  return (
    <header className="bg-white shadow-sm">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <Link to="/" className="text-2xl font-bold text-blue-600">
          RCP
        </Link>
        <nav className="hidden md:flex space-x-4">
          <Link to="/about" className="text-gray-600 hover:text-blue-600">
            About
          </Link>
          <Link to="/events" className="text-gray-600 hover:text-blue-600">
            Events
          </Link>
          <Link to="/partners" className="text-gray-600 hover:text-blue-600">
            Partners
          </Link>
        </nav>
        <div className="flex space-x-2">
          <Button variant="outline" as={Link} to="/create-ride">
            Create Ride
          </Button>
          <Button as={Link} to="/create-partnership">
            Create Partnership
          </Button>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="src/components/Footer.tsx"
import { Link } from "react-router-dom"
import { Facebook, Instagram, Twitter } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-gray-800 text-white py-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 className="text-xl font-semibold mb-4">RockClimbingPortugal</h3>
            <p className="text-gray-400">Connecting climbers across Portugal</p>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Quick Links</h4>
            <ul className="space-y-2">
              <li>
                <Link to="/about" className="text-gray-400 hover:text-white">
                  About Us
                </Link>
              </li>
              <li>
                <Link to="/events" className="text-gray-400 hover:text-white">
                  Events
                </Link>
              </li>
              <li>
                <Link to="/partners" className="text-gray-400 hover:text-white">
                  Find Partners
                </Link>
              </li>
              <li>
                <Link to="/rides" className="text-gray-400 hover:text-white">
                  Find Rides
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Follow Us</h4>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-400 hover:text-white">
                <Facebook />
              </a>
              <a href="#" className="text-gray-400 hover:text-white">
                <Instagram />
              </a>
              <a href="#" className="text-gray-400 hover:text-white">
                <Twitter />
              </a>
            </div>
          </div>
        </div>
        <div className="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
          <p>© {new Date().getFullYear()} RockClimbingPortugal. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="src/pages/Home.tsx"
import { Link } from "react-router-dom"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"
import { Car, Users, Map, Calendar } from "lucide-react"

export default function Home() {
  return (
    <div>
      <section className="bg-blue-600 text-white py-20">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Find Your Climbing Partner in Portugal</h1>
          <p className="text-xl mb-8">
            Connect with fellow climbers, share rides, and explore Portugal's best climbing spots.
          </p>
          <div className="space-x-4">
            <Button size="lg" variant="secondary" as={Link} to="/search">
              Find a Partner
            </Button>
            <Button size="lg" variant="outline" as={Link} to="/search">
              Join a Ride
            </Button>
          </div>
        </div>
      </section>

<section className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">Find Partnerships and Rides</h2>
          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
            <Input type="text" placeholder="Location" className="flex-grow" />
            <Input type="date" className="flex-grow" />
            <Button size="lg" className="w-full md:w-auto">
              Search
            </Button>
          </div>
        </div>
      </section>

<section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Why Choose RockClimbingPortugal</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                icon: <Car className="h-8 w-8 text-blue-600" />,
                title: "Ride Sharing",
                description: "Find or offer rides to climbing spots across Portugal.",
              },
              {
                icon: <Users className="h-8 w-8 text-blue-600" />,
                title: "Partner Matching",
                description: "Connect with climbers of similar skill levels and interests.",
              },
              {
                icon: <Map className="h-8 w-8 text-blue-600" />,
                title: "Spot Discovery",
                description: "Explore new climbing locations recommended by the community.",
              },
              {
                icon: <Calendar className="h-8 w-8 text-blue-600" />,
                title: "Event Planning",
                description: "Organize and join climbing events and meetups.",
              },
            ].map((feature, index) => (
              <div key={index} className="text-center">
                <div className="mb-4 inline-block">{feature.icon}</div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

<section className="bg-blue-600 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Start Your Climbing Adventure?</h2>
          <p className="text-xl mb-8">
            Join our community of passionate climbers and explore Portugal's beautiful landscapes.
          </p>
          <Button size="lg" variant="secondary" as={Link} to="/signup">
            Sign Up Now
          </Button>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/pages/CreateRide.tsx"
import { useState } from "react"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"
import { Textarea } from "../components/ui/textarea"

export default function CreateRide() {
  const [formData, setFormData] = useState({
    destination: "",
    date: "",
    time: "",
    seats: "",
    description: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement ride creation logic
    console.log("Ride created:", formData)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Create a Ride</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="destination" className="block mb-1">
            Destination
          </label>
          <Input id="destination" name="destination" value={formData.destination} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="date" className="block mb-1">
            Date
          </label>
          <Input id="date" name="date" type="date" value={formData.date} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="time" className="block mb-1">
            Time
          </label>
          <Input id="time" name="time" type="time" value={formData.time} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="seats" className="block mb-1">
            Available Seats
          </label>
          <Input id="seats" name="seats" type="number" value={formData.seats} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="description" className="block mb-1">
            Description
          </label>
          <Textarea id="description" name="description" value={formData.description} onChange={handleChange} rows={4} />
        </div>
        <Button type="submit">Create Ride</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/pages/CreatePartnership.tsx"
import { useState } from "react"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"
import { Textarea } from "../components/ui/textarea"

export default function CreatePartnership() {
  const [formData, setFormData] = useState({
    title: "",
    date: "",
    location: "",
    description: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement partnership creation logic
    console.log("Partnership created:", formData)
  }

[V0_FILE]typescriptreact:file="src/pages/Search.tsx"
import { useState } from "react"
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"
import "leaflet/dist/leaflet.css"
import { Input } from "../components/ui/input"
import { Button } from "../components/ui/button"

export default function Search() {
  const [searchType, setSearchType] = useState("place")
  const [searchQuery, setSearchQuery] = useState("")

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement search logic
    console.log("Searching for:", searchType, searchQuery)
  }

[V0_FILE]typescriptreact:file="src/pages/Login.tsx"
import { useState } from "react"
import { Link } from "react-router-dom"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"

export default function Login() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement login logic
    console.log("Login:", email, password)
  }

[V0_FILE]typescriptreact:file="src/pages/Signup.tsx"
import { useState } from "react"
import { Link } from "react-router-dom"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"

export default function Signup() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement signup logic
    console.log("Signup:", formData)
  }

[V0_FILE]typescriptreact:file="src/pages/RecoverPassword.tsx"
import { useState } from "react"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"

export default function RecoverPassword() {
  const [email, setEmail] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement password recovery logic
    console.log("Recover password for:", email)
  }

[V0_FILE]typescriptreact:file="src/pages/ResetPassword.tsx"
import { useState } from "react"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"

export default function ResetPassword() {
  const [formData, setFormData] = useState({
    password: "",
    confirmPassword: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement password reset logic
    console.log("Reset password:", formData)
  }

[V0_FILE]typescriptreact:file="src/pages/Profile.tsx" isFixed="true" isQuickEdit="true"
import { useState, useEffect } from "react"
import { Button } from "../components/ui/button"
import { Input } from "../components/ui/input"
import { Textarea } from "../components/ui/textarea"

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Implement profile update logic
    console.log("Updated profile:", profile)
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Your Profile</h1>
      <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
        <div>
          <label htmlFor="profilePicture" className="block mb-1">
            Profile Picture
          </label>
          <Input id="profilePicture" name="profilePicture" type="file" accept="image/*" onChange={handleChange} />
          {profile.profilePicture && (
            <img
              src={profile.profilePicture || "/placeholder.svg"}
              alt="Profile"
              className="mt-2 w-32 h-32 object-cover rounded-full"
            />
          )}
        </div>
        <div>
          <label htmlFor="name" className="block mb-1">
            Name
          </label>
          <Input id="name" name="name" value={profile.name} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <Input id="email" name="email" type="email" value={profile.email} onChange={handleChange} required />
        </div>
        <div>
          <label htmlFor="bio" className="block mb-1">
            Bio
          </label>
          <Textarea id="bio" name="bio" value={profile.bio} onChange={handleChange} rows={4} />
        </div>
        <div>
          <label htmlFor="region" className="block mb-1">
            Region
          </label>
          <Input id="region" name="region" value={profile.region} onChange={handleChange} />
        </div>
        <div>
          <label className="block mb-1">Favorite Climbing Styles</label>
          <div className="space-y-2">
            {climbingStyles.map((style) => (
              <label key={style} className="flex items-center">
                <input
                  type="checkbox"
                  name="favoriteStyles"
                  value={style}
                  checked={profile.favoriteStyles.includes(style)}
                  onChange={handleStyleChange}
                  className="mr-2"
                />
                {style}
              </label>
            ))}
          </div>
        </div>
        <div>
          <label htmlFor="maxGrade" className="block mb-1">
            Max Grade
          </label>
          <select
            id="maxGrade"
            name="maxGrade"
            value={profile.maxGrade}
            onChange={handleChange}
            className="w-full p-2 border rounded"
          >
            <option value="">Select a grade</option>
            {grades.map((grade) => (
              <option key={grade} value={grade}>
                {grade}
              </option>
            ))}
          </select>
        </div>
        <Button type="submit">Update Profile</Button>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/pages/BrowseUsers.tsx"
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
import { Input } from "../components/ui/input"
import { Button } from "../components/ui/button"

interface User {
  id: number
  name: string
  region: string
  profilePicture: string
  favoriteStyles: string[]
  maxGrade: string
}

useEffect(() => {
    setFilteredUsers(users.filter((user) => user.region.toLowerCase().includes(regionFilter.toLowerCase())))
  }, [users, regionFilter])

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Browse Users</h1>
      <div className="mb-4">
        <Input
          type="text"
          placeholder="Filter by region"
          value={regionFilter}
          onChange={(e) => setRegionFilter(e.target.value)}
        />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredUsers.map((user) => (
          <div key={user.id} className="border p-4 rounded">
            <img
              src={user.profilePicture || "/placeholder.svg"}
              alt={`${user.name}'s profile`}
              className="w-24 h-24 object-cover rounded-full mb-2"
            />
            <h2 className="text-xl font-semibold">{user.name}</h2>
            <p>Region: {user.region}</p>
            <p>Favorite Styles: {user.favoriteStyles.join(", ")}</p>
            <p>Max Grade: {user.maxGrade}</p>
            <Link to={`/users/${user.id}`}>
              <Button className="mt-2">View Profile</Button>
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/pages/UserProfile.tsx"
import { useState, useEffect } from "react"
import { useParams } from "react-router-dom"

interface User {
  id: number
  name: string
  email: string
  bio: string
  region: string
  profilePicture: string
  favoriteStyles: string[]
  maxGrade: string
}

export default function UserProfile() {
  const [user, setUser] = useState<User | null>(null)
  const { id } = useParams<{ id: string }>()

if (!user) {
    return <div>Loading...</div>
  }