[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BikeIcon as MotorbikeIcon, TrendingUp, Users } from "lucide-react" import { HowItWorks } from "@/components/how-it-works" import { RideSearch } from "@/components/ride-search" export default function Home() { return (

Share Rides, Save Money

Connect with local two-wheeler owners for affordable daily commutes at just ₹5 per km.

Why Choose Our Platform?

Our two-wheeler sharing platform benefits both riders and vehicle owners

Affordable Rides Just ₹5 per kilometer

Save money on your daily commute with our affordable ride-sharing options.

Earn as an Owner ₹3 per km goes to you

Vehicle owners earn ₹3 per km. A daily 20km ride can earn you ₹60 per day!

Daily Route Matching Find regular commuters

Our smart matching system connects you with riders who share your daily route.

Ready to Get Started?

Join thousands of users who are already saving money and reducing their carbon footprint.

) } [V0_FILE]typescriptreact:file="components/ride-search.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MapPin, Calendar, Clock, Search } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar as CalendarComponent } from "@/components/ui/calendar" import { format } from "date-fns" import { cn } from "@/lib/utils" export function RideSearch() { const [date, setDate] = useState() return ( Find a Ride

Pickup Location

Destination

Date

Time

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MapPin, BikeIcon as MotorbikeIcon, CreditCard, Calendar } from "lucide-react" export function HowItWorks() { return (

How It Works

Our platform makes it easy to find and share rides in just a few simple steps

1. Enter Your Route

Enter your pickup and drop-off locations to find available rides.

2. Choose a Ride

Browse available two-wheelers and select the one that fits your needs.

3. Pay Securely

Pay just ₹5 per kilometer through our secure payment system.

4. Schedule Regular Rides

Set up daily commutes and save even more on your regular travel.

) } [V0_FILE]typescriptreact:file="app/offer-ride/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { MapPin, Clock, Info } from "lucide-react" export default function OfferRidePage() { return (

Offer Your Vehicle

Earn ₹3 per kilometer

For a daily 20km ride, you can earn ₹60 per day or ₹1,800 per month!

Vehicle Details Route Details Availability Vehicle Information Provide details about your two-wheeler

Vehicle Type

Model

Registration Number

Year of Manufacture

Vehicle Description

</div>
              </CardContent>
              <CardFooter>
                <Button className="w-full">Save & Continue</Button>
              </CardFooter>
            </Card>
          </TabsContent>

<TabsContent value="route-details">
            <Card>
              <CardHeader>
                <CardTitle>Route Information</CardTitle>
                <CardDescription>Specify your regular travel route</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="start-location">Start Location</Label>
                  <div className="flex">
                    <div className="flex items-center justify-center px-3 border border-r-0 rounded-l-md bg-muted">
                      <MapPin className="h-4 w-4 text-muted-foreground" />
                    </div>
                    <Input id="start-location" placeholder="Enter your starting point" className="rounded-l-none" />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="end-location">End Location</Label>
                  <div className="flex">
                    <div className="flex items-center justify-center px-3 border border-r-0 rounded-l-md bg-muted">
                      <MapPin className="h-4 w-4 text-muted-foreground" />
                    </div>
                    <Input id="end-location" placeholder="Enter your destination" className="rounded-l-none" />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="route-description">Route Description</Label>
                  <Textarea
                    id="route-description"
                    placeholder="Describe your route, including major landmarks or areas you pass through"
                    rows={4}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="distance">Approximate Distance (km)</Label>
                  <Input id="distance" type="number" placeholder="e.g., 20" />
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full">Save & Continue</Button>
              </CardFooter>
            </Card>
          </TabsContent>

<TabsContent value="availability">
            <Card>
              <CardHeader>
                <CardTitle>Availability Schedule</CardTitle>
                <CardDescription>Set your regular availability for rides</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Days Available</Label>
                    <div className="grid grid-cols-2 gap-2">
                      {["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].map((day) => (
                        <div key={day} className="flex items-center space-x-2">
                          <input type="checkbox" id={day.toLowerCase()} className="rounded border-gray-300" />
                          <Label htmlFor={day.toLowerCase()}>{day}</Label>
                        </div>
                      ))}
                    </div>
                  </div>

