Merge pull request #49 from afrin-k/staging

NishantGupt786 · web-flow · commit c94eb04ada00 · 2024-11-11T21:34:02.000+05:30
readme and design
diff --git a/README.md b/README.md
@@ -28,10 +28,25 @@
 
 ## 🏁 Get Started
 
-To get started, fork your own copy and clone the master branch. To clone a branch you can run the following:
+The repository has two branches, 'prod' and 'staging'.
+
+prod (Production Branch) represents the live, user-facing version of the project where bug-free, well-tested code resides. 
+
+staging (Staging Branch) serves as a pre-production environment, where features and fixes are tested before they go live.
+
+To get started, fork your own copy and clone your chosen branch. To clone a branch you can run the following:
+
+Clone the 'prod' branch (production)
 
 ```bash
-git clone -b master https://github.com/<Your username>/papers-codechef.git
+git clone -b prod https://github.com/<Your username>/papers-codechef.git
+```
+OR
+
+Clone the 'staging' branch (staging)
+
+```bash
+git clone -b staging https://github.com/<Your username>/papers-codechef.git
 ```
 
 Run these commands on your bash/terminal and open it in a code editor of your choice.
@@ -47,7 +62,8 @@ To start your development server run:
 ```bash
 pnpm dev
 ```
-Before getting started, please ensure that the .env file is properly configured. The .env.example file has been provided for your reference, with examples of environment variables to be  listed.
+
+Before getting started, please ensure that the .env file is properly configured. The .env.example file has been provided for your reference, with examples of environment variables to be listed.
 
 ## License
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,47 +10,46 @@ const HomePage = () => {
       <div>
         <Navbar />
       </div>
-      <div className="mt-2 flex flex-grow flex-col items-center justify-center gap-y-6">
-        <div className="w-full max-w-2xl space-y-6 text-center">
-          <h1 className="phonk text-2xl font-bold tracking-wider md:text-3xl">
-            Built by students for students
+      <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 text-2xl md:text-3xl mx-auto">
+            Built by Students for Students
           </h1>
-          <p className="text-base font-semibold">
+          
+          <p className="text-md font-semibold font-sans w-[90%] mx-auto 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">
-            <Button
-              variant="outline"
-              className="rounded-full px-6 py-6 text-xs font-semibold"
-            >
-              NO SIGN UP REQUIRED
-            </Button>
-            <Button
-              variant="outline"
-              className="rounded-full px-6 py-6 text-xs font-semibold"
-            >
-              FILTERED SEARCH
-            </Button>
-            <Button
-              variant="outline"
-              className="rounded-full px-6 py-6 text-xs font-semibold"
-            >
-              FLEXIBLE DOWNLOAD
-            </Button>
+          
+          <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="p-[2px] bg-gradient-to-r from-[#562EE7] to-[#bd21b4] rounded-full">
+              <div className="rounded-full bg-white dark:bg-black px-6 py-3 tracking-wider text-black dark:text-white font-sans">
+                {text}
+              </div>
+            </div>
+            ))}
           </div>
+
         </div>
+        
         <div className="z-20 w-full max-w-xl">
           <SearchBar />
         </div>
+        
         <div className="max-3xl w-full">
           <StoredPapers />
         </div>
+      
       </div>
+      
       <Footer />
