Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / RSS Feeds / Full
Duplicate Snippet

Embed Snippet on Your Site

Full

Shaeonna Muhammad PRO
<10
Code Preview
Comments
php
<?php
import { useState } from 'react'
import { Heart, Users, Play, Home, Search, User, Bell, ArrowRight, X } from 'lucide-react'
import { Button } from "/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"
import { Input } from "/components/ui/input"
import { Label } from "/components/ui/label"
import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar"
export default function ShotAtLove() {
  const [currentPage, setCurrentPage] = useState<'home' | 'login' | 'signup' | 'community' | 'speed-dating' | 'profile'>('home')
  const [isPremium, setIsPremium] = useState(false)
  const [showPaywall, setShowPaywall] = useState(false)
  const [showDropdown, setShowDropdown] = useState(false)
  const [swipeIndex, setSwipeIndex] = useState(0)
  const [matches, setMatches] = useState<string[]>([])
  const [communityPosts, setCommunityPosts] = useState([
    { id: 1, author: 'Alex', content: 'Just had an amazing first date through this app!', likes: 24 },
    { id: 2, author: 'Jordan', content: 'Looking for advice on how to make a great first impression', likes: 12 },
  ])
  const [events, setEvents] = useState([
    { id: 1, title: 'Speed Dating Night', date: 'June 25, 2023', location: 'Downtown Lounge' },
    { id: 2, title: 'Singles Mixer', date: 'July 2, 2023', location: 'Beachside Bar' },
  ])
  // Sample user profiles for swiping
  const profiles = [
    { id: 1, name: 'Taylor', age: 28, bio: 'Adventure seeker and coffee enthusiast', distance: '2 miles away' },
    { id: 2, name: 'Morgan', age: 31, bio: 'Bookworm and amateur chef', distance: '5 miles away' },
    { id: 3, name: 'Casey', age: 25, bio: 'Music lover and travel addict', distance: '1 mile away' },
  ]
  const handleSwipe = (direction: 'left' | 'right') => {
    if (direction === 'right') {
      setMatches([...matches, profiles[swipeIndex].name])
    }
    if (swipeIndex < profiles.length - 1) {
      setSwipeIndex(swipeIndex + 1)
    } else {
      setSwipeIndex(0) // Reset or handle end of profiles
    }
  }
  const addCommunityPost = (content: string) => {
    setCommunityPosts([...communityPosts, { id: communityPosts.length + 1, author: 'You', content, likes: 0 }])
  }
  return (
    <div className="min-h-screen flex flex-col" style={{ fontFamily: 'Montserrat, sans-serif' }}>
      {/* App Header with Logo */}
      <header className="bg-blue-600 text-white p-4 shadow-lg">
        <div className="container mx-auto flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="relative">
              <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg blur opacity-75"></div>
              <div className="relative bg-black px-4 py-2 rounded-lg flex items-center">
                <span className="text-green-400 font-bold text-2xl">SHOT</span>
                <span className="text-blue-300 italic text-sm">at</span>
                <span className="text-pink-400 italic text-2xl">Love</span>
                <Heart className="text-pink-400 ml-1" />
              </div>
            </div>
          </div>
          <div className="relative">
            <Button variant="ghost" onClick={() => setShowDropdown(!showDropdown)} className="text-white">
              <User className="h-6 w-6" />
            </Button>
            {showDropdown && (
              <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
                <div className="py-1">
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Profile</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Settings</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Notifications</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Log Out</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </header>
      {/* Main Content */}
      <main className="flex-grow bg-gradient-to-br from-pink-500 to-orange-400 p-4">
        {currentPage === 'home' && (
          <div className="container mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Left Column - Swiping Feature */}
              <div className="md:col-span-2">
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Find Your Match</CardTitle>
                    <CardDescription>Swipe right if interested, left if not</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {swipeIndex < profiles.length ? (
                      <div className="relative h-96">
                        <div className="bg-white rounded-xl shadow-lg p-6 h-full flex flex-col items-center justify-center">
                          <Avatar className="h-32 w-32 mb-4">
                            <AvatarImage src="" />
                            <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32" />
                          </Avatar>
                          <h3 className="text-xl font-bold">{profiles[swipeIndex].name}, {profiles[swipeIndex].age}</h3>
                          <p className="text-gray-600 mb-2">{profiles[swipeIndex].bio}</p>
                          <p className="text-blue-500 text-sm">{profiles[swipeIndex].distance}</p>
                          <div className="flex space-x-4 mt-6">
                            <Button 
                              variant="outline" 
                              size="icon" 
                              className="h-12 w-12 rounded-full bg-red-100 hover:bg-red-200"
                              onClick={() => handleSwipe('left')}
                            >
                              <X className="h-6 w-6 text-red-500" />
                            </Button>
                            <Button 
                              variant="outline" 
                              size="icon" 
                              className="h-12 w-12 rounded-full bg-green-100 hover:bg-green-200"
                              onClick={() => handleSwipe('right')}
                            >
                              <Heart className="h-6 w-6 text-green-500" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="text-center py-12">
                        <p className="text-lg">You've seen all potential matches in your area!</p>
                        <p className="text-sm text-gray-500 mt-2">Check back later or adjust your preferences</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
              {/* Right Column - Features */}
              <div className="space-y-6">
                {/* Matches */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Your Matches</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {matches.length > 0 ? (
                      <div className="space-y-2">
                        {matches.map((match, index) => (
                          <div key={index} className="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded">
                            <Avatar>
                              <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
                            </Avatar>
                            <span>{match}</span>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <p className="text-gray-500">No matches yet. Keep swiping!</p>
                    )}
                  </CardContent>
                </Card>
                {/* Community Highlights */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Community Highlights</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {communityPosts.slice(0, 2).map(post => (
                        <div key={post.id} className="border-b pb-2">
                          <p className="font-medium">{post.author}</p>
                          <p className="text-sm">{post.content}</p>
                          <div className="flex items-center mt-1">
                            <Heart className="h-4 w-4 text-pink-500" />
                            <span className="text-xs ml-1">{post.likes}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                    <Button 
                      variant="link" 
                      className="text-blue-600 mt-2 p-0"
                      onClick={() => setCurrentPage('community')}
                    >
                      See more <ArrowRight className="h-4 w-4 ml-1" />
                    </Button>
                  </CardContent>
                </Card>
                {/* Speed Dating Promo */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Speed Dating</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm mb-4">Connect quickly with timed prompts and matches!</p>
                    <Button 
                      className="bg-pink-500 hover:bg-pink-600 text-white"
                      onClick={() => setCurrentPage('speed-dating')}
                    >
                      Try Speed Dating <Play className="h-4 w-4 ml-2" />
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        )}
        {currentPage === 'login' && (
          <div className="max-w-md mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-8">
            <h2 className="text-2xl font-bold text-blue-600 mb-6">Log In</h2>
            <form className="space-y-4">
              <div>
                <Label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</Label>
                <Input type="email" id="email" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</Label>
                <Input type="password" id="password" className="mt-1 block w-full" />
              </div>
              <div className="flex items-center justify-between">
                <div className="text-sm">
                  <a href="#" className="font-medium text-blue-600 hover:text-blue-500">Forgot password?</a>
                </div>
                <Button type="button" className="bg-pink-500 hover:bg-pink-600 text-white" onClick={() => setCurrentPage('home')}>
                  Log In
                </Button>
              </div>
            </form>
            <div className="mt-6">
              <p className="text-sm text-gray-600">
                Don't have an account?{' '}
                <button 
                  className="font-medium text-blue-600 hover:text-blue-500"
                  onClick={() => setCurrentPage('signup')}
                >
                  Sign up
                </button>
              </p>
            </div>
          </div>
        )}
        {currentPage === 'signup' && (
          <div className="max-w-md mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-8">
            <h2 className="text-2xl font-bold text-blue-600 mb-6">Create Account</h2>
            <form className="space-y-4">
              <div>
                <Label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</Label>
                <Input type="email" id="email" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</Label>
                <Input type="tel" id="phone" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</Label>
                <Input type="password" id="password" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="birthday" className="block text-sm font-medium text-gray-700">Birthday</Label>
                <Input type="date" id="birthday" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="pronouns" className="block text-sm font-medium text-gray-700">Pronouns</Label>
                <Input id="pronouns" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="orientation" className="block text-sm font-medium text-gray-700">Sexual Orientation</Label>
                <Input id="orientation" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="preferences" className="block text-sm font-medium text-gray-700">Preferences</Label>
                <Input id="preferences" className="mt-1 block w-full" />
              </div>
              <Button type="button" className="bg-pink-500 hover:bg-pink-600 text-white w-full" onClick={() => setCurrentPage('home')}>
                Create Account
              </Button>
            </form>
          </div>
        )}
        {currentPage === 'community' && (
          <div className="container mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-blue-600">Community</h2>
              <Button 
                variant="outline" 
                className="border-blue-600 text-blue-600"
                onClick={() => setCurrentPage('home')}
              >
                <ArrowRight className="h-4 w-4 mr-2 transform rotate-180" /> Back
              </Button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Main Community Posts */}
              <div className="md:col-span-2 space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Share Your Story</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <textarea 
                        className="w-full border rounded-lg p-3 min-h-[100px]" 
                        placeholder="Share your dating experiences or advice..."
                      />
                      <div className="flex justify-between items-center">
                        <p className="text-sm text-gray-500">By posting, you agree to our community guidelines</p>
                        <Button className="bg-pink-500 hover:bg-pink-600 text-white">Post</Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <div className="space-y-4">
                  {communityPosts.map(post => (
                    <Card key={post.id}>
                      <CardHeader>
                        <div className="flex items-center space-x-3">
                          <Avatar>
                            <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
                          </Avatar>
                          <div>
                            <p className="font-medium">{post.author}</p>
                            <p className="text-xs text-gray-500">2 hours ago</p>
                          </div>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p>{post.content}</p>
                      </CardContent>
                      <CardFooter className="flex justify-between">
                        <Button variant="ghost" className="text-pink-500">
                          <Heart className="h-4 w-4 mr-2" /> {post.likes}
                        </Button>
                        <Button variant="ghost" className="text-blue-600">Reply</Button>
                      </CardFooter>
                    </Card>
                  ))}
                </div>
              </div>
              {/* Events Section */}
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Upcoming Events</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {events.map(event => (
                        <div key={event.id} className="border-b pb-4">
                          <h3 className="font-medium">{event.title}</h3>
                          <p className="text-sm text-gray-600">{event.date}</p>
                          <p className="text-sm text-gray-600">{event.location}</p>
                          <Button 
                            variant="outline" 
                            className="mt-2 border-blue-600 text-blue-600 w-full"
                            onClick={() => window.open('https://forms.example.com', '_blank')}
                          >
                            Sign Up
                          </Button>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        )}
        {currentPage === 'speed-dating' && (
          <div className="container mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-blue-600">Speed Dating</h2>
              <Button 
                variant="outline" 
                className="border-blue-600 text-blue-600"
                onClick={() => setCurrentPage('home')}
              >
                <ArrowRight className="h-4 w-4 mr-2 transform rotate-180" /> Back
              </Button>
            </div>
            {!isPremium ? (
              <Card>
                <CardHeader>
                  <CardTitle className="text-blue-600">Premium Feature</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-center py-8">
                    <Play className="h-12 w-12 mx-auto text-pink-500 mb-4" />
                    <h3 className="text-xl font-bold mb-2">Unlock Speed Dating</h3>
                    <p className="text-gray-600 mb-6">Get instant matches based on timed prompts and compatibility answers</p>
                    <Button 
                      className="bg-pink-500 hover:bg-pink-600 text-white"
                      onClick={() => setShowPaywall(true)}
                    >
                      Upgrade to Premium - $9.99/month
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Current Round</CardTitle>
                    <CardDescription>3 minutes per round, 6 prompts total</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="text-center py-8">
                      <h3 className="text-xl font-bold mb-4">Question 1/6</h3>
                      <p className="text-lg mb-6">What's your idea of a perfect first date?</p>
                      <div className="flex justify-center space-x-4">
                        <Button variant="outline" className="border-green-500 text-green-500">Like</Button>
                        <Button variant="outline" className="border-red-500 text-red-500">Pass</Button>
                      </div>
                      <div className="mt-6">
                        <p className="text-sm text-gray-500">Time remaining: 2:45</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}
          </div>
        )}
      </main>
      {/* Bottom Navigation */}
      <nav className="bg-blue-600 text-white p-3 shadow-lg">
        <div className="container mx-auto flex justify-around">
          <button 
            className={`flex flex-col items-center ${currentPage === 'home' ? 'text-pink-300' : ''}`}
            onClick={() => setCurrentPage('home')}
          >
            <Home className="h-6 w-6" />
            <span className="text-xs mt-1">Home</span>
          </button>
          <button 
            className={`flex flex-col items-center ${currentPage === 'community' ? 'text-pink-300' : ''}`}
            onClick={() => setCurrentPage('community')}
          >
            <Users className="h-6 w-6" />
            <span className="text-xs mt-1">Community</span>
          </button>
          <button 
            className="flex flex-col items-center"
            onClick={() => setCurrentPage('speed-dating')}
          >
            <Play className="h-6 w-6" />
            <span className="text-xs mt-1">Speed Date</span>
          </button>
          <button 
            className="flex flex-col items-center"
            onClick={() => setCurrentPage('profile')}
          >
            <User className="h-6 w-6" />
            <span className="text-xs mt-1">Profile</span>
          </button>
        </div>
      </nav>
      {/* Paywall Modal */}
      {showPaywall && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 max-w-md w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-blue-600">Upgrade to Premium</h3>
              <button onClick={() => setShowPaywall(false)}>
                <X className="h-6 w-6 text-gray-500" />
              </button>
            </div>
            <div className="space-y-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-bold text-blue-600 mb-2">Premium Features:</h4>
                <ul className="list-disc list-inside space-y-1 text-sm">
                  <li>Unlimited Speed Dating</li>
                  <li>Video and Voice Calls</li>
                  <li>View Video Messages</li>
                  <li>Advanced Matching Algorithm</li>
                  <li>No Ads</li>
                </ul>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="border rounded-lg p-4">
                  <h4 className="font-bold text-center">Monthly</h4>
                  <p className="text-2xl font-bold text-center my-2">$9.99</p>
                  <Button className="w-full bg-pink-500 hover:bg-pink-600 text-white">Subscribe</Button>
                </div>
                <div className="border-2 border-blue-500 rounded-lg p-4 bg-blue-50">
                  <h4 className="font-bold text-center">Yearly</h4>
                  <p className="text-2xl font-bold text-center my-2">$79.99</p>
                  <p className="text-xs text-center mb-2">Save $40</p>
                  <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">Subscribe</Button>
                </div>
              </div>
              <p className="text-xs text-gray-500 text-center">Subscription automatically renews unless canceled</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
import { useState } from 'react'
import { Heart, Users, Play, Home, Search, User, Bell, ArrowRight, X } from 'lucide-react'
import { Button } from "/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"
import { Input } from "/components/ui/input"
import { Label } from "/components/ui/label"
import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar"
export default function ShotAtLove() {
  const [currentPage, setCurrentPage] = useState<'home' | 'login' | 'signup' | 'community' | 'speed-dating' | 'profile'>('home')
  const [isPremium, setIsPremium] = useState(false)
  const [showPaywall, setShowPaywall] = useState(false)
  const [showDropdown, setShowDropdown] = useState(false)
  const [swipeIndex, setSwipeIndex] = useState(0)
  const [matches, setMatches] = useState<string[]>([])
  const [communityPosts, setCommunityPosts] = useState([
    { id: 1, author: 'Alex', content: 'Just had an amazing first date through this app!', likes: 24 },
    { id: 2, author: 'Jordan', content: 'Looking for advice on how to make a great first impression', likes: 12 },
  ])
  const [events, setEvents] = useState([
    { id: 1, title: 'Speed Dating Night', date: 'June 25, 2023', location: 'Downtown Lounge' },
    { id: 2, title: 'Singles Mixer', date: 'July 2, 2023', location: 'Beachside Bar' },
  ])
  // Sample user profiles for swiping
  const profiles = [
    { id: 1, name: 'Taylor', age: 28, bio: 'Adventure seeker and coffee enthusiast', distance: '2 miles away' },
    { id: 2, name: 'Morgan', age: 31, bio: 'Bookworm and amateur chef', distance: '5 miles away' },
    { id: 3, name: 'Casey', age: 25, bio: 'Music lover and travel addict', distance: '1 mile away' },
  ]
  const handleSwipe = (direction: 'left' | 'right') => {
    if (direction === 'right') {
      setMatches([...matches, profiles[swipeIndex].name])
    }
    if (swipeIndex < profiles.length - 1) {
      setSwipeIndex(swipeIndex + 1)
    } else {
      setSwipeIndex(0) // Reset or handle end of profiles
    }
  }
  const addCommunityPost = (content: string) => {
    setCommunityPosts([...communityPosts, { id: communityPosts.length + 1, author: 'You', content, likes: 0 }])
  }
  return (
    <div className="min-h-screen flex flex-col" style={{ fontFamily: 'Montserrat, sans-serif' }}>
      {/* App Header with Logo */}
      <header className="bg-blue-600 text-white p-4 shadow-lg">
        <div className="container mx-auto flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="relative">
              <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 to-orange-500 rounded-lg blur opacity-75"></div>
              <div className="relative bg-black px-4 py-2 rounded-lg flex items-center">
                <span className="text-green-400 font-bold text-2xl">SHOT</span>
                <span className="text-blue-300 italic text-sm">at</span>
                <span className="text-pink-400 italic text-2xl">Love</span>
                <Heart className="text-pink-400 ml-1" />
              </div>
            </div>
          </div>
          <div className="relative">
            <Button variant="ghost" onClick={() => setShowDropdown(!showDropdown)} className="text-white">
              <User className="h-6 w-6" />
            </Button>
            {showDropdown && (
              <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
                <div className="py-1">
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Profile</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Settings</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Notifications</button>
                  <button className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left">Log Out</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </header>
      {/* Main Content */}
      <main className="flex-grow bg-gradient-to-br from-pink-500 to-orange-400 p-4">
        {currentPage === 'home' && (
          <div className="container mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Left Column - Swiping Feature */}
              <div className="md:col-span-2">
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Find Your Match</CardTitle>
                    <CardDescription>Swipe right if interested, left if not</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {swipeIndex < profiles.length ? (
                      <div className="relative h-96">
                        <div className="bg-white rounded-xl shadow-lg p-6 h-full flex flex-col items-center justify-center">
                          <Avatar className="h-32 w-32 mb-4">
                            <AvatarImage src="" />
                            <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-32 h-32" />
                          </Avatar>
                          <h3 className="text-xl font-bold">{profiles[swipeIndex].name}, {profiles[swipeIndex].age}</h3>
                          <p className="text-gray-600 mb-2">{profiles[swipeIndex].bio}</p>
                          <p className="text-blue-500 text-sm">{profiles[swipeIndex].distance}</p>
                          <div className="flex space-x-4 mt-6">
                            <Button 
                              variant="outline" 
                              size="icon" 
                              className="h-12 w-12 rounded-full bg-red-100 hover:bg-red-200"
                              onClick={() => handleSwipe('left')}
                            >
                              <X className="h-6 w-6 text-red-500" />
                            </Button>
                            <Button 
                              variant="outline" 
                              size="icon" 
                              className="h-12 w-12 rounded-full bg-green-100 hover:bg-green-200"
                              onClick={() => handleSwipe('right')}
                            >
                              <Heart className="h-6 w-6 text-green-500" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="text-center py-12">
                        <p className="text-lg">You've seen all potential matches in your area!</p>
                        <p className="text-sm text-gray-500 mt-2">Check back later or adjust your preferences</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
              {/* Right Column - Features */}
              <div className="space-y-6">
                {/* Matches */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Your Matches</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {matches.length > 0 ? (
                      <div className="space-y-2">
                        {matches.map((match, index) => (
                          <div key={index} className="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded">
                            <Avatar>
                              <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
                            </Avatar>
                            <span>{match}</span>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <p className="text-gray-500">No matches yet. Keep swiping!</p>
                    )}
                  </CardContent>
                </Card>
                {/* Community Highlights */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Community Highlights</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {communityPosts.slice(0, 2).map(post => (
                        <div key={post.id} className="border-b pb-2">
                          <p className="font-medium">{post.author}</p>
                          <p className="text-sm">{post.content}</p>
                          <div className="flex items-center mt-1">
                            <Heart className="h-4 w-4 text-pink-500" />
                            <span className="text-xs ml-1">{post.likes}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                    <Button 
                      variant="link" 
                      className="text-blue-600 mt-2 p-0"
                      onClick={() => setCurrentPage('community')}
                    >
                      See more <ArrowRight className="h-4 w-4 ml-1" />
                    </Button>
                  </CardContent>
                </Card>
                {/* Speed Dating Promo */}
                <Card className="bg-white bg-opacity-90">
                  <CardHeader>
                    <CardTitle className="text-blue-600">Speed Dating</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm mb-4">Connect quickly with timed prompts and matches!</p>
                    <Button 
                      className="bg-pink-500 hover:bg-pink-600 text-white"
                      onClick={() => setCurrentPage('speed-dating')}
                    >
                      Try Speed Dating <Play className="h-4 w-4 ml-2" />
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        )}
        {currentPage === 'login' && (
          <div className="max-w-md mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-8">
            <h2 className="text-2xl font-bold text-blue-600 mb-6">Log In</h2>
            <form className="space-y-4">
              <div>
                <Label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</Label>
                <Input type="email" id="email" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</Label>
                <Input type="password" id="password" className="mt-1 block w-full" />
              </div>
              <div className="flex items-center justify-between">
                <div className="text-sm">
                  <a href="#" className="font-medium text-blue-600 hover:text-blue-500">Forgot password?</a>
                </div>
                <Button type="button" className="bg-pink-500 hover:bg-pink-600 text-white" onClick={() => setCurrentPage('home')}>
                  Log In
                </Button>
              </div>
            </form>
            <div className="mt-6">
              <p className="text-sm text-gray-600">
                Don't have an account?{' '}
                <button 
                  className="font-medium text-blue-600 hover:text-blue-500"
                  onClick={() => setCurrentPage('signup')}
                >
                  Sign up
                </button>
              </p>
            </div>
          </div>
        )}
        {currentPage === 'signup' && (
          <div className="max-w-md mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-8">
            <h2 className="text-2xl font-bold text-blue-600 mb-6">Create Account</h2>
            <form className="space-y-4">
              <div>
                <Label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</Label>
                <Input type="email" id="email" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</Label>
                <Input type="tel" id="phone" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</Label>
                <Input type="password" id="password" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="birthday" className="block text-sm font-medium text-gray-700">Birthday</Label>
                <Input type="date" id="birthday" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="pronouns" className="block text-sm font-medium text-gray-700">Pronouns</Label>
                <Input id="pronouns" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="orientation" className="block text-sm font-medium text-gray-700">Sexual Orientation</Label>
                <Input id="orientation" className="mt-1 block w-full" />
              </div>
              <div>
                <Label htmlFor="preferences" className="block text-sm font-medium text-gray-700">Preferences</Label>
                <Input id="preferences" className="mt-1 block w-full" />
              </div>
              <Button type="button" className="bg-pink-500 hover:bg-pink-600 text-white w-full" onClick={() => setCurrentPage('home')}>
                Create Account
              </Button>
            </form>
          </div>
        )}
        {currentPage === 'community' && (
          <div className="container mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-blue-600">Community</h2>
              <Button 
                variant="outline" 
                className="border-blue-600 text-blue-600"
                onClick={() => setCurrentPage('home')}
              >
                <ArrowRight className="h-4 w-4 mr-2 transform rotate-180" /> Back
              </Button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Main Community Posts */}
              <div className="md:col-span-2 space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Share Your Story</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <textarea 
                        className="w-full border rounded-lg p-3 min-h-[100px]" 
                        placeholder="Share your dating experiences or advice..."
                      />
                      <div className="flex justify-between items-center">
                        <p className="text-sm text-gray-500">By posting, you agree to our community guidelines</p>
                        <Button className="bg-pink-500 hover:bg-pink-600 text-white">Post</Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <div className="space-y-4">
                  {communityPosts.map(post => (
                    <Card key={post.id}>
                      <CardHeader>
                        <div className="flex items-center space-x-3">
                          <Avatar>
                            <AvatarFallback className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
                          </Avatar>
                          <div>
                            <p className="font-medium">{post.author}</p>
                            <p className="text-xs text-gray-500">2 hours ago</p>
                          </div>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p>{post.content}</p>
                      </CardContent>
                      <CardFooter className="flex justify-between">
                        <Button variant="ghost" className="text-pink-500">
                          <Heart className="h-4 w-4 mr-2" /> {post.likes}
                        </Button>
                        <Button variant="ghost" className="text-blue-600">Reply</Button>
                      </CardFooter>
                    </Card>
                  ))}
                </div>
              </div>
              {/* Events Section */}
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Upcoming Events</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {events.map(event => (
                        <div key={event.id} className="border-b pb-4">
                          <h3 className="font-medium">{event.title}</h3>
                          <p className="text-sm text-gray-600">{event.date}</p>
                          <p className="text-sm text-gray-600">{event.location}</p>
                          <Button 
                            variant="outline" 
                            className="mt-2 border-blue-600 text-blue-600 w-full"
                            onClick={() => window.open('https://forms.example.com', '_blank')}
                          >
                            Sign Up
                          </Button>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        )}
        {currentPage === 'speed-dating' && (
          <div className="container mx-auto bg-white bg-opacity-90 rounded-xl shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-blue-600">Speed Dating</h2>
              <Button 
                variant="outline" 
                className="border-blue-600 text-blue-600"
                onClick={() => setCurrentPage('home')}
              >
                <ArrowRight className="h-4 w-4 mr-2 transform rotate-180" /> Back
              </Button>
            </div>
            {!isPremium ? (
              <Card>
                <CardHeader>
                  <CardTitle className="text-blue-600">Premium Feature</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-center py-8">
                    <Play className="h-12 w-12 mx-auto text-pink-500 mb-4" />
                    <h3 className="text-xl font-bold mb-2">Unlock Speed Dating</h3>
                    <p className="text-gray-600 mb-6">Get instant matches based on timed prompts and compatibility answers</p>
                    <Button 
                      className="bg-pink-500 hover:bg-pink-600 text-white"
                      onClick={() => setShowPaywall(true)}
                    >
                      Upgrade to Premium - $9.99/month
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-blue-600">Current Round</CardTitle>
                    <CardDescription>3 minutes per round, 6 prompts total</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="text-center py-8">
                      <h3 className="text-xl font-bold mb-4">Question 1/6</h3>
                      <p className="text-lg mb-6">What's your idea of a perfect first date?</p>
                      <div className="flex justify-center space-x-4">
                        <Button variant="outline" className="border-green-500 text-green-500">Like</Button>
                        <Button variant="outline" className="border-red-500 text-red-500">Pass</Button>
                      </div>
                      <div className="mt-6">
                        <p className="text-sm text-gray-500">Time remaining: 2:45</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}
          </div>
        )}
      </main>
      {/* Bottom Navigation */}
      <nav className="bg-blue-600 text-white p-3 shadow-lg">
        <div className="container mx-auto flex justify-around">
          <button 
            className={`flex flex-col items-center ${currentPage === 'home' ? 'text-pink-300' : ''}`}
            onClick={() => setCurrentPage('home')}
          >
            <Home className="h-6 w-6" />
            <span className="text-xs mt-1">Home</span>
          </button>
          <button 
            className={`flex flex-col items-center ${currentPage === 'community' ? 'text-pink-300' : ''}`}
            onClick={() => setCurrentPage('community')}
          >
            <Users className="h-6 w-6" />
            <span className="text-xs mt-1">Community</span>
          </button>
          <button 
            className="flex flex-col items-center"
            onClick={() => setCurrentPage('speed-dating')}
          >
            <Play className="h-6 w-6" />
            <span className="text-xs mt-1">Speed Date</span>
          </button>
          <button 
            className="flex flex-col items-center"
            onClick={() => setCurrentPage('profile')}
          >
            <User className="h-6 w-6" />
            <span className="text-xs mt-1">Profile</span>
          </button>
        </div>
      </nav>
      {/* Paywall Modal */}
      {showPaywall && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 max-w-md w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-blue-600">Upgrade to Premium</h3>
              <button onClick={() => setShowPaywall(false)}>
                <X className="h-6 w-6 text-gray-500" />
              </button>
            </div>
            <div className="space-y-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-bold text-blue-600 mb-2">Premium Features:</h4>
                <ul className="list-disc list-inside space-y-1 text-sm">
                  <li>Unlimited Speed Dating</li>
                  <li>Video and Voice Calls</li>
                  <li>View Video Messages</li>
                  <li>Advanced Matching Algorithm</li>
                  <li>No Ads</li>
                </ul>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="border rounded-lg p-4">
                  <h4 className="font-bold text-center">Monthly</h4>
                  <p className="text-2xl font-bold text-center my-2">$9.99</p>
                  <Button className="w-full bg-pink-500 hover:bg-pink-600 text-white">Subscribe</Button>
                </div>
                <div className="border-2 border-blue-500 rounded-lg p-4 bg-blue-50">
                  <h4 className="font-bold text-center">Yearly</h4>
                  <p className="text-2xl font-bold text-center my-2">$79.99</p>
                  <p className="text-xs text-center mb-2">Save $40</p>
                  <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">Subscribe</Button>
                </div>
              </div>
              <p className="text-xs text-gray-500 text-center">Subscription automatically renews unless canceled</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet