pull from main

public/favicon_icon/site.webmanifest

@@ -3,12 +3,12 @@
   "short_name": "Bitwars",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.webp",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/android-chrome-512x512.webp",
       "sizes": "512x512",
       "type": "image/png"
     }

src/app/globals.css

@@ -90,3 +90,7 @@ body {
   padding: 3px;
   box-sizing: border-box;
 }
+
+.button-gradient {
+  background: radial-gradient(rgb(56 189 248) 40%, transparent 60%);
+}

src/app/page.tsx

@@ -3,8 +3,8 @@ import { Montserrat } from "next/font/google";
 import Main from "@/pages/main";
 import Showcase from "@/pages/showcase";
 import Aboutus from "@/pages/aboutus";
-import { sponsorsList } from "@/lib/sponsorsList";
-import Sponsor from "@/components/ui/sponsor";
+import Image from "next/image";
+import { Button } from "@/components/ui/moving-border";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
@@ -26,33 +26,50 @@ export default function Home() {
               <p className="text-center font-extrabold text-5xl">
                 Our Sponsors
               </p>
-              <div className="grid grid-cols-2 gap-4 mt-16 text-center border-[#104456] border-2 py-12">
+              {/* <div className="grid grid-cols-2 gap-4 mt-16 text-center border-[#104456] border-2 py-12">
                 {sponsorsList.map((sponsor, index) => (
                   <Sponsor
                     key={sponsor.name}
                     name={sponsor.name}
                     image={sponsor.image}
                   />
                 ))}
+              </div> */}
+              <div className="flex justify-center items-center my-24">
+                <div className="flex items-center text-center sm:flex-col">
+                  <div className="text-xl pr-12 sm:pb-8 w-full sm:pr-0">
+                    Powered by
+                  </div>
+                  <Image
+                    alt="unstop logo"
+                    height={150}
+                    width={150}
+                    src="/unstop-logo.svg"
+                    className="w-auto h-24"
+                  />
+                </div>
               </div>
             </div>
             <a
               href="/BitwarsBrochure.pdf"
               target="_blank"
               rel="noopener noreferrer"
-              className="mt-12"
             >
-              <div className="sm:scale-[70%] border border-white/[0.2] flex flex-col items-center justify-end py-8 rounded-full px-12 cursor-pointer hover:scale-[110%] sm:hover:scale-[90%] transition duration-300 bg-gradient-to-b from-[#130f1f] to-[#001c4fe5]">
+              <Button
+                borderRadius="9999px"
+                className="border border-white/[0.2] flex flex-col items-center justify-end py-8 px-12 cursor-default transition duration-300"
+              >
                 <section className="text-3xl font-light pt-4 text-center">
                   INTERESTED IN SPONSORING US?
                 </section>
-                <section className="text-3xl pt-4 font-bold sm:text-xl">
+                <section className="text-2xl mt-4 font-bold sm:text-xl rounded-full px-6 p-2 bg-slate-950 hover:bg-blue-950/[0.2] shadow-md hover:shadow-cyan-900 cursor-pointer border border-cyan-200/[0.1]">
                   CLICK HERE
                 </section>
-              </div>
+              </Button>
             </a>
           </section>
         </section>
+
         {/* FAQ Section */}
         <div className="w-full py-24 min-h-screen" id="faq">
           <p className="text-center font-extrabold text-5xl py-24">

src/components/footer/Footer.tsx

@@ -28,7 +28,7 @@ const Footer = () => {
         <div className="flex flex-col md:flex-row lg:flex-row justify-center">
           {/* IEEE logo */}
           <div className="flex items-center justify-center basis-1/5">
-            <Image src="/compsoc.png" alt="logo2" width={280} height={80} />
+            <Image src="/compsoc.webp" alt="logo2" width={280} height={80} />
           </div>
 
           {/* Menu */}

src/components/navbar/FloatingNav.tsx

@@ -66,9 +66,15 @@ export const FloatingNav = ({
               "relative items-center flex text-slate-200 hover:text-white"
             )}
           >
-            <span className="block text-lg px-8 border bg-slate-900 py-2 border-white/[0.1] hover:border-cyan-700 rounded-full font-medium">
+            <span className="block sm:text-sm text-md lg:text-lg px-8 border bg-slate-900 py-2 border-white/[0.1] hover:border-cyan-700 rounded-full font-medium sm:hidden">
               {navItem.name}
             </span>
+            <div
+              key={`${navItem.name}`}
+              className="hidden sm:inline-block text-sm"
+            >
+              {navItem.name}
+            </div>
           </Link>
         ))}
       </motion.div>