+    
     </div>
   );
 };
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -56,38 +56,41 @@ const Card = ({
   return (
     <div
       key={paper._id}
-      className={`flex flex-col justify-between w-56 space-y-1 rounded-xl border border-black dark:border-[#7480FF]/25  ${checked ? "bg-[#EEF2FF] dark:bg-[#050b1f]" : ""}  p-4 `}
+      className={`flex flex-col mb-2 justify-between w-[65%] md:w-64 space-y-1 rounded-xl border-2 bg-white dark:bg-black hover:border-[#434dba] dark:border-[#434dba] dark:hover:border-white border-black  ${checked ? "bg-[#EEF2FF] dark:bg-[#050b1f]" : ""}  p-4 `}
     >
       <Link href={`/paper/${paper._id}`} target="_blank" rel="noopener noreferrer">
         <Image
           src={paper.thumbnailUrl}
           alt={paper.subject}
           width={320}
           height={180}
-          className="mb-2 h-[180px] w-full cursor-pointer object-cover"
+          className="mb-2 h-[160px] md:h-[180px] w-full object-cover"
         />
       </Link>
-
-      <div className="text-sm font-medium">
-        {extractBracketContent(paper.subject)}
-      </div>
-      <div className="text-md font-medium">
-        {extractWithoutBracketContent(paper.subject)}
-      </div>
-      <div className="flex gap-2 py-2">
-        {capsule(paper.exam)}
-        {capsule(paper.slot)}
-        {capsule(paper.year)}
+      
+      <div className="justify-center space-y-2 h-28">
+        <div className="text-sm font-sans font-medium">
+          {extractBracketContent(paper.subject)}
+        </div>
+        <div className="text-base font-sans font-semibold">
+          {extractWithoutBracketContent(paper.subject)}
+        </div>
+        <div className="flex gap-2 py-2">
+          {capsule(paper.exam)}
+          {capsule(paper.slot)}
+          {capsule(paper.year)}
+        </div>
       </div>
-      <div className="hidden items-center justify-between gap-2 md:flex">
-        <div className="flex items-center gap-1">
+
+      <div className="hidden items-center pt-4 justify-between gap-2 md:flex">
+        <div className="flex items-center gap-2">
           <input
             checked={checked}
             onChange={handleCheckboxChange}
-            className="h-3 w-3 rounded-lg"
+            className="h-4 w-4 rounded-lg"
             type="checkbox"
           />
-          <p className="text-sm">Select</p>
+          <p className="text-sm font-sans">Select</p>
         </div>
         <div className="flex gap-2">
           <Link href={`/paper/${paper._id}`} target="_blank" rel="noopener noreferrer">
diff --git a/src/components/CatalogueContent.tsx b/src/components/CatalogueContent.tsx
@@ -175,16 +175,17 @@ const CatalogueContent = () => {
             />
           )}{" "}
           <div className=" hidden items-center justify-center gap-2 md:flex md:justify-end 2xl:mr-4">
-            <Button variant="outline" onClick={handleSelectAll}>
+            <Button variant="outline" onClick={handleSelectAll} className="font-sans font-semibold border-2 border-black dark:border-[#434dba] hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 dark:hover:border-white">
               Select All
             </Button>
-            <Button variant="outline" onClick={handleDeselectAll}>
+            <Button variant="outline" onClick={handleDeselectAll} className="font-sans font-semibold border-2 border-black dark:border-[#434dba] hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 dark:hover:border-white">
               Deselect All
             </Button>
             <Button
               variant="outline"
               onClick={handleDownloadAll}
               disabled={selectedPapers.length === 0}
+              className="font-sans font-semibold border-2 border-black dark:border-[#434dba] hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 dark:hover:border-white"
             >
               Download All ({selectedPapers.length})
             </Button>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 
 function Navbar() {
   return (
-    <div className="flex items-center justify-between gap-x-3 px-2 py-6 md:px-12">
+    <div className="flex items-center justify-between gap-x-3 w-[90%] md:w-full overflow-x-hidden px-2 py-6 md:px-12">
       <div className="hidden w-[20%] md:block">
         <a href="https://www.codechefvit.com/" className="inline-block">
           <Image
@@ -21,7 +21,7 @@ function Navbar() {
       <div>
         <Link
           href="/"
-          className="jost bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-center text-5xl font-bold text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8] md:w-[60%] md:text-6xl"
+          className="jost tracking-wide bg-gradient-to-r from-[#562EE7] to-[#bd21b4] bg-clip-text text-center text-4xl font-extrabold text-transparent dark:from-[#562EE7] dark:to-[#bd21b4] md:w-[60%] md:text-6xl"
         >
           Papers
         </Link>
@@ -32,14 +32,13 @@ function Navbar() {
         </div>
 
         <Link href="/upload">
-          <Button
-            variant="outline"
-            className="mt-2 rounded-full px-6 py-4 text-xs md:mt-0 md:text-sm"
-          >
-            <ArrowUpToLine />
-            <span>UPLOAD PAPERS</span>
-          </Button>
+          <div className="md:p-[2px] bg-gradient-to-r from-[#562EE7] to-[#bd21b4] rounded-full">
+              <div className="rounded-full font-bold text-xs md:text-sm mt-2 md:mt-0 bg-slate-200 dark:bg-black px-4 md:px-6 py-3 tracking-wider text-black dark:text-white font-sans hover:bg-white dark:hover:bg-slate-700">
+              ⇱ UPLOAD PAPERS
+              </div>
+            </div>
         </Link>
+
       </div>
     </div>
   );
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
@@ -14,22 +14,23 @@ const PreviewCard = ({ paper }: { paper: Paper }) => {
   return (
     <div
       key={paper._id}
-      className="w-56 space-y-1 rounded-xl border border-black border-opacity-50 p-4 dark:border-[#7480FF]/25"
+      className="w-[65%] md:w-64 space-y-1 rounded-xl border-2 bg-white dark:bg-black hover:border-[#434dba] dark:hover:border-white border-black p-4 dark:border-[#434dba]"
     >
       <Link href={`/paper/${paper._id}`} target="_blank" rel="noopener noreferrer">
         <Image
           src={paper.thumbnailUrl}
           alt={paper.subject}
           width={180}
           height={180}
-          className="mb-2 h-[150px] w-full object-cover"
+          className="mb-2 h-[160px] md:h-[180px] w-full object-cover"
         />
       </Link>
-      <div className="flex flex-col justify-between h-28">
-        <div className="text-sm font-medium">
+      
+      <div className="flex flex-col justify-center space-y-2 h-28">
+        <div className="text-sm font-sans font-medium">
           {extractBracketContent(paper.subject)}
         </div>
-        <div className="text-md font-medium">
+        <div className="text-base font-sans cursor-pointer font-semibold">
           {extractWithoutBracketContent(paper.subject)}
         </div>
         <div className="flex gap-2">
@@ -38,6 +39,7 @@ const PreviewCard = ({ paper }: { paper: Paper }) => {
           {capsule(paper.year)}
         </div>
       </div>
+    
     </div>
   );
 };
diff --git a/src/components/StoredPapers.tsx b/src/components/StoredPapers.tsx
@@ -29,7 +29,7 @@ function StoredPapers() {
 
   return (
     <>
-      <p className="mb-4 text-center font-semibold">Most Viewed Papers</p>
+      <p className="mt-8 mb-6 text-center font-sans text-2xl md:text-3xl font-semibold">Most Viewed Papers</p>
       <div className="flex flex-wrap justify-center gap-4">
         {displayPapers.map((paper: Paper) => (
           <PreviewCard key={paper._id} paper={paper} />
diff --git a/src/components/searchbar.tsx b/src/components/searchbar.tsx
@@ -85,7 +85,7 @@ function SearchBar() {
             value={searchText}
             onChange={handleSearchChange}
             placeholder="Search by subject..."
-            className={`w-full rounded-xl border bg-[#7480FF] px-4 py-6 pr-10 text-white shadow-sm placeholder:text-white focus:outline-none focus:ring-2 ${loading ? "opacity-70" : ""}`}
+            className={`w-full font-sans text-md font-semibold tracking-wider rounded-full border bg-[#434dba] px-4 py-6 pr-10 text-white shadow-sm placeholder:text-white focus:outline-none focus:ring-2 ${loading ? "opacity-70" : ""}`}
           />
           <button
             type="submit"
@@ -96,14 +96,14 @@ function SearchBar() {
             <Search className="h-5 w-5 text-white " />
           </button>
           {loading && (
-            <div className="absolute z-20 mt-2 w-full max-w-xl rounded-md border border-[#7480FF] bg-white p-2 text-center dark:bg-[#030712]">
+            <div className="font-sans text-md font-semibold tracking-wider absolute z-20 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white p-2 text-center dark:bg-[#030712]">
               Loading suggestions...
             </div>
           )}
           {(suggestions.length > 0 || error) && !loading && (
             <ul
               ref={suggestionsRef}
-              className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#7480FF] bg-white text-center dark:bg-[#030712] md:mx-0"
+              className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white text-center dark:bg-[#030712] md:mx-0"
             >
               {error ? (
                 <li className="text-red p-2">{error}</li>
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-"use client"`
	`1`	`+"use client";`
`2`	`2`
`3`	`3`	`import * as React from "react"`
`4`	`4`	`import { ThemeProvider as NextThemesProvider } from "next-themes"`