homepage done

src/app/page.tsx

@@ -1,53 +1,34 @@
+import SearchBar from "@/components/searchbar";
 import Navbar from "@/components/Navbar";
 import StoredPapers from "@/components/StoredPapers";
 import Footer from "@/components/Footer";
-import SearchBar from "@/components/Searchbar/searchbar";
+import Hero from "@/components/Hero";
+import Faq from "@/components/Faq";
 
 const HomePage = () => {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen w-full flex-col vipna dark:bg-[#070114] bg-[#F3F5FF]">
       <div>
         <Navbar />
       </div>
       <div className="mt-2 flex flex-grow flex-col items-center justify-center gap-y-10">
         <div className="w-full max-w-2xl space-y-10 text-center">
-          <h1 className="phonk mx-auto text-2xl md:text-3xl">
+          <h1 className="vipnabd font-extrabold text-3xl md:text-3xl mx-auto mt-14 mb-6">
             Built by Students for Students
           </h1>
-
-          <p className="text-md mx-auto w-[90%] font-sans font-semibold md:w-full">
-            Prepare to excel in your CATs and FATs with CodeChef-VIT&apos;s
-            dedicated repository of past exam papers. Access key resources to
-            review concepts, tackle challenging questions, and familiarize
-            yourself with exam patterns. Boost your confidence, sharpen your
-            strategy, and get ready to ace your exams!
-          </p>
-
-          <div className="flex flex-wrap justify-center gap-4 text-sm font-bold">
-            {[
-              "NO SIGN UP REQUIRED",
-              "FILTERED SEARCH",
-              "FLEXIBLE DOWNLOAD",
-            ].map((text) => (
-              <div
-                key={text}
-                className="rounded-full bg-gradient-to-r from-[#562EE7] to-[#bd21b4] p-[2px]"
-              >
-                <div className="rounded-full bg-white px-6 py-3 font-sans tracking-wider text-black dark:bg-black dark:text-white">
-                  {text}
-                </div>
-              </div>
-            ))}
-          </div>
         </div>
-
-        <div className="z-20 w-full max-w-xl">
+        <div className="z-20 w-full max-w-xl mb-6">
           <SearchBar />
         </div>
-
-        <div className="max-3xl w-full">
+        <div className="w-full max-w-7xl">
           <StoredPapers />
         </div>
+        <div className="w-full max-w-7xl">
+          <Hero />
+        </div>
+        <div className="w-full max-w-7xl mb-10">
+          <Faq />
+        </div>
       </div>
 
       <Footer />

src/components/Faq.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+
+function Faq() {
+    const faqs = [
+        { question: "What makes papers unique?", answer: "Lorem ipsum" },
+        { question: "What makes papers unique?", answer: "Lorem ipsum" },
+        { question: "What makes papers unique?", answer: "Lorem ipsum" },
+        { question: "What makes papers unique?", answer: "Lorem ipsum" },
+        { question: "What makes papers unique?", answer: "Lorem ipsum" }
+    ];
+    const [faqActive, setFaqActive] = useState<number | null>(null);
+
+    const handleClick = (index: number) => {
+        setFaqActive(faqActive === index ? null : index);
+    };
+
+    return (
+        <div className="w-full mt-12 px-6 md:px-12 py-12">
+            <div className="text-center lg:text-left text-4xl lg:text-5xl font-bold text-[#120020] dark:text-white mb-8 w-full">
+                Frequently Asked Questions
+            </div>
+            <div className="max-w-7xl play mx-auto space-y-6">
+                {faqs.map((faq, index) => (
+                    <div key={index} className="p-4 border-b-2 border-[#453D60]">
+                        <div className="flex items-center">
+                            <h2
+                                className={`text-lg play font-semibold ${faqActive === index ? "dark:text-[#A47DE5] text-[#6F2DA6]" : "dark:text-[#C0BACE] text-black"} w-full pr-15`}
+                            >
+                                {faq.question}
+                            </h2>
+                            <button
+                                onClick={() => handleClick(index)}
+                                className={`text-md font-bold w-11 h-6 flex items-center justify-center rounded-full transition-all duration-200 ${faqActive === index ? "text-white dark:bg-[#A47DE5] bg-[#6F2DA6]" : "dark:bg-white bg-[#EDEFF0] text-[#99979F]"}`}
+                            >
+                                {faqActive === index ? "−" : "+"}
+                            </button>
+                        </div>
+                        {faqActive === index && (
+                            <p className="mt-2 play text-black dark:text-[#C0BACE]">{faq.answer}</p>
+                        )}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default Faq;

src/components/Footer.tsx

@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 
 export default function Footer() {
-  const { theme, setTheme } = useTheme();
+  const { theme } = useTheme();
   const [isDarkMode, setIsDarkMode] = useState<boolean | null>(true);
 
   useEffect(() => {
@@ -23,78 +23,81 @@ export default function Footer() {
   }, [theme]);
 
   return (
-    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 md:pt-8 lg:w-full lg:flex-row lg:justify-around lg:px-12 mb-4">
-      <div className="flex items-center">
-        <h1 className="jost bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-center text-3xl font-bold text-transparent lg:text-5xl 2xl:text-6xl dark:from-[#562EE7] dark:to-[#FFC6E8]">
-          Papers
-        </h1>
-        <Separator orientation="vertical" className="mx-3 h-full min-h-20" />
-        <div className="flex items-center">
-          <Image
-            src={ccLogo as HTMLImageElement}
-            alt="codechef-logo"
-            height={70}
-            width={70}
-          />
-          <p className="jost text-2xl font-bold lg:text-4xl">CodeChef-VIT</p>
+    <footer className="w-full overflow-hidden font-sans bg-gradient-to-b dark:from-[#070114] dark:to-[#1F0234] from-[#F3F5FF] to-[#A599CE] px-6 py-12 text-white">
+      <div className="max-w-7xl mx-auto flex flex-col gap-y-10 lg:flex-row lg:justify-between">
+        <div className="flex flex-col items-center lg:items-start gap-4 text-center lg:text-left">
+          <h1 className="jost tracking-wide bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text font-bold text-xl text-transparent mb-5 dark:from-[#562EE7] dark:to-[#FFC6E8] text-left md:text-7xl">
+            Papers
+          </h1>
+          <p className="text-md text-black dark:text-white">Made with ❤️ by Codechef-VIT</p>
+          <div className="flex items-center gap-4 flex-wrap justify-center lg:justify-start">
+            <Link href="https://www.instagram.com/codechefvit/">
+              <Button variant="ghost" size="icon">
+                <Instagram className="text-black dark:text-white" />
+              </Button>
+            </Link>
+            <Link href="https://www.linkedin.com/company/codechefvit/">
+              <Button variant="ghost" size="icon">
+                <Linkedin className="text-black dark:text-white" />
+              </Button>
+            </Link>
+            <Link href="https://www.youtube.com/@CodeChefVIT">
+              <Button variant="ghost" size="icon">
+                <Youtube className="text-black dark:text-white" />
+              </Button>
+            </Link>
+            <Link href="https://github.com/CodeChefVIT">
+              <Button variant="ghost" size="icon">
+                <Github className="text-black dark:text-white" />
+              </Button>
+            </Link>
+            <Link href="https://www.facebook.com/codechefvit/">
+              <Button variant="ghost" size="icon">
+                <Image
+                  src={
+                    isDarkMode
+                      ? (meta_icon_dark as HTMLInputElement)
+                      : (meta_icon as HTMLInputElement)
+                  }
+                  alt="meta-icon"
+                  height={24}
+                  width={24}
+                />
+              </Button>
+            </Link>
+            <Link href="https://x.com/codechefvit" className="pb-1.5">
+              <Button variant="ghost" size="icon">
+                <Image
+                  src={
+                    isDarkMode
+                      ? (x_twitter_icon_dark as HTMLInputElement)
+                      : (x_twitter_icon as HTMLInputElement)
+                  }
+                  alt="x_twitter_icon"
+                  height={24}
+                  width={24}
+                />
+              </Button>
+            </Link>
+          </div>
         </div>
-      </div>
-      <div>
-        <div className="flex items-center gap-x-8">
-          <Link href="https://www.instagram.com/codechefvit/">
-            <Button variant="ghost" size="icon">
-              <Instagram />
-            </Button>
-          </Link>
-          <Link href="https://www.linkedin.com/company/codechefvit/">
-            <Button variant="ghost" size="icon">
-              <Linkedin />
-            </Button>
-          </Link>
-          <Link href="https://www.youtube.com/@CodeChefVIT">
-            <Button variant="ghost" size="icon">
-              <Youtube />
-            </Button>
-          </Link>
-          <Link href="https://github.com/CodeChefVIT">
-            <Button variant="ghost" size="icon">
-              <Github />
-            </Button>
-          </Link>
-          <Link href="https://www.facebook.com/codechefvit/">
-            <Button variant="ghost" size="icon">
-              <Image
-                src={
-                  isDarkMode
-                    ? (meta_icon_dark as HTMLInputElement)
-                    : (meta_icon as HTMLInputElement)
-                }
-                alt="meta-icon"
-                height={24}
-                width={24}
-              />
-            </Button>
-          </Link>
-          <Link href="https://x.com/codechefvit" className="pb-1.5">
-            <Button variant="ghost" size="icon">
-              <Image
-                src={
-                  isDarkMode
-                    ? (x_twitter_icon_dark as HTMLInputElement)
-                    : (x_twitter_icon as HTMLInputElement)
-                }
-                alt="x_twitter_icon"
-                height={24}
-                width={24}
-              />
-            </Button>
-          </Link>
+        <div className="flex flex-col items-center dark:text-white text-black lg:items-start text-center lg:text-left gap-2">
+          <h3 className="text-xl font-semibold">Menu</h3>
+          <Link href="/search">Search</Link>
+          <Link href="/features">Features</Link>
+          <Link href="/faq">FAQ</Link>
+        </div>
+        <div className="flex flex-col items-center dark:text-white text-black lg:items-start text-center lg:text-left gap-2">
+          <h3 className="text-xl font-semibold">Our Projects</h3>
+          <Link href="/">Papers</Link>
+          <Link href="/">FFCS-inator</Link>
+          <Link href="/">Brainrot Arcade</Link>
+        </div>
+        <div className="flex flex-col items-center dark:text-white text-black lg:items-start text-center lg:text-left gap-2">
+          <h3 className="text-xl font-semibold">Contact Us</h3>
+          <p>[email protected]</p>
         </div>
-        {/* <p className="hidden text-center text-xl lg:block">
-          Made with 💜 By Codechef-VIT
-        </p> */}
       </div>
-      <p className="block text-xl lg:hidden">Made with 💜 By Codechef-VIT</p>
-    </div>
+    </footer>
   );
 }