Added RECIPE_Genie using Next.js/Tailwindcss (#569)

This is my first project using Next.js, showcasing my journey into
full-stack development. It serves as a foundation for building
innovative solutions in the kitchen.
Framework: Next.js
Styling: Tailwind CSS
Future Plans:
Add API integration for recipe data.
Enhance ingredient-based search functionality.
Implement user authentication and saved recipe collections.

public/RECIPE_Genie/my-project/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

public/RECIPE_Genie/my-project/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

public/RECIPE_Genie/my-project/components/AboutSection.tsx

@@ -0,0 +1,226 @@
+"use client"
+import React from 'react';
+import { Link } from "react-scroll";
+import { useState } from 'react';
+
+
+export const AboutSection = () => {
+    const [flippedCard, setFlippedCard]= useState<number | null>(null);
+    const handleCardHover = (index: number) => {
+        setFlippedCard(index);
+    };
+    return (
+        <div className="min-h-screen flex flex-col items-center justify-center">
+            <h1 className="text-3xl font-bold mb-8 ">Some Recipes</h1>
+            <div className="flex space-x-6">
+                {/* Card 1 */}
+                <div
+                    onMouseEnter={() => handleCardHover(1)}
+                    onMouseLeave={() => setFlippedCard(null)}
+                    className="w-72 h-100 perspective"
+                >
+                    <div
+                        className={`relative w-full h-full rounded-lg shadow-lg transform-style-preserve-3d transition-transform duration-500 ${
+                            flippedCard === 1 ? "rotate-y-180" : ""
+                        }`}
+                    >
+                        {/* Front Side */}
+                        <div className="absolute w-full h-full bg-white rounded-lg p-6 flex flex-col justify-between items-center backface-hidden">
+                            <img
+                                className="w-full h-40 object-cover rounded-md"
+                                src="https://th.bing.com/th/id/OIP.qgQSg9U4ihWmMbFgaAJhGwAAAA?rs=1&pid=ImgDetMain"
+                                alt="Card 1"
+                            />
+                            <div className="mt-4">
+                                <div className="font-bold text-xl text-amber-500">Mango Smoothie</div>
+                                <p className="text-gray-700 text-base text-center mt-2">
+                                    Hover Here For the Recipe....
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Back Side */}
+                        <div className="absolute w-full h-full bg-pink-300 text-white rounded-lg p-6 flex items-center justify-center transform rotate-y-180 backface-hidden">
+                            <div className="text-lg font-semi-bold ">
+                                <p>
+                                  Ingredients:<br></br>
+                                  1 cup chopped mango
+                                  1/2 cup yogurt
+                                  1/2 cup milk
+                                  Honey/sugar (optional)
+                                  Ice cubes (optional) <br></br>
+                                  Instructions:<br></br>
+                                  Blend mango, yogurt, milk, and honey/sugar.
+                                  Add ice cubes, blend again.
+                                  Pour and enjoy!
+                                   It's a tropical delight in a glass! 🥭</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/*Card 2*/}
+                <div
+                    onMouseEnter={() => handleCardHover(2)}
+                    onMouseLeave={() => setFlippedCard(null)}
+                    className="w-72 h-100 perspective"
+                >
+                    <div
+                        className={`relative w-full h-full rounded-lg shadow-lg transform-style-preserve-3d transition-transform duration-500 ${
+                            flippedCard === 2 ? "rotate-y-180" : ""
+                        }`}
+                    >
+                        {/* Front Side */}
+                        <div className="absolute w-full h-full bg-white rounded-lg p-6 flex flex-col justify-between items-center backface-hidden">
+                            <img
+                                className="w-full h-40 object-cover rounded-md"
+                                src="https://www.funfoodfrolic.com/wp-content/uploads/2020/10/Suji-Halwa-2.jpg"
+                                alt="Card 3"
+                            />
+                            <div className="mt-4">
+                                <div className="font-bold text-xl text-orange-900">Suji Halwa</div>
+                                <p className="text-gray-700 text-base text-center mt-2">
+                                    Hover Here For the Recipe....
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Back Side */}
+                        <div className="absolute w-full h-full bg-purple-300 text-white rounded-lg p-6 flex items-center justify-center transform rotate-y-180 backface-hidden">
+                            <div className="relative font-semi-bold ">
+                                <p>
+                                  Ingredients:<br></br>
+                                  1 cup suji 
+                                  1 cup sugar
+                                  3 cups water
+                                  1/2 cup ghee
+                                  1/4 cup mixed nuts (cashews, almonds, raisins)
+                                  1/4 teaspoon cardamom powder <br></br>
+                                  Instructions:<br></br>
+                                  Heat 1/2 cup ghee, add 1 cup suji, and stir until golden brown.
+                                  Boil 3 cups water with 1 cup sugar until dissolved.
+                                  Gradually add syrup to suji, stirring constantly.
+                                  Add 1/4 tsp cardamom powder, mixed nuts, and cook for a few minutes.
+                                  Enjoy your Suji Halwa! 🍽️</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/* Card 3 */}
+                <div
+                    onMouseEnter={() => handleCardHover(3)}
+                    onMouseLeave={() => setFlippedCard(null)}
+                    className="w-72 h-96 perspective"
+                >
+                    <div
+                        className={`relative w-full h-full rounded-lg shadow-lg transform-style-preserve-3d transition-transform duration-500 ${
+                            flippedCard === 3 ? "rotate-y-180" : ""
+                        }`}
+                    >
+                        {/* Front Side */}
+                        <div className="absolute w-full h-full bg-white rounded-lg p-6 flex flex-col justify-between items-center backface-hidden">
+                            <img
+                                className="w-full h-40 object-cover rounded-md"
+                                src="https://www.whiskaffair.com/wp-content/uploads/2021/05/White-Sauce-Pasta-2-4-1200x1800.jpg"
+                                alt="Card 2"
+                            />
+                            <div className="mt-4">
+                                <div className="font-bold text-xl text-yellow-300">White Sauce Pasta</div>
+                                <p className="text-gray-700 text-base text-center mt-2">
+                                    Hover Here For the Recipe...
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Back Side */}
+                        <div className="absolute w-full h-full bg-blue-300 text-white rounded-lg p-6 flex items-center justify-center transform rotate-y-180 backface-hidden">
+                            <div className="text-lg font-semi-bold">
+                                <p>
+                                  Ingredients:<br></br>
+                                    200g pasta
+                                    2 tbsp butter
+                                    2 tbsp flour
+                                    1½ cups milk
+                                    Salt, pepper, nutmeg (optional)
+                                    1/2 cup cheese (optional)
+                                  Instructions:<br></br>
+                                    Cook pasta, set aside.
+                                    Melt butter, stir in flour.
+                                    Add milk, cook until thick.
+                                    Season and add cheese.
+                                    Mix in pasta.
+                                  Enjoy your pasta! 🍝
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Card 4 */}
+                <div
+                    onMouseEnter={() => handleCardHover(4)}
+                    onMouseLeave={() => setFlippedCard(null)}
+                    className="w-72 h-100 perspective"
+                >
+                    <div
+                        className={`relative w-full h-full rounded-lg shadow-lg transform-style-preserve-3d transition-transform duration-500 ${
+                            flippedCard === 4 ? "rotate-y-180" : ""
+                        }`}
+                    >
+                        {/* Front Side */}
+                        <div className="absolute w-full h-full bg-white rounded-lg p-6 flex flex-col justify-between items-center backface-hidden">
+                            <img
+                                className="w-full h-40 object-cover rounded-md"
+                                src="https://www.indianveggiedelight.com/wp-content/uploads/2022/01/kala-chana-chaat-recipe-featured.jpg"
+                                alt="Card 4"
+                            />
+                            <div className="mt-4">
+                                <div className="font-bold text-xl text-green-800">Fried Chana Chaat</div>
+                                <p className="text-gray-700 text-base text-center mt-2">
+                                    Hover Here For the Recipe....
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Back Side */}
+                        <div className="absolute w-full h-full bg-slate-500 text-white rounded-lg p-6 flex items-center justify-center transform rotate-y-180 backface-hidden">
+                            <div className="relative font-semi-bold ">
+                                <p>
+                                  Ingredients:<br></br>
+                                  1 cup fried chana 
+                                  1 chopped onion 
+                                  1 chopped tomato 
+                                  1 green chili 
+                                  1 tablespoon chopped coriander leaves 
+                                  1 teaspoon chaat masala
+                                  1/2 teaspoon lemon juice
+                                  Salt to taste<br></br>
+                                  Instructions:<br></br>
+                                  In a bowl, combine fried chana, onion, tomato, green chili, and coriander leaves.
+                                  Add chaat masala, lemon juice, and salt.
+                                  Toss: Mix well and serve immediately.
+                                  Enjoy your tangy and spicy Fried Chana Chaat! 🌶️</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* Scoped Styles */}
+            <style jsx>
+                {`
+                    .perspective {
+                        perspective: 1000px;
+                    }
+                    .transform-style-preserve-3d {
+                        transform-style: preserve-3d;
+                    }
+                    .backface-hidden {
+                        backface-visibility: hidden;
+                    }
+                    .rotate-y-180 {
+                        transform: rotateY(180deg);
+                    }
+                `}
+            </style>
+        </div>
+    );
+};

