fixed some changes required

src/app/page.tsx

@@ -1,26 +1,26 @@
-import SearchBar from "@/components/searchbar";
 import Navbar from "@/components/Navbar";
 import StoredPapers from "@/components/StoredPapers";
 import Footer from "@/components/Footer";
 import Hero from "@/components/Hero";
 import Faq from "@/components/Faq";
+import SearchBar from "@/components/Searchbar/searchbar";
 
 const HomePage = () => {
   return (
     <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="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="vipnabd font-extrabold text-3xl md:text-3xl mx-auto mt-14 mb-6">
             Built by Students for Students
           </h1>
         </div>
-        <div className="z-20 w-full max-w-xl mb-6">
+        <div className="z-20 w-full max-w-xl">
           <SearchBar />
         </div>
-        <div className="w-full max-w-7xl">
+        <div className="w-full max-w-8xl">
           <StoredPapers />
         </div>
         <div className="w-full max-w-7xl">

src/components/Card.tsx

@@ -64,7 +64,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-md border-2 border-[#36266D] bg-[#171720] hover:bg-[#262635]",
+        "overflow-hidden play rounded-sm border-2 dark:border-[#36266D] border-[#734DFF] bg-[#FFFFFF] dark:bg-[#171720] hover:bg-[#EFEAFF] hover:dark:bg-[#262635]",
         checked && "bg-[#262635]",
       )}
     >
@@ -90,7 +90,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
             </div>
           </div>
 
-          <div className="h-[1px] w-full bg-[#36266D]" />
+          <div className="h-[1px] w-full dark:bg-[#36266D] bg-[#734DFF]" />
 
           <div className="space-y-2 p-4">
             <div className="font-sans text-base font-semibold">
@@ -106,7 +106,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
         </div>
       </Link>
 
-      <div className="hidden items-center justify-between gap-2 px-4 pb-4 md:flex">
+      <div className="hidden play items-center justify-between gap-2 px-4 pb-4 md:flex">
         <div className="flex items-center gap-2">
           <input
             checked={checked}
@@ -127,4 +127,4 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   );
 };
 
-export default Card;
+export default Card;

src/components/Faq.tsx

@@ -22,23 +22,25 @@ function Faq() {
             </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">
+                    <div
+                        key={index}
+                        className="p-4 border-b-2 border-[#453D60] cursor-pointer"
+                        onClick={() => handleClick(index)}
+                    >
+                        <div className="flex items-center justify-between w-full">
                             <h2
-                                className={`text-lg play font-semibold ${faqActive === index ? "dark:text-[#A47DE5] text-[#6F2DA6]" : "dark:text-[#C0BACE] text-black"} w-full pr-15`}
+                                className={`text-lg font-semibold w-full ${faqActive === index ? "text-[#A47DE5]" : "text-[#C0BACE]"}`}
                             >
                                 {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]"}`}
+                                className={`text-md font-bold w-11 h-6 flex items-center justify-center rounded-full transition-all duration-200 
+                        ${faqActive === index ? "text-white bg-[#A47DE5]" : "bg-white text-[#99979F]"}`}
                             >
                                 {faqActive === index ? "−" : "+"}
                             </button>
                         </div>
-                        {faqActive === index && (
-                            <p className="mt-2 play text-black dark:text-[#C0BACE]">{faq.answer}</p>
-                        )}
+                        {faqActive === index && <p className="mt-2 text-white">{faq.answer}</p>}
                     </div>
                 ))}
             </div>

src/components/Hero.tsx

