made ui better

shridmishra · Nov 15, 2024 · f173efc · f173efc
1 parent e30bbb1
commit f173efc
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 90 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -10,7 +10,7 @@ import { NavBar } from "@/components/NavBar";
 
 export default function Home() {
   return (
-    <div className=" min-h-screen bg-black flex flex-col font-poppins px-4 lg:px-28"> 
+    <div className=" min-h-screen bg-black flex flex-col font-poppins  "> 
       <NavBar/>
       <Intro />
       <FirstYear id="first-year" />

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,64 +1,82 @@
 import React from "react";
-import { FaInstagram, FaTwitter, FaLinkedin } from "react-icons/fa";
+import { FaInstagram, FaTwitter, FaLinkedin, FaHeart } from "react-icons/fa";
 
 export const Footer = () => {
   return (
-    <footer className="bg-black text-gray-300 pt-16 px-8 text-center">
-      <div className="max-w-4xl mx-auto">
-        <h2 className="font-extrabold text-4xl sm:text-5xl text-indigo-400 mb-4">
-          Contribute and Help Others
-        </h2>
-        <p className="text-lg sm:text-xl text-slate-300 mb-8">
-          Your notes can be a valuable resource for your peers. Submit your notes to help others succeed!
-        </p>
-        <a
-          href="https://drive.google.com/drive/folders/1IMh4elb-RYv5M8GpQrJaVQZLZyI2w4uY"
-          className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-lg shadow-lg transition-all duration-300"
-        >
-          Submit Your Notes
-        </a>
-        <div className="mt-16 text-md mb-6">
-          <p>
-            Designed & Developed By <br />{" "}
-            <a
-              href="https://www.linkedin.com/in/shridmishra" // Replace with actual LinkedIn profile URL
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-bold hover:underline"
-            >
-              Shrid Mishra
-            </a>
+    <footer className="relative bg-gradient-to-b from-black via-gray-950 to-blue-950 text-gray-300 pt-20 pb-10 px-8 overflow-hidden">
+      {/* Background Illustrations */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-20 left-10 w-72 h-72 bg-blue-600 rounded-full filter blur-3xl"></div>
+        <div className="absolute bottom-10 right-10 w-96 h-96 bg-indigo-600 rounded-full filter blur-3xl"></div>
+        <div className="absolute top-40 right-1/4 w-64 h-64 bg-purple-600 rounded-full filter blur-3xl"></div>
+      </div>
+
+      <div className="relative max-w-5xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="font-extrabold text-4xl sm:text-5xl bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent mb-6">
+            Contribute and Help Others
+          </h2>
+          <p className="text-base lg:text-xl text-slate-400 mb-10 max-w-2xl mx-auto">
+            Your notes can make a difference! Share your knowledge and help create a supportive learning community.
           </p>
-        </div>
-        <div className="flex justify-center gap-4 mb-4">
-          <a
-            href="https://www.instagram.com/shridmishra" // Replace with actual Instagram URL
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-indigo-400 hover:text-white transition-colors duration-300"
-            aria-label="Instagram"
-          >
-            <FaInstagram className="h-6 w-6" />
-          </a>
           <a
-            href="https://twitter.com/shridmishra" // Replace with actual Twitter URL
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-indigo-400 hover:text-white transition-colors duration-300"
-            aria-label="Twitter"
+            href="https://drive.google.com/drive/folders/1IMh4elb-RYv5M8GpQrJaVQZLZyI2w4uY"
+            className="inline-block bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-semibold py-4 px-8 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300"
           >
-            <FaTwitter className="h-6 w-6" />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/shridmishra" // Replace with actual LinkedIn URL
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-indigo-400 hover:text-white transition-colors duration-300"
-            aria-label="LinkedIn"
-          >
-            <FaLinkedin className="h-6 w-6" />
+            Submit Your Notes
           </a>
         </div>
+
+        <div className="border-t border-blue-900 pt-10">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
+            <div className="flex flex-col items-center md:items-start">
+              <p className="text-lg font-medium mb-2">Connect With Us</p>
+              <div className="flex gap-6">
+                <a
+                  href="https://www.instagram.com/shridmishra"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-400 hover:text-white transform hover:scale-110 transition-all duration-300"
+                  aria-label="Instagram"
+                >
+                  <FaInstagram className="h-6 w-6" />
+                </a>
+                <a
+                  href="https://twitter.com/shridmishra"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-400 hover:text-white transform hover:scale-110 transition-all duration-300"
+                  aria-label="Twitter"
+                >
+                  <FaTwitter className="h-6 w-6" />
+                </a>
+                <a
+                  href="https://www.linkedin.com/in/shridmishra"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-400 hover:text-white transform hover:scale-110 transition-all duration-300"
+                  aria-label="LinkedIn"
+                >
+                  <FaLinkedin className="h-6 w-6" />
+                </a>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-center md:text-right">
+              <p className="text-sm">
+                Made with <FaHeart className="inline text-red-500 mx-1" /> by{" "}
+                <a
+                  href="https://shridmishra.vercel.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-bold text-blue-400 hover:text-white transition-colors duration-300"
+                >
+                  Shrid Mishra
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </footer>
   );

diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
@@ -8,14 +8,14 @@ export const Intro = () => {
   const chemSymbols = ["H₂O", "CO₂", "NaCl", "O₂", "H⁺", "OH⁻", "CH₄"];
 
   return (
-    <section className="min-h-screen bg-gradient-to-b from-black via-black/95 to-blue-950/20 text-indigo-200 px-4 sm:px-6 lg:px-8 flex items-center relative overflow-hidden">
+    <section className=" bg-gradient-to-b from-black via-black/95 to-blue-950/20 text-indigo-200 px-4 sm:px-6 lg:px-8 flex items-center relative overflow-hidden">
       {/* Animated background elements */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute w-[500px] h-[500px] -top-48 -right-48 bg-blue-500/10 rounded-full blur-3xl animate-pulse" />
         <div className="absolute w-[400px] h-[400px] -bottom-32 -left-32 bg-indigo-500/10 rounded-full blur-3xl animate-pulse" />
       </div>
 
-      <div className="max-w-7xl mx-auto w-full py-12 sm:py-16 lg:py-20 relative z-10">
+      <div className="max-w-7xl mx-auto w-full py-6 lg:pb-20 relative z-10">
         <div className="grid lg:grid-cols-2 gap-16 lg:gap-12 items-center">
           {/* Content Column */}
           <motion.div 
@@ -58,7 +58,7 @@ export const Intro = () => {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.9 }}
-                className="text-lg sm:text-xl text-gray-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"
+                className="text-sm lg:text-xl text-gray-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"
               >
                 Access comprehensive semester notes, study materials, books, previous year questions, and curated lecture links - all in one place.
               </motion.p>
@@ -98,7 +98,7 @@ export const Intro = () => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 1 }}
-            className="relative h-[600px]"
+            className="lg:relative lg:h-[600px] absolute inset-0 opacity-20 lg:opacity-100 pointer-events-none"
           >
             {/* Math Symbols */}
             {mathSymbols.map((symbol, i) => (

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -1,33 +1,66 @@
+"use client"
 import { FaBookBookmark } from "react-icons/fa6";
+import { useState } from "react";
+import { RxHamburgerMenu } from "react-icons/rx";
+import { IoMdClose } from "react-icons/io";
 
 export const NavBar = () => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-    return <nav class="sticky wrapper top-0 z-50 flex items-center gap-2  pt-6 ">
-
-        <div class="flex w-full justify-between mx-auto bg-transparent shadow-lg shadow-neutral-600/2 backdrop-blur-lg border border-gray-700  p-6 rounded-2xl">
-
-        <a class="flex flex-nowrap items-center gap-2 cursor-pointer w-full" href="/">
-        <FaBookBookmark className="h-6 w-6 "/>
-        <div class="text-md md:text-2xl font-bold tracking-tight ">GSNotes</div>
-        </a>
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
 
+    return <nav class="sticky wrapper top-0 z-50 flex items-center gap-2 pt-6 mx-6 lg:mx-28">
+        <div class="flex w-full justify-between mx-auto bg-transparent shadow-lg shadow-neutral-600/2 backdrop-blur-lg border border-gray-700 p-6 rounded-2xl">
+            <a class="flex flex-nowrap items-center gap-2 cursor-pointer w-full" href="/">
+                <FaBookBookmark className="h-6 w-6"/>
+                <div class="text-md md:text-2xl font-bold tracking-tight">GSNotes</div>
+            </a>
 
-        <div className="flex justify-between gap-8 mr-4 items-center">
-        <a class="flex items-center gap-2 cursor-pointer" href="/">
-        <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hidden md:block hover:text-slate-400">Home</span>
-        </a>
-        <a class="flex items-center gap-2 cursor-pointer" href="/">
-        <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hidden md:block hover:text-slate-400">PYQs</span>
-        </a>
-        <a class="flex items-center gap-2 cursor-pointer" href="/">
-        <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hidden md:block hover:text-slate-400">Books</span>
-        </a>
-        <a class="flex items-center gap-2 cursor-pointer" href="/">
-        <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hidden md:block hover:text-slate-400">Lectures</span>
-        </a>
-
-        </div>
-
+            {/* Mobile Menu Button */}
+            <button 
+                className="md:hidden text-2xl"
+                onClick={toggleMenu}
+            >
+                {isMenuOpen ? <IoMdClose /> : <RxHamburgerMenu />}
+            </button>
+
+            {/* Desktop Menu */}
+            <div className="hidden md:flex justify-between gap-8 mr-4 items-center">
+                <a class="flex items-center gap-2 cursor-pointer" href="/">
+                    <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hover:text-slate-400">Home</span>
+                </a>
+                <a class="flex items-center gap-2 cursor-pointer" href="/">
+                    <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hover:text-slate-400">PYQs</span>
+                </a>
+                <a class="flex items-center gap-2 cursor-pointer" href="/">
+                    <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hover:text-slate-400">Books</span>
+                </a>
+                <a class="flex items-center gap-2 cursor-pointer" href="/">
+                    <span class="text-sm md:text-xl font-thin tracking-tight text-foreground hover:text-slate-400">Lectures</span>
+                </a>
+            </div>
+
+            {/* Mobile Menu */}
+            {isMenuOpen && (
+                <div className="absolute top-full left-0 right-0 mt-2 bg-black/90 backdrop-blur-lg border border-gray-700 rounded-lg p-4 md:hidden">
+                    <div className="flex flex-col gap-4">
+                        <a class="cursor-pointer" href="/">
+                            <span class="text-sm font-thin tracking-tight text-foreground hover:text-slate-400">Home</span>
+                        </a>
+                        <a class="cursor-pointer" href="/">
+                            <span class="text-sm font-thin tracking-tight text-foreground hover:text-slate-400">PYQs</span>
+                        </a>
+                        <a class="cursor-pointer" href="/">
+                            <span class="text-sm font-thin tracking-tight text-foreground hover:text-slate-400">Books</span>
+                        </a>
+                        <a class="cursor-pointer" href="/">
+                            <span class="text-sm font-thin tracking-tight text-foreground hover:text-slate-400">Lectures</span>
+                        </a>
+                    </div>
+                </div>
+            )}
         </div>
-        </nav>
+    </nav>
 }
diff --git a/src/components/all-years-component/AllYear.jsx b/src/components/all-years-component/AllYear.jsx
@@ -15,7 +15,7 @@ export const AllYear = ({ year,id }) => {
   const SelectedYearCard = yearComponents[year] || null;
 
   return (
-    <div className="bg-indigo-700 lg:m-12 mx-4 my-6 rounded-lg" id={id} >
+    <div className="bg-indigo-700 lg:m-40 mx-4 my-6 rounded-lg " id={id} >
       <h1 className="text-white font-semibold text-2xl p-2">{year} Year</h1>
       {SelectedYearCard}
     </div>

diff --git a/src/components/all-years-component/FirstYear.jsx b/src/components/all-years-component/FirstYear.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FirstYearCard } from "./FirstYearCard";
 
 export const FirstYear = ({ id }) => (
-  <div className="bg-gradient-to-t to-blue-600 from-blue-900 lg:m-12 mx-4 my-6 rounded-lg" id={id}>
+  <div className="bg-gradient-to-t to-blue-600 from-blue-900 lg:m-40 mx-4 my-6 rounded-lg" id={id}>
     <h1 className="text-white font-semibold text-2xl p-2">First Year</h1>
     <FirstYearCard />
   </div>

diff --git a/src/components/all-years-component/SecondYearCard.jsx b/src/components/all-years-component/SecondYearCard.jsx
@@ -109,12 +109,8 @@ export const SecondYearCard = () => {
   const displayedNotes = showAll ? notes : notes.slice(0, 7);
 
   return (
-    <div className="flex flex-col bg-zinc-950 p-6 shadow-xl rounded-xl border border-zinc-800/50">
-      <div className="flex items-center gap-2 mb-6">
-        <h2 className="text-xl font-semibold text-gray-200 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
-          Second Year Notes
-        </h2>
-      </div>
+    <div className="flex flex-col bg-zinc-950 p-6 shadow-xl rounded-xl border border-zinc-800/50 ">
+
 
       <Select onValueChange={setSelectedBranch}>
         <SelectTrigger className="w-[180px] bg-black/50 text-gray-200 border-zinc-800 hover:bg-zinc-900 mb-4 backdrop-blur-sm transition-all duration-300 hover:border-blue-500/50">