web3ssh-iiits · sudipme · Jul 28, 2024
diff --git a/src/app/global.css b/src/app/global.css
@@ -0,0 +1,55 @@
+html {
+  scroll-behavior: smooth;
+}
+
+.gradient-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: -1;
+    will-change: transform;
+  }
+
+  .gradients-container {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    right: -50%;
+    bottom: -50%;
+    width: 200%;
+    height: 200%;
+    transform: translateZ(0);
+    filter: url('#goo');
+  }
+
+  .g1, .g2, .g3, .g4, .g5 {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    mix-blend-mode: multiply;
+    animation: blob 15s ease-in-out infinite alternate;
+    transform: translateZ(0);
+  }
+
+  .g1 { background: radial-gradient(circle at center, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 70%); }
+  .g2 { background: radial-gradient(circle at center, rgba(0,255,0,0.5) 0%, rgba(0,255,0,0) 70%); }
+  .g3 { background: radial-gradient(circle at center, rgba(0,0,255,0.5) 0%, rgba(0,0,255,0) 70%); }
+  .g4 { background: radial-gradient(circle at center, rgba(255,255,0,0.5) 0%, rgba(255,255,0,0) 70%); }
+  .g5 { background: radial-gradient(circle at center, rgba(0,255,255,0.5) 0%, rgba(0,255,255,0) 70%); }
+
+  @keyframes blob {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    25% { transform: translate(150px, -100px) scale(0.8); }
+    50% { transform: translate(-100px, 200px) scale(1.2); }
+    75% { transform: translate(200px, 100px) scale(0.9); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .g1, .g2, .g3, .g4, .g5 {
+      animation: none;
+    }
+  }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,7 @@
 import 'index.css';
+import './global.css';
 
 import type { Metadata } from 'next';
-// import Navbar from '@components/Navbar';
-// import { BackgroundGradientAnimation } from '@components/ui/background-gradient-animation';
-// it seems that Aceternity ui background gradient makes the page unresponsive to scroll, and no content other than the front page is visible
 import GradientBackground from '@components/GradientBackground';
 import gsap from 'gsap';
 import { useGSAP } from '@gsap/react';
@@ -67,16 +65,7 @@ export default function RootLayout({
       </head>
 
       <body>
-        <div
-          style={{
-            width: '100vw',
-            height: '100vh',
-            position: 'fixed',
-            zIndex: '-10',
-          }}
-        >
-          <GradientBackground />
-        </div>
+        <GradientBackground />
         <div className="relative z-10">
           <Navbar />
           <div id="root">{children}</div>

diff --git a/src/components/AnalyticsCard.jsx b/src/components/AnalyticsCard.jsx
@@ -2,21 +2,21 @@ export default function AnalyticsCard({ icon, number, unit, title, gradientColor
   return (
     <div className="mx-auto p-2 py-8 flex-1">
       <div className="flex w-80">
-        <div className={`flex w-full max-w-full flex-col break-words rounded-lg bg-gradient-to-${direction} from-${bgColorFrom} to-${bgColorTo} bg-opacity-50 text-white shadow-lg ring-1 ring-gray-500`}>
+        <div className="p-2 pb-4 flex w-full max-w-full flex-col break-words rounded-lg text-white bg-white bg-opacity-5">
           <div className="p-4 relative">
             <div className="absolute -mt-8 ml-[256px] bg-gray-800 bg-opacity-90 h-16 w-16 rounded-full text-center text-white shadow-lg flex items-center justify-center ring-1 ring-gray-300">
               {icon}
             </div>
-            <div className="pt-1 text-left">
-              <h4 className={`text-2xl bg-clip-text text-transparent bg-gradient-to-tr from-${gradientColorFrom} via-${gradientColorVia} to-${gradientColorTo} font-sans font-bold tracking-tighter lg:text-4xl`}>
+            <div className="text-left">
+              <h4 className={`text-5xl lg:text-5xl font-sans font-bold bg-clip-text text-transparent bg-gradient-to-tr from-yellow-600 via-orange-600 to-purple-600 tracking-tighter`}>
                 {number}
               </h4>
-              <p className="text-3xl font-bolder font-sans capitalize">{unit}</p>
             </div>
           </div>
-          <div className="p-4">
+              <p className="pl-20 text-3xl font-bolder font-sans capitalize">{unit}</p>
+          <div className="pl-20 pt-1">
             <p className="font-light">
-              <span className={`text-4xl font-sans bg-clip-text text-transparent bg-gradient-to-r from-${gradientColorFrom} via-${gradientColorVia} to-${gradientColorTo} font-medium`} >{title}</span>
+              <span className={`text-4xl font-sans bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 via-orange-600 to-purple-600 font-medium`} >{title}</span>
             </p>
           </div>
         </div>

diff --git a/src/components/AnalyticsSection.jsx b/src/components/AnalyticsSection.jsx
@@ -12,18 +12,13 @@ const iconMap = {
 export default function AnalyticsSection() {
   return (
     <>
-      <div className="grid justify-items-center m-12 grid-cols-1 lg:grid-cols-2 lg:w-[50%] mx-auto  gap-x-0 ">
+      <div className="w-full mx-auto mt-20 md:mt-40 md:w-fit grid justify-items-center grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 ">
         {analyticsData.map((data, index) => (
           <AnalyticsCard
             key={index}
             number={data.number}
             title={data.title}
             unit={data.unit}
-            gradientColorFrom={data.gradientColorFrom}
-            gradientColorVia={data.gradientColorVia}
-            gradientColorTo={data.gradientColorTo}
-            bgColorFrom={data.bgColorFrom}
-            bgColorTo={data.bgColorTo}
             direction = {data.direction}
             icon={iconMap[data.unit]}
           />

diff --git a/src/components/GradientBackground.jsx b/src/components/GradientBackground.jsx
@@ -1,16 +1,12 @@
-// import InteractiveBubble from './interactiveBubble';
+import React from 'react';
 
 export default function GradientBackground() {
   return (
     <div className="gradient-bg">
-      <svg xmlns="http://www.w3.org/2000/svg">
+      <svg xmlns="http://www.w3.org/2000/svg" className="hidden">
         <defs>
           <filter id="goo">
-            <feGaussianBlur
-              in="SourceGraphic"
-              stdDeviation="10"
-              result="blur"
-            />
+            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
             <feColorMatrix
               in="blur"
               mode="matrix"
@@ -27,10 +23,6 @@ export default function GradientBackground() {
         <div className="g3"></div>
         <div className="g4"></div>
         <div className="g5"></div>
-        {/*
-          WARNING: Uncommenting this will make background interactive but will also make the website very laggy!
-        < InteractiveBubble />
-        */}
       </div>
     </div>
   );

diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
@@ -63,10 +63,10 @@ const HeroSection = () => {
       <div>
         <div className="mt-8">
           {/* todo, work in progress */}
-          <div className="text-2xl font-sans font-medium ">
+          <div className="text-lg sm:text-xl text-center font-sans font-medium ">
             Summer School: 29th July to 3rd August
           </div>
-          <div className="text-2xl font-sans font-medium ">
+          <div className="text-lg sm:text-xl text-center font-sans font-medium ">
             Hackathon: 7th August to 9th August
           </div>
         </div>
@@ -96,19 +96,25 @@ const HeroSection = () => {
               </span>
             </button>
           </a>
-          <div
+
+          {/* <div
             className="apply-button"
             data-hackathon-slug="web3ssh"
             data-button-theme="light"
             style={{ height: "44px", width: "312px" }}
-          ></div>
-          {/*<a href='https://web3ssh.devfolio.co/' target='_blank'>
-            <button className='w-full h-full bg-[#3770FF] flex items-center justify-center p-4 text-md rounded-md'>
-              <img src='https://avatars.githubusercontent.com/u/38809367?v=4' height="30px" width="30px" />
-              Apply for Hackathon (via Devfolio)
+            bg-[#3770FF]
+          ></div> */}
+
+          <a href='https://web3ssh.devfolio.co/' target='_blank'>
+            <button className='w-full h-full bg-[#3770FF] flex items-center justify-center p-3 text-lg rounded-full'>
+              <span>
+              <img src='https://avatars.githubusercontent.com/u/38809367?v=4' height="30px" width="30px"  className='inline'/>
+              Apply with Devfolio
+              </span>
+              <span className='text-lg'>&nbsp; &lt;Hackathon&gt; </span>
             </button>
           </a>
-          */}
+
         </div>
       </div>
     </div>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,4 +1,5 @@
 'use client';
+import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap/gsap-core';
@@ -40,9 +41,10 @@ export default function Navbar() {
   const containerStyle = {
     position: "fixed",
     top: topbarPosition,
-    width: 'calc(100vw - 100px)',
-    left: '50px',
-    marginTop: '20px',
+    // width: 'calc(100vw - 100px)',
+    // width: '50%',
+    // left: '50px',
+    // marginTop: '20px',
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -60,23 +62,23 @@ export default function Navbar() {
   }
 
   return (
-    <div className="w-full h-[60px] top-0 flex z-50 text-2xl">
+    <div className="w-full h-[60px]  flex z-50 text-2xl flex justify-center">
 
-      <div style={containerStyle} className="z-50 text-white  border-none flex justify-between items-center">
-        <div className="min-w-fit h-[60px] w-full sm:w-fit md:w-full pl-5 flex justify-start items-center" >
+      <div style={containerStyle} className="w-[70%] sm:w-fit  z-50 text-white  border-none flex justify-between items-center px-5 py-1 mt-2 space-x-2">
+        <div className="min-w-fit h-[60px] w-full sm:w-fit md:w-full flex justify-start items-center" >
           <img src={web3sshLogo.src} alt="Web3SSH logo" style={{ height: '50px' }} onClick={() => (window.location.href = '/')} />
         </div>
 
         <div className="hidden sm:flex justify-between gap-6 items-center">
           <ul className="flex lg:gap-6 sm:gap-2">
             {navData.map((item, index) => (
               <li key={index}>
-                <a
+                <Link
                   href={item.url}
                   className="text-lg lg:text-2xl px-1 py-1 rounded-md cursor-pointer hover:font-semibold hover:scale-125 hover:-translate-y-1"
                 >
                   {item.title}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>

diff --git a/src/components/Partners.jsx b/src/components/Partners.jsx
@@ -59,7 +59,7 @@ export default function Partners() {
   ];
   return (
     <section className="mt-[50px] mb-[100px] bg-white bg-opacity-0 w-full flex justify-center items-center p-2 font-sans font-medium">
-      <div className="w-full lg:pb-0">
+      <div className="w-full max-w-[1800px] lg:pb-0">
 
         <div className="w-full h-fit grid grid-cols-1 gap-14 sm:grid-cols-2 sm:gap-5 md:grid-cols-2 text-gray-400">
 

diff --git a/src/components/Schedule.jsx b/src/components/Schedule.jsx
@@ -33,13 +33,13 @@ export const Schedule = () => {
           <span className="text-white">Schedule</span>
         </h1>
       </div>
-      <div className="flex gap-4 md:gap-8 mt-8 justify-start md:justify-around max-w-[90vw] overflow-auto">
+      <div className="flex gap-4 md:gap-8 mt-8  max-w-[90vw] font-sans overflow-auto">
         {Object.keys(scheduleData).map((date, index) => (
           <div key={date} onClick={() => setActiveDate(date)}>
-            <div className={`ml-2 text-gray-200 text-base md:text-xl font-bold py-2 px-4 bg-gradient-to-l from-gray-900 to-cyan-900 rounded-tl-xl ${activeDate === date ? 'bg-cyan-700' : ''}`}>
+            <div className={`text-gray-200 text-center text-base md:text-xl font-semibold p-2 bg-[#222] rounded-t-xl`}>
               Day {index + 1}
             </div>
-            <a href={`#schedule-${date.replace(/ /g, '-')}`} className={`py-3 px-4 w-[170px] text-base md:text-lg tracking-wide inline-block font-semibold text-white ${activeDate === date ? 'bg-[#222]' : ' backdrop-blur-sm bg-black bg-opacity-20'} rounded-tl-lg rounded-bl-lg border-white transition-all duration-300`}>
+            <a href={`#schedule-${date.replace(/ /g, '-')}`} className={`py-3 px-4 w-[140px] text-base md:text-lg tracking-wide inline-block font-semibold text-white ${activeDate === date ? 'bg-[#222]' : ' backdrop-blur-sm bg-black bg-opacity-20'} rounded-b-xl border-white transition-all duration-300`}>
               <span className="flex items-center justify-center">{date}</span>
             </a>
           </div>

diff --git a/src/components/SessionTypes.jsx b/src/components/SessionTypes.jsx
@@ -31,7 +31,7 @@ export default function SessionTypes() {
   ];
   return (
     <div
-      id="schedule"
+      id="session-types"
       className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-gradient-to-r bg-opacity-90 mb-[120px]"
     >
       <h1 className="text-4xl md:text-6xl font-sans font-medium mb-10 lg:mb-20 text-center text-white">

diff --git a/src/components/Speakers.jsx b/src/components/Speakers.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import SpeakerCard from './daywiseoverview/SpeakerCardV2';
+import SpeakerCard from './daywiseoverview/SpeakerCard';
 import speakers from '../data/speakers.json';
 
 export default function SpeakersPanel() {
   return (
-    <div className="w-full mb-[120px] px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center">
+    <section id="speakers" className="w-full mb-[120px] px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center">
       <div
-        id="speakers"
         className="text-white text-4xl md:text-6xl mb-10 lg:mb-20 font-sans font-medium text-center"
       >
         <h1>Speakers</h1>
@@ -22,6 +21,6 @@ export default function SpeakersPanel() {
           />
         ))}
       </div>
-    </div>
+    </section>
   );
 }