@@ -15,12 +15,12 @@ function Hero() {
     <div id="hero" className="m-10 pt-10 flex flex-col lg:flex-row items-center justify-between">
       <div className="w-full lg:w-[50%] text-center lg:text-left">
         <div className="vignabd mb-8 text-3xl lg:text-5xl font-extrabold text-[#120020] dark:text-white">
-          <span className="mb-2 block">Prepare to excel in</span>
-          <span className="mb-2 block">your CATs and FATs</span>
-          <span className="mb-2 block ">with CodeChef-</span>
-          <span className="mb-2 block">VIT’s dedicated</span>
-          <span className="mb-2 block">repository of past</span>
-          <span className="mb-6 block">exam papers</span>
+          <span className="mb-2 block font-extrabold">Prepare to excel in</span>
+          <span className="mb-2 block font-extrabold">your CATs and FATs</span>
+          <span className="mb-2 block font-extabold ">with CodeChef-</span>
+          <span className="mb-2 block font-extrabold">VIT’s dedicated</span>
+          <span className="mb-2 block font-extrabold">repository of past</span>
+          <span className="mb-6 block font-extrabold">exam papers</span>
         </div>
         <div className="play mt-6 flex flex-col lg:flex-row lg:gap-6 text-[#120020] dark:text-white items-center">
           <div className="flex flex-col gap-4 lg:w-[200px]">

src/components/Searchbar/searchbar-child.tsx

@@ -9,15 +9,12 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   const router = useRouter();
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
   const [subjects] = useState<string[]>(initialSubjects);
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     setSearchText(text);
-    setIsSearching(true);
 
     if (text.length > 1 && subjects.length > 0) {
       const filteredSuggestions = subjects.filter((subject) =>
@@ -32,18 +29,15 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   const handleSelectSuggestion = (suggestion: string) => {
     setSearchText(suggestion);
     setSuggestions([]);
-    setIsSearching(false);
     router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
   };
 
   const handleClickOutside = (event: MouseEvent) => {
     if (
       suggestionsRef.current &&
-      !suggestionsRef.current.contains(event.target as Node) &&
-      !inputRef.current?.contains(event.target as Node)
+      !suggestionsRef.current.contains(event.target as Node)
     ) {
       setSuggestions([]);
-      setIsSearching(false);
     }
   };
 
@@ -55,39 +49,35 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   }, []);
 
   return (
-    <div className="mx-4 md:mx-0">
+    <div className="mx-4 md:mx-0 play">
       <form
         className="w-full max-w-xl"
         onSubmit={(e) => {
           e.preventDefault();
           if (searchText) {
-            setIsSearching(false);
             router.push(`/catalogue?subject=${encodeURIComponent(searchText)}`);
           }
         }}
       >
         <div className="relative">
           <Input
-            ref={inputRef}
             type="text"
             value={searchText}
             onChange={handleSearchChange}
-            onFocus={() => setIsSearching(true)}
             placeholder="Search by subject..."
-            className="text-md w-full rounded-full border bg-[#434dba] px-4 py-6 pr-10 font-sans tracking-wider text-white shadow-sm placeholder:text-white focus:outline-none focus:ring-2"
+            className="text-md w-full rounded-lg play bg-[#B2B8FF] dark:bg-[#7480FF66] px-4 py-6 pr-10 font-sans tracking-wider dark:text-white text-black shadow-sm placeholder:dark:text-white placeholder:text-black focus:outline-none focus:ring-2"
           />
           <button
             type="submit"
             className="absolute inset-y-0 right-0 flex items-center pr-3"
           >
-            <Search className="h-5 w-5 text-white" />
+            <Search className="h-5 w-5 text-black dark:text-white" />
           </button>
-          {isSearching &&
-            (suggestions.length > 0 ||
-              (searchText.length > 1 && subjects.length > 0)) && (
+          {(suggestions.length > 0 ||
+            (searchText.length > 1 && subjects.length > 0)) && (
               <ul
                 ref={suggestionsRef}
-                className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white text-center shadow-lg dark:bg-[#030712] md:mx-0"
+                className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md bg-white text-center shadow-lg dark:bg-[#030712] md:mx-0"
               >
                 {suggestions.length > 0 ? (
                   suggestions.map((suggestion, index) => (
@@ -112,4 +102,4 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   );
 }
 
-export default SearchBarChild;
+export default SearchBarChild;

src/components/Searchbar/searchbar.tsx

@@ -18,5 +18,7 @@ async function fetchSubjects() {
 export default async function SearchBar() {
   const subjects = await fetchSubjects();
 
+  console.log("Fetched subjects:", subjects);
+
   return <SearchBarChild initialSubjects={subjects} />;
-}
+}

src/components/StoredPapers.tsx

@@ -2,7 +2,7 @@
 import papers from "ongoing-papers";
 import { useEffect, useState } from "react";
 import axios from "axios";
-import PreviewCard from "@/components/PreviewCard";
+import Card from "@/components/Card";
 import { type IPaper } from "@/interface";
 import Loader from "./ui/loader";
 import Link from "next/link";
@@ -30,13 +30,18 @@ function StoredPapers() {
 
   return (
     <>
-      <p className="mt-2 mb-6 text-center play text-lg font-semibold">Most Viewed Papers</p>
-      <div className="flex flex-wrap justify-center gap-4">
+      <p className="mt-2 mb-4 text-center play text-lg font-semibold">Most Viewed Papers</p>
+      <div className="flex flex-wrap justify-center gap-6">
         {displayPapers.map((paper: IPaper) => (
-          <PreviewCard key={paper._id} paper={paper} />
+          <Card
+            key={paper._id}
+            paper={paper}
+            onSelect={() => { "" }}
+            isSelected={false}
+          />
         ))}
       </div>
-      <h1 className="play text-md text-center mt-10">Learn More</h1>
+      <h1 className="play text-md text-center mt-4">Learn More</h1>
       <Link href="#hero" className="play flex items-center justify-center text-center text-md dark:text-white text-black">▼</Link>
     </>
   );