Merge pull request #45 from ComputerSocietyVITC/misc

Misc
ComputerSocietyVITC · Aug 9, 2024 · f37a9d6 · f37a9d6
2 parents 95a20d8 + 9697d74
commit f37a9d6
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 91 deletions.
diff --git a/public/compsoc.png b/public/compsoc.png
diff --git a/public/swc.png b/public/swc.png
diff --git a/public/vit.svg b/public/vit.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -68,46 +68,7 @@ body {
   background: linear-gradient(#0f1d29 23.04%, #114554 67.69%, #101019 90.29%);
 }
 
-.timer-bg {
-  background: linear-gradient(90.13deg, #0d1732 3.26%, #0c2530 61.13%);
-}
-
-.about-content {
-  border: 2px solid rgb(0, 8, 52);
-
-  background: linear-gradient(90.13deg, #0d1732 3.26%, #0c2530 61.13%);
-  opacity: 1;
-  position: relative;
-}
-
-.about-content::before {
-  position: absolute;
-  content: "";
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(3, 28, 84, 0.993);
-}
-
-.event-content {
-  border: 2px solid rgb(0, 8, 52);
-
-  background: linear-gradient(90.13deg, #0d1732 3.26%, #0c2530 61.13%);
-  opacity: 1;
-  position: relative;
-}
 
-.event-content::before {
-  content: "";
-  top: 0;
-  left: 0;
-  border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(3, 28, 84, 0.993);
-}
 
 .partial-border-gradient {
   background: linear-gradient(

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,9 +16,9 @@ export default function RootLayout({
   return (
     <html lang="en" className="scroll-smooth overflow-x-hidden bg-black">
       <body className="bg-[url('/bg.svg')] bg-cover">
-        <Navbar />
+        {/*<Navbar />*/}
         {children}
-        <Footer />
+        {/*<Footer />*/}
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,19 +5,44 @@ import { sponsorsList } from "@/lib/sponsorsList";
 import { Montserrat } from "next/font/google";
 import Main from "@/pages/main";
 import Showcase from "@/pages/showcase";
+import Aboutus from "@/pages/aboutus";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
 export default function Home() {
   return (
     <main className={montserrat.className}>
+      <section className="flex justify-around absolute w-full">
+        <Image
+          src="/vit.svg"
+          alt=""
+          width={150}
+          height={150}
+          className="object-contain sm:w-24"
+        />
+        <Image
+          src="/compsoc.png"
+          width={150}
+          height={150}
+          alt=""
+          className=" object-contain sm:w-24 sm:pl-5"
+        />
+        <Image
+          src="/swc.png"
+          width={150}
+          height={150}
+          alt=""
+          className="object-contain sm:w-24"
+        />
+      </section>
       <div className="w-4/5 mx-auto px-4 text-white">
         <Main />
+        {/*<Aboutus />
         {/* Events Section */}
-        <Showcase />
+        {/*<Showcase />*/}
 
         {/* Sponsors Section */}
-        <div className="w-full" id="sponsors">
+        {/*<div className="w-full" id="sponsors">
           <p className="text-center font-extrabold text-5xl">Our Sponsors</p>
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mt-24 text-center border-[#104456] border-2 m-8">
             {sponsorsList.map((sponsor, index) => (
@@ -28,17 +53,17 @@ export default function Home() {
               />
             ))}
           </div>
-        </div>
+        </div>*/}
 
         {/* FAQ Section */}
-        <div className="w-full py-24" id="faq">
+        {/*<div className="w-full py-24" id="faq">
           <p className="text-center font-extrabold text-5xl py-24">
             Frequently Asked Questions
           </p>
           <div className="items-center justify-center">
             <FAQAccordion />
           </div>
-        </div>
+        </div>*/}
       </div>
     </main>
   );

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -20,7 +20,7 @@ const Navbar = () => {
       <div
         className={`${
           montserrat.className
-        } px-6 py-4 lg:px-8 lg:py-6 flex justify-between items-center lg:relative z-50 top-0 left-0 w-full ${
+        } px-6 py-4 lg:px-8 lg:py-6 flex justify-between items-center mx-auto z-50 top-0 left-0 w-4/5  ${
           isOpen ? "hidden" : ""
         }`}
       >
@@ -31,7 +31,7 @@ const Navbar = () => {
         <nav className="lg:hidden">
           <button
             onClick={handleClick}
-            className="flex flex-col justify-center items-center py-1"
+            className="flex flex-col items-center py-1"
           >
             <span
               className={`bg-slate-400 block transition-all duration-300 ease-out
@@ -65,8 +65,6 @@ const Navbar = () => {
             </NavButton>
           ))}
         </nav>
-
-        <div className="hidden lg:block"></div>
       </div>
       {isOpen && (
         <section className="absolute z-50 h-screen w-screen">

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
@@ -26,39 +26,47 @@ const Timer = () => {
   }, []);
 
   return (
-    <div className="w-4/5 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] md:skew-x-[-25deg] sm:skew-x-[-15deg] mx-auto partial-border-gradient">
-      <div className="h-fit w-full timer-bg rounded-xl text-white sm:text-4xl md:text-4xl text-8xl inline-block text-center p-4 md:p-8">
-        <div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-2">
-          <div className="w-full">
-            <div className="skew-x-[25deg]">
-              <p id="day" className="-mb-2 font-extrabold">
+    <div className="md:scale-[70%] w-4/5 md:w-4/5 sm:w-full max-w-screen-lg h-full rounded-3xl skew-x-[-25deg] md:skew-x-[-10deg] sm:skew-x-[-5deg] mx-auto partial-border-gradient">
+      <div className="h-fit w-full bg-gradient-to-br from-[#100e17] via-[#0b1b3a] to-[#0d0b13] border-white/[0.2] rounded-xl text-white text-8xl text-center p-4 md:p-8">
+        <div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-2 items-center place-content-center">
+          <div className="w-full mt-4">
+            <div className="skew-x-[25deg] sm:skew-x-[5deg] md:skew-x-[10deg] w-full">
+              <p id="day" className=" font-extrabold sm:text-6xl">
                 {days < 10 ? "0" + days : days}
               </p>
-              <span className="text-4xl md:text-3xl font-thin">DAYS</span>
+              <section className="text-4xl md:text-3xl font-thin py-4 sm:text-2xl">
+                DAYS
+              </section>
             </div>
           </div>
-          <div className="w-full mb-4">
-            <div className="skew-x-[25deg]">
-              <p id="hour" className="-mb-2 font-extrabold">
+          <div className="w-full">
+            <div className="skew-x-[25deg] sm:skew-x-[5deg] md:skew-x-[10deg]">
+              <p id="hour" className=" font-extrabold sm:text-6xl">
                 {hours < 10 ? "0" + hours : hours}
               </p>
-              <span className="text-4xl md:text-3xl font-thin">HOURS</span>
+              <section className="text-4xl md:text-3xl font-thin py-4 sm:text-2xl">
+                HOURS
+              </section>
             </div>
           </div>
-          <div className="w-full mb-4 =">
-            <div className="skew-x-[25deg]">
-              <p id="minute" className="-mb-2 font-extrabold">
+          <div className="w-full">
+            <div className="skew-x-[25deg] sm:skew-x-[5deg] md:skew-x-[10deg]">
+              <p id="minute" className="font-extrabold sm:text-6xl">
                 {minutes < 10 ? "0" + minutes : minutes}
               </p>
-              <span className="text-4xl md:text-3xl font-thin">MINUTES</span>
+              <section className="text-4xl md:text-3xl font-thin py-4 sm:text-2xl">
+                MINUTES
+              </section>
             </div>
           </div>
           <div className="w-full">
-            <div className="skew-x-[25deg]">
-              <p id="second" className="-mb-2 font-extrabold">
+            <div className="skew-x-[25deg] sm:skew-x-[5deg] md:skew-x-[10deg]">
+              <p id="second" className="font-extrabold sm:text-6xl">
                 {seconds < 10 ? "0" + seconds : seconds}
               </p>
-              <span className="text-4xl md:text-3xl font-thin">SECONDS</span>
+              <section className="text-4xl md:text-3xl font-thin py-4 sm:text-2xl">
+                SECONDS
+              </section>
             </div>
           </div>
         </div>

diff --git a/src/pages/aboutus.tsx b/src/pages/aboutus.tsx
@@ -0,0 +1,25 @@
+const Aboutus = () => {
+  return (
+    <div className="w-full" id="about">
+      <div className="w-full flex flex-col mb-24">
+        <p className="mt-24 font-extrabold text-5xl text-center md:text-start">
+          About Us
+        </p>
+        <div className="w-full sm:w-2/3 lg:w-2/4 lg:ml-48 mt-14 rounded-2xl text-center bg-gradient-to-br from-[#100e1773] via-[#10345676] to-[#100e177e] border border-white/[0.2]">
+          <p className="text-white text-start p-8 sm:p-12 md:p-12 lg:p-12">
+            VIT Chennai, established in 2010, is a leading private institution
+            in Tamil Nadu, India, offering top-tier engineering programs with a
+            focus on research, industry collaboration, and practical learning
+            for successful technical careers. IEEE CS VITC, established in 2019
+            at VIT Chennai, where innovation thrives and technology excels. As a
+            premier branch of IEEE and its Computer Society, we are committed to
+            driving breakthroughs in computer science and connecting visionary
+            tech enthusiasts globally.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Aboutus;
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
@@ -5,37 +5,17 @@ import Timer from "@/components/timer/Timer";
 const Main: React.FC = () => {
   return (
     <>
-      <div className="min-h-screen flex flex-col justify-center scale-[110%] lg:-mt-20">
+
+      <div className="min-h-screen flex flex-col scale-[110%] justify-center">
         <Image
           src="/bitwarsLogo.png"
           alt="logo"
           height={500}
           width={500}
-          className="z-30 justify-center align-center mx-auto relative"
+          className="z-30 justify-center align-center mx-auto relative top-10 md:scale-[80%] md:top-24"
         />
-        {/* Timer Section */}
         <Timer />
       </div>
-
-      <div className="w-full" id="about">
-        <div className="w-full flex flex-col mb-24">
-          <p className="mt-24 font-extrabold text-5xl text-center md:text-start">
-            About Us
-          </p>
-          <div className="w-full sm:w-2/3 lg:w-2/4 lg:ml-48 mt-14 rounded-2xl text-center bg-gradient-to-br from-[#100e1773] via-[#10345676] to-[#100e177e] border border-white/[0.2]">
-            <p className="text-white text-start p-8 sm:p-12 md:p-12 lg:p-12">
-              VIT Chennai, established in 2010, is a leading private institution
-              in Tamil Nadu, India, offering top-tier engineering programs with
-              a focus on research, industry collaboration, and practical
-              learning for successful technical careers. IEEE CS VITC,
-              established in 2019 at VIT Chennai, where innovation thrives and
-              technology excels. As a premier branch of IEEE and its Computer
-              Society, we are committed to driving breakthroughs in computer
-              science and connecting visionary tech enthusiasts globally.
-            </p>
-          </div>
-        </div>
-      </div>
     </>
   );
 };