src/components/ui/moving-border.tsx

@@ -0,0 +1,139 @@
+"use client";
+import React from "react";
+import {
+  motion,
+  useAnimationFrame,
+  useMotionTemplate,
+  useMotionValue,
+  useTransform,
+} from "framer-motion";
+import { useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export function Button({
+  borderRadius = "1.75rem",
+  children,
+  as: Component = "button",
+  containerClassName,
+  borderClassName,
+  duration,
+  className,
+  ...otherProps
+}: {
+  borderRadius?: string;
+  children: React.ReactNode;
+  as?: any;
+  containerClassName?: string;
+  borderClassName?: string;
+  duration?: number;
+  className?: string;
+  [key: string]: any;
+}) {
+  return (
+    <Component
+      className={cn(
+        "bg-transparent relative text-xl p-0.5 rounded-full overflow-hidden ",
+        containerClassName
+      )}
+      style={{
+        borderRadius: borderRadius,
+      }}
+      {...otherProps}
+    >
+      <div
+        className="absolute inset-0"
+        style={{ borderRadius: `calc(${borderRadius} * 0.96)` }}
+      >
+        <MovingBorder duration={duration} rx="30%" ry="30%">
+          <div
+            className={cn(
+              "h-20 w-20 opacity-[0.8] button-gradient",
+              borderClassName
+            )}
+          />
+        </MovingBorder>
+      </div>
+
+      <div
+        className={cn(
+          "relative bg-slate-900/[0.3] border border-slate-800 backdrop-blur-3xl text-white flex items-center justify-center w-full h-full text-sm antialiased",
+          className
+        )}
+        style={{
+          borderRadius: `calc(${borderRadius} * 0.96)`,
+        }}
+      >
+        {children}
+      </div>
+    </Component>
+  );
+}
+
+export const MovingBorder = ({
+  children,
+  duration = 2000,
+  rx,
+  ry,
+  ...otherProps
+}: {
+  children: React.ReactNode;
+  duration?: number;
+  rx?: string;
+  ry?: string;
+  [key: string]: any;
+}) => {
+  const pathRef = useRef<any>();
+  const progress = useMotionValue<number>(0);
+
+  useAnimationFrame((time) => {
+    const length = pathRef.current?.getTotalLength();
+    if (length) {
+      const pxPerMillisecond = length / duration;
+      progress.set((time * pxPerMillisecond) % length);
+    }
+  });
+
+  const x = useTransform(
+    progress,
+    (val) => pathRef.current?.getPointAtLength(val).x
+  );
+  const y = useTransform(
+    progress,
+    (val) => pathRef.current?.getPointAtLength(val).y
+  );
+
+  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
+
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        className="absolute h-full w-full"
+        width="100%"
+        height="100%"
+        {...otherProps}
+      >
+        <rect
+          fill="none"
+          width="100%"
+          height="100%"
+          rx={rx}
+          ry={ry}
+          ref={pathRef}
+        />
+      </svg>
+      <motion.div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "inline-block",
+          transform,
+        }}
+      >
+        {children}
+      </motion.div>
+    </>
+  );
+};

src/pages/main.tsx

@@ -2,11 +2,12 @@ import React from "react";
 import Image from "next/image";
 import Timer from "@/components/timer/Timer";
 import Link from "next/link";