public/RECIPE_Genie/my-project/components/Footer.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { AiOutlineYoutube } from "react-icons/ai"
+
+export const Footer = () => {
+  return (
+    <footer className= " mx-auto max-w-3xl px-4 sm:px-6 md:max-w-5xl">
+        <hr className = " w-full h-0.5 mx-auto mt-8 bg-neutral-200 border-0"></hr>
+            <div className="mx-auto p-4 flex flex-col text-center text-neutral-500 md:flex-row md:justify-between">
+                <div className="text-neutral-500 dark:text-neutral-500">Find More Recipes on YouTube</div>
+                <div className="flex flex-row items-center justify-center space-x-2 mb-1 bg-transparent">
+                    <a href="https://www.youtube.com/" rel="noreferrer" target="_blank">
+                        <AiOutlineYoutube 
+                           className="hover:-translate-y-1 transition-transform cursor-pointer bg-transparent" size={30} />
+                    </a>
+                </div>
+            </div>
+    </footer>
+  )
+}

public/RECIPE_Genie/my-project/components/HeroSection.tsx

@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { Link } from "react-scroll/modules";
+import { HiArrowDown } from "react-icons/hi";
+
+const HeroSection = () => {
+  return (
+    <section id="home">
+      {/* Hero Container */}
+      <div className="flex flex-col text-center items-center justify-center bg-gradient-catppuccin text-mocha-text min-h-screen relative">
+        {/* Image */}
+        <div className="pt-40 pl-0">
+          <img
+            src={
+              "https://image.freepik.com/free-vector/purple-genie-bring-magic-food_10045-207.jpg"
+            }
+            alt="Magical Recipe Genie"
+            width={500}
+            height={500}
+            className="object-cover rounded-full border-4 border-mocha-overlay1 shadow-lg justify-item-left"
+          />
+        </div>
+
+        {/* Text Content */}
+        <div className="mt-90 px-6 md:px-20 text-center">
+          <h1 className="font-extrabold text-5xl md:text-6xl text-mocha-lavender mb-4">
+            Welcome!! To The Recipe-Genie
+          </h1>
+          <p className="text-lg md:text-2xl text-mocha-overlay1 font-light">
+            At Recipe Genie, we believe cooking should be simple, enjoyable, and
+            tailored to your needs. Whether you're a seasoned chef or a curious
+            beginner, Recipe Genie is here to transform your ingredients into
+            delightful dishes.
+          </p>
+          <div className="mt-20">
+            <Link
+              to="recipes"
+              className="text-neutral-100 font-semibold px-6 py-3 rounded shadow hover:bg-rose-300"
+              activeClass="active"
+              spy={true}
+              smooth={true}
+              offset={-100}
+              duration={500}
+            >
+              Recipes
+            </Link>
+          </div>
+        </div>
+
+        {/* Downward Arrow */}
+        <div className="absolute bottom-10 flex justify-center items-center">
+          <Link
+            to="about"
+            activeClass="active"
+            spy={true}
+            smooth={true}
+            offset={-100}
+            duration={500}
+          >
+            <HiArrowDown
+              size={45}
+              className="animate-bounce text-mocha-lavender hover:text-mocha-peach transition-colors duration-300"
+            />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;