<div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="departure-time">Departure Time</Label>
                      <div className="flex">
                        <div className="flex items-center justify-center px-3 border border-r-0 rounded-l-md bg-muted">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                        </div>
                        <Input id="departure-time" type="time" className="rounded-l-none" />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="return-time">Return Time</Label>
                      <div className="flex">
                        <div className="flex items-center justify-center px-3 border border-r-0 rounded-l-md bg-muted">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                        </div>
                        <Input id="return-time" type="time" className="rounded-l-none" />
                      </div>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="additional-notes">Additional Notes</Label>
                  <Textarea
                    id="additional-notes"
                    placeholder="Any additional information about your availability"
                    rows={4}
                  />
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full">Complete Registration</Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/find-ride/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { RideSearch } from "@/components/ride-search"
import { MapPin, Clock, Calendar, BikeIcon as MotorbikeIcon, Star, ArrowRight } from "lucide-react"

export default function FindRidePage() {
  // Sample ride data
  const rides = [
    {
      id: 1,
      driver: {
        name: "Rahul S.",
        avatar: "/placeholder-user.jpg",
        rating: 4.8,
        rides: 124,
      },
      vehicle: {
        type: "Motorcycle",
        model: "Hero Splendor Plus",
        year: 2021,
      },
      route: {
        start: "Andheri East",
        end: "Bandra Kurla Complex",
        distance: 12,
        departureTime: "08:00 AM",
        arrivalTime: "08:30 AM",
        date: "Today",
      },
      price: 60,
    },
    {
      id: 2,
      driver: {
        name: "Priya M.",
        avatar: "/placeholder-user.jpg",
        rating: 4.9,
        rides: 86,
      },
      vehicle: {
        type: "Electric Scooter",
        model: "Ather 450X",
        year: 2022,
      },
      route: {
        start: "Powai",
        end: "Hiranandani Gardens",
        distance: 8,
        departureTime: "09:15 AM",
        arrivalTime: "09:35 AM",
        date: "Today",
      },
      price: 40,
    },
    {
      id: 3,
      driver: {
        name: "Amit K.",
        avatar: "/placeholder-user.jpg",
        rating: 4.7,
        rides: 56,
      },
      vehicle: {
        type: "Scooter",
        model: "Honda Activa 6G",
        year: 2020,
      },
      route: {
        start: "Malad West",
        end: "Goregaon East",
        distance: 10,
        departureTime: "08:30 AM",
        arrivalTime: "09:00 AM",
        date: "Tomorrow",
      },
      price: 50,
    },
  ]

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Find a Ride</h1>

<div className="mt-12">
        <h2 className="text-2xl font-semibold mb-4">Available Rides</h2>

<div className="grid gap-6">
          {rides.map((ride) => (
            <Card key={ride.id} className="overflow-hidden">
              <div className="flex flex-col md:flex-row">
                <CardHeader className="md:w-1/4 flex-shrink-0 border-r border-border">
                  <div className="flex flex-col items-center text-center">
                    <Avatar className="h-16 w-16 mb-2">
                      <AvatarImage src={ride.driver.avatar} alt={ride.driver.name} />
                      <AvatarFallback>
                        {ride.driver.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <h3 className="font-semibold">{ride.driver.name}</h3>
                    <div className="flex items-center mt-1">
                      <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 mr-1" />
                      <span>{ride.driver.rating}</span>
                      <span className="text-muted-foreground ml-1">({ride.driver.rides} rides)</span>
                    </div>
                    <div className="mt-4">
                      <Badge variant="outline" className="flex items-center gap-1">
                        <MotorbikeIcon className="h-3 w-3" />
                        {ride.vehicle.type}
                      </Badge>
                      <p className="text-sm mt-1">
                        {ride.vehicle.model}, {ride.vehicle.year}
                      </p>
                    </div>
                  </div>
                </CardHeader>

<CardContent className="md:w-2/4 flex-grow p-6">
                  <div className="flex items-center mb-4">
                    <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{ride.route.date}</span>
                  </div>

<div className="relative pl-6 border-l border-dashed border-border">
                    <div className="absolute left-0 top-0 w-3 h-3 -ml-1.5 rounded-full bg-green-500"></div>
                    <div className="mb-6">
                      <p className="font-medium">{ride.route.departureTime}</p>
                      <p className="text-lg font-semibold">{ride.route.start}</p>
                    </div>

<div className="absolute left-0 bottom-0 w-3 h-3 -ml-1.5 rounded-full bg-primary"></div>
                    <div>
                      <p className="font-medium">{ride.route.arrivalTime}</p>
                      <p className="text-lg font-semibold">{ride.route.end}</p>
                    </div>
                  </div>

<div className="mt-4 flex items-center text-sm text-muted-foreground">
                    <MapPin className="h-4 w-4 mr-1" />
                    <span>{ride.route.distance} km</span>
                    <Clock className="h-4 w-4 ml-4 mr-1" />
                    <span>
                      ~{Number.parseInt(ride.route.arrivalTime) - Number.parseInt(ride.route.departureTime)} min
                    </span>
                  </div>
                </CardContent>

<CardFooter className="md:w-1/4 flex-shrink-0 border-l border-border p-6 flex flex-col items-center justify-center">
                  <div className="text-center mb-4">
                    <p className="text-sm text-muted-foreground">Price</p>
                    <p className="text-3xl font-bold">₹{ride.price}</p>
                    <p className="text-xs text-muted-foreground">₹{ride.price / ride.route.distance} per km</p>
                  </div>

<Button className="w-full">
                    Book Ride
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </CardFooter>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { MapPin, Clock, BikeIcon as MotorbikeIcon, Star, ArrowRight, User, Wallet, Bell } from "lucide-react"

export default function DashboardPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-1/4">
          <Card>
            <CardHeader>
              <div className="flex flex-col items-center">
                <Avatar className="h-24 w-24 mb-4">
                  <AvatarImage src="/placeholder-user.jpg" alt="User" />
                  <AvatarFallback>UN</AvatarFallback>
                </Avatar>
                <CardTitle>Vikram Singh</CardTitle>
                <CardDescription>Member since March 2023</CardDescription>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex justify-center gap-4 mb-6">
                <div className="text-center">
                  <p className="text-2xl font-bold">42</p>
                  <p className="text-sm text-muted-foreground">Rides</p>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold">4.8</p>
                  <p className="text-sm text-muted-foreground">Rating</p>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold">₹2,460</p>
                  <p className="text-sm text-muted-foreground">Earned</p>
                </div>
              </div>

<nav className="space-y-2">
                <Button variant="ghost" className="w-full justify-start" asChild>
                  <Link href="/dashboard">
                    <User className="mr-2 h-4 w-4" />
                    My Profile
                  </Link>
                </Button>
                <Button variant="ghost" className="w-full justify-start" asChild>
                  <Link href="/dashboard/wallet">
                    <Wallet className="mr-2 h-4 w-4" />
                    My Wallet
                  </Link>
                </Button>
                <Button variant="ghost" className="w-full justify-start" asChild>
                  <Link href="/dashboard/notifications">
                    <Bell className="mr-2 h-4 w-4" />
                    Notifications
                  </Link>
                </Button>
              </nav>
            </CardContent>
            <CardFooter>
              <Button variant="outline" className="w-full">
                Sign Out
              </Button>
            </CardFooter>
          </Card>
        </div>

<div className="md:w-3/4">
          <h1 className="text-3xl font-bold mb-6">Dashboard</h1>

<Tabs defaultValue="upcoming">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="upcoming">Upcoming Rides</TabsTrigger>
              <TabsTrigger value="history">Ride History</TabsTrigger>
              <TabsTrigger value="earnings">Earnings</TabsTrigger>
            </TabsList>

<TabsContent value="upcoming" className="space-y-4 mt-6">
              <Card>
                <div className="flex flex-col md:flex-row">
                  <CardHeader className="md:w-1/4 flex-shrink-0 border-r border-border">
                    <div className="flex flex-col">
                      <Badge className="self-start mb-2">Today</Badge>
                      <h3 className="font-semibold">Passenger: Neha R.</h3>
                      <div className="flex items-center mt-1">
                        <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 mr-1" />
                        <span>4.9</span>
                      </div>
                      <div className="mt-4">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <MotorbikeIcon className="h-3 w-3" />
                          Your Vehicle
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>

<div className="relative pl-6 border-l border-dashed border-border">
                      <div className="absolute left-0 top-0 w-3 h-3 -ml-1.5 rounded-full bg-green-500"></div>
                      <div className="mb-6">
                        <p className="text-lg font-semibold">Andheri East</p>
                      </div>

<div className="absolute left-0 bottom-0 w-3 h-3 -ml-1.5 rounded-full bg-primary"></div>
                      <div>
                        <p className="text-lg font-semibold">Bandra Kurla Complex</p>
                      </div>
                    </div>

<CardFooter className="md:w-1/4 flex-shrink-0 border-l border-border p-6 flex flex-col items-center justify-center">
                    <div className="text-center mb-4">
                      <p className="text-sm text-muted-foreground">Earnings</p>
                      <p className="text-3xl font-bold">₹36</p>
                      <p className="text-xs text-muted-foreground">₹3 per km</p>
                    </div>

<Button className="w-full">
                      Start Ride
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </CardFooter>
                </div>
              </Card>

<Card>
                <div className="flex flex-col md:flex-row">
                  <CardHeader className="md:w-1/4 flex-shrink-0 border-r border-border">
                    <div className="flex flex-col">
                      <Badge className="self-start mb-2">Tomorrow</Badge>
                      <h3 className="font-semibold">Passenger: Raj K.</h3>
                      <div className="flex items-center mt-1">
                        <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 mr-1" />
                        <span>4.7</span>
                      </div>
                      <div className="mt-4">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <MotorbikeIcon className="h-3 w-3" />
                          Your Vehicle
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>

<div className="relative pl-6 border-l border-dashed border-border">
                      <div className="absolute left-0 top-0 w-3 h-3 -ml-1.5 rounded-full bg-green-500"></div>
                      <div className="mb-6">
                        <p className="text-lg font-semibold">Andheri East</p>
                      </div>

<CardFooter className="md:w-1/4 flex-shrink-0 border-l border-border p-6 flex flex-col items-center justify-center">
                    <div className="text-center mb-4">
                      <p className="text-sm text-muted-foreground">Earnings</p>
                      <p className="text-3xl font-bold">₹36</p>
                      <p className="text-xs text-muted-foreground">₹3 per km</p>
                    </div>

<Button variant="outline" className="w-full">
                      Cancel Ride
                    </Button>
                  </CardFooter>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="history" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Ride History</CardTitle>
                  <CardDescription>Your past rides and earnings</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {[...Array(5)].map((_, i) => (
                      <div key={i} className="flex justify-between items-center border-b pb-4">
                        <div>
                          <p className="font-medium">Andheri East → BKC</p>
                          <p className="text-sm text-muted-foreground">
                            {new Date(Date.now() - i * 86400000).toLocaleDateString()} • 12 km
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="font-medium">₹36</p>
                          <p className="text-sm text-muted-foreground">
                            Passenger: {["Neha R.", "Raj K.", "Amit S.", "Priya M.", "Vikram J."][i]}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" className="w-full">
                    View All History
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="earnings" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Earnings Overview</CardTitle>
                  <CardDescription>Your earnings from ride sharing</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-3 gap-4 mb-6">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardDescription>Today</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-2xl font-bold">₹72</p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader className="pb-2">
                        <CardDescription>This Week</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-2xl font-bold">₹360</p>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader className="pb-2">
                        <CardDescription>This Month</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-2xl font-bold">₹1,440</p>
                      </CardContent>
                    </Card>
                  </div>

<div className="space-y-4">
                    <h3 className="font-medium">Recent Earnings</h3>
                    {[...Array(5)].map((_, i) => (
                      <div key={i} className="flex justify-between items-center border-b pb-4">
                        <div>
                          <p className="font-medium">
                            Ride with {["Neha R.", "Raj K.", "Amit S.", "Priya M.", "Vikram J."][i]}
                          </p>
                          <p className="text-sm text-muted-foreground">
                            {new Date(Date.now() - i * 86400000).toLocaleDateString()} • 12 km
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="font-medium">₹36</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Withdraw to Bank Account</Button>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from psybaba111

More Templates Like This

About

Tags

Share

About

Tags

Share

More from psybaba111

More Templates Like This