RECIPEDIA/recipe.html at main · MeghanaDG04/RECIPEDIA · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipedia - Your Personalized Recipe Sharing Platform</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts: Poppins -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide-icons@latest"></script>

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #FFF8F0; /* Light theme background */
        }
        .hero-bg {
            background-image: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.2)), url('https://placehold.co/1600x900/f87171/ffffff?text=Delicious+Food');
            background-size: cover;
            background-position: center;
        }
        .recipe-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        }
        .recipe-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .gradient-text {
            background: -webkit-linear-gradient(45deg, #F59E0B, #EF4444);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900">

    <!-- Header -->
    <header id="header" class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm fixed w-full z-50 top-0 transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-2">
                    <i data-lucide="utensils-crossed" class="w-8 h-8 text-red-500"></i>
                    <span class="text-2xl font-bold text-gray-800 dark:text-white">Recipedia</span>
                </a>

                <!-- Desktop Navigation -->
                <nav class="hidden lg:flex items-center space-x-8">
                    <a href="#home" class="text-gray-600 dark:text-gray-300 hover:text-red-500 font-medium transition">Home</a>
                    <a href="#recipes" class="text-gray-600 dark:text-gray-300 hover:text-red-500 font-medium transition">Explore</a>
                    <a href="#features" class="text-gray-600 dark:text-gray-300 hover:text-red-500 font-medium transition">Features</a>
                    <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-red-500 font-medium transition">How It Works</a>
                </nav>

                <!-- Right side actions -->
                <div class="flex items-center space-x-4">
                     <a href="#" class="hidden md:inline-block bg-red-500 text-white px-5 py-2.5 rounded-full font-semibold hover:bg-red-600 transition shadow-sm">Add Recipe</a>
                    <a href="#" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-red-500 font-medium">Login</a>
                    <button id="mobile-menu-button" class="lg:hidden text-gray-600 dark:text-gray-300 hover:text-red-500">
                        <i data-lucide="menu" class="w-7 h-7"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden lg:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
            <nav class="flex flex-col space-y-2 p-4">
                <a href="#home" class="block py-2 px-3 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-500 font-medium">Home</a>
                <a href="#recipes" class="block py-2 px-3 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-500 font-medium">Explore</a>
                <a href="#features" class="block py-2 px-3 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-500 font-medium">Features</a>
                <a href="#about" class="block py-2 px-3 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-500 font-medium">How It Works</a>
                <hr class="border-gray-200 dark:border-gray-700">
                <a href="#" class="w-full text-center bg-red-500 text-white px-5 py-2.5 rounded-full font-semibold hover:bg-red-600 transition shadow-sm">Add Recipe</a>
                <a href="#" class="w-full text-center mt-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-5 py-2.5 rounded-full font-semibold hover:bg-gray-300 dark:hover:bg-gray-600 transition">Login</a>
            </nav>
        </div>
    </header>

    <main>
        <!-- Hero Section -->
        <section id="home" class="hero-bg pt-20">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 flex items-center min-h-[calc(100vh-80px)]">
                <div class="max-w-3xl text-white py-20">
                    <h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-4">
                        Discover, Share & Cook <br> <span class="gradient-text">Amazing Recipes</span>
                    </h1>
                    <p class="text-lg md:text-xl text-gray-200 dark:text-gray-300 mb-8">
                        Join our community of food lovers! Add your own creations, explore dishes from around the world, and manage your favorite recipes all in one place.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#recipes" class="bg-red-500 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-red-600 transition shadow-lg transform hover:scale-105">Explore Recipes</a>
                        <a href="#" class="bg-white dark:bg-gray-800 text-red-500 dark:text-red-400 px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition shadow-lg transform hover:scale-105">Join Now</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Featured Recipes Section -->
        <section id="recipes" class="py-20 bg-white dark:bg-gray-900">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white">Featured Recipes</h2>
                    <p class="mt-4 text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">Get inspired by what others are cooking this week.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Recipe Card -->
                    <div class="recipe-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <img src="https://placehold.co/600x400/fca5a5/ffffff?text=Pasta+Dish" alt="Spaghetti Bolognese" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Classic Spaghetti Bolognese</h3>
                            <p class="text-gray-500 dark:text-gray-400 mb-4 text-sm">by Priya Sharma</p>
                            <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
                                <div class="flex items-center space-x-4">
                                    <button class="flex items-center space-x-1 hover:text-red-500">
                                        <i data-lucide="heart" class="w-5 h-5"></i>
                                        <span>128</span>
                                    </button>
                                    <button class="flex items-center space-x-1 hover:text-blue-500">
                                        <i data-lucide="message-square" class="w-5 h-5"></i>
                                        <span>32</span>
                                    </button>
                                </div>
                                <a href="#" class="text-red-500 font-semibold hover:text-red-700">View Recipe</a>
                            </div>
                        </div>
                    </div>
                    <!-- Repeat other recipe cards same fix -->
                </div>
            </div>
        </section>

        <!-- How It Works Section -->
        <section id="about" class="py-20 bg-gray-50 dark:bg-gray-900">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white">Get Cooking in 3 Easy Steps</h2>
                    <p class="mt-4 text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">Join our community and start your culinary journey today.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                    <!-- Step Card -->
                    <div class="p-6 bg-white dark:bg-black-800 rounded-xl shadow-md hover:bg-gray-100 dark:hover:bg-black-00 transition">
                        <div class="bg-red-100 dark:bg-red-900 text-red-500 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-md">
                            <i data-lucide="user-plus" class="w-10 h-10"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-black-100">Create an Account</h3>
                        <p class="text-gray-600 dark:text-black-100">Sign up for free to get your personalized profile and start your collection.</p>
                    </div>
                    <!-- Repeat Step 2 & Step 3 same fix -->
                </div>
            </div>
        </section>
    </main>

    <script>
        lucide.createIcons();
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>