+import { Button } from "@/components/ui/moving-border";
 
 const Main: React.FC = () => {
   return (
-    <section className="min-h-screen grid grid-cols-1">
-      <section className="w-full grid grid-cols-3 place-items-center">
+    <section className="min-h-screen place-items-center grid grid-cols-1">
+      <section className="w-full grid grid-cols-3 h-full place-items-center">
         <Image
           src="/vit.svg"
           alt=""
@@ -15,7 +16,7 @@ const Main: React.FC = () => {
           className="object-contain h-[7vh] w-full sm:w-28"
         />
         <Image
-          src="/compsoc.png"
+          src="/compsoc.webp"
           width={150}
           height={100}
           alt=""
@@ -29,14 +30,11 @@ const Main: React.FC = () => {
           className="object-contain h-[5vh] w-full sm:w-28"
         />
       </section>
-      <div className="col-span-3  w-full">
+      <div className="col-span-3 h-full w-full">
         <div className="flex items-center ">
-          <div
-            className=" mx-auto  w-4/5 flex flex-col"
-            id="home"
-          >
+          <div className=" mx-auto  w-4/5 flex flex-col" id="home">
             <Image
-              src="/bitwarsLogo.png"
+              src="/bitwarsLogo.webp"
               alt="logo"
               height={500}
               width={500}
@@ -46,17 +44,20 @@ const Main: React.FC = () => {
           </div>
         </div>
       </div>
-      <section className="sm:mb-[7vh] w-full grid grid-rows-1 place-items-center text-blue-100 text-3xl">
-        <section className="flex sm:flex-col gap-10 sm:gap-2 px-16 sm:px-6 sm:text-xl text-center font-medium items-center p-6 sm:p-4 rounded-xl border-slate-700/[0.6] bg-gradient-to-b to-[#100e17] from-[#071531]">
+      <section className="mt-12 sm:mb-[7vh] w-full grid grid-rows-1 place-items-center text-blue-100 text-3xl h-full">
+        <section className="flex self-start sm:flex-col gap-10 sm:gap-2 px-16 sm:px-6 sm:text-xl text-center font-medium items-center p-6 sm:p-4 rounded-xl border-slate-700/[0.6] bg-gradient-to-b to-[#100e17] from-[#071531]">
           <section className="sm:justify-center sm:flex sm:w-full items-center sm:text-[4vw]">
             <section className="py-2">6th September, 2024 </section>
             <section className="hidden sm:block"> &nbsp; - &nbsp; </section>
             <section>VIT Chennai</section>
           </section>
           <Link href="https://unstop.com/p/bitwars-20-vit-chennai-1100706">
-            <section className="rounded-full bg-blue-100 font-normal sm:text-lg px-8 py-2 text-2xl text-blue-950 hover:scale-[95%] scale-[90%] transition duration-300">
+            <Button
+              borderRadius="9999px"
+              className="bg-slate-900/[0.1] text-white border-neutral-200/[0.2] py-4 px-8 font-medium sm:text-lg text-2xl hover:scale-[103%] transition duration-300"
+            >
               Register Here →
-            </section>
+            </Button>
           </Link>
         </section>
       </section>

src/pages/showcase.tsx

@@ -25,7 +25,7 @@ const Showcase = () => {
                 src="/bitwars.jpg"
                 className="w-full px-8 sm:px-0 rounded-3xl object-contain hidden sm:block pt-8 relative z-10"
               />
-              <p className="text-white text-justify md:text-sm my-8 ">
+              <p className="text-white text-justify md:text-sm my-8">
                 BITWARS 2.0, VIT Chennai&apos;s second edition of the biggest
                 offline Competitive Programming Event, is set to revolutionize
                 Competitive Programming Culture. Hosted by IEEE CS, it features
@@ -35,7 +35,9 @@ const Showcase = () => {
                 problems. Join us for a transformative experience.
               </p>
               <section className="text-white text-start border border-slate-500 rounded-2xl p-4 md:text-sm">
-                <section className="font-semibold md:text-lg">Overview</section>
+                <section className="font-semibold md:text-lg pb-1">
+                  Overview
+                </section>
                 <section className="italic">
                   - Competitive coding event where participants competed for the
                   top title Challenged participants&apos; coding skills and