diff --git a/src/app/global.css b/src/app/global.css new file mode 100644 index 0000000..68e31eb --- /dev/null +++ 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; + } + } \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e8c51ba..94bd1a2 100644 --- 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({ -
- -
+
{children}
diff --git a/src/components/AnalyticsCard.jsx b/src/components/AnalyticsCard.jsx index 799dfef..6c55b10 100644 --- a/src/components/AnalyticsCard.jsx +++ b/src/components/AnalyticsCard.jsx @@ -2,21 +2,21 @@ export default function AnalyticsCard({ icon, number, unit, title, gradientColor return (
-
+
{icon}
-
-

+
+

{number}

-

{unit}

-
+

{unit}

+

- {title} + {title}

diff --git a/src/components/AnalyticsSection.jsx b/src/components/AnalyticsSection.jsx index 40c1505..b841057 100644 --- a/src/components/AnalyticsSection.jsx +++ b/src/components/AnalyticsSection.jsx @@ -12,18 +12,13 @@ const iconMap = { export default function AnalyticsSection() { return ( <> -
+
{analyticsData.map((data, index) => ( diff --git a/src/components/GradientBackground.jsx b/src/components/GradientBackground.jsx index 87ba6b3..6e91ba5 100644 --- 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 (
- + - +
- {/* - WARNING: Uncommenting this will make background interactive but will also make the website very laggy! - < InteractiveBubble /> - */}
); diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx index 2022e58..589b447 100644 --- a/src/components/HeroSection.jsx +++ b/src/components/HeroSection.jsx @@ -63,10 +63,10 @@ const HeroSection = () => {
{/* todo, work in progress */} -
+
Summer School: 29th July to 3rd August
-
+
Hackathon: 7th August to 9th August
@@ -96,19 +96,25 @@ const HeroSection = () => { -
- {/* -
*/} + + + - */} +
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index dddcefc..3b552d2 100644 --- 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,10 +62,10 @@ export default function Navbar() { } return ( -
+
-
-
+
+
Web3SSH logo (window.location.href = '/')} />
@@ -71,12 +73,12 @@ export default function Navbar() { diff --git a/src/components/Partners.jsx b/src/components/Partners.jsx index af42c0e..dcd1d5b 100644 --- a/src/components/Partners.jsx +++ b/src/components/Partners.jsx @@ -59,7 +59,7 @@ export default function Partners() { ]; return (
-
+
diff --git a/src/components/Schedule.jsx b/src/components/Schedule.jsx index 03c1590..c5a6655 100644 --- a/src/components/Schedule.jsx +++ b/src/components/Schedule.jsx @@ -33,13 +33,13 @@ export const Schedule = () => { Schedule
-
+
{Object.keys(scheduleData).map((date, index) => (
setActiveDate(date)}> -
+
Day {index + 1}
- + {date}
diff --git a/src/components/SessionTypes.jsx b/src/components/SessionTypes.jsx index de6fb05..bc9d99f 100644 --- a/src/components/SessionTypes.jsx +++ b/src/components/SessionTypes.jsx @@ -31,7 +31,7 @@ export default function SessionTypes() { ]; return (

diff --git a/src/components/Speakers.jsx b/src/components/Speakers.jsx index c1e3662..4072c59 100644 --- 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 ( -
+

Speakers

@@ -22,6 +21,6 @@ export default function SpeakersPanel() { /> ))}
-
+

); } \ No newline at end of file diff --git a/src/components/daywiseoverview/SpeakerCard.jsx b/src/components/daywiseoverview/SpeakerCard.jsx index e27e96e..4c2022b 100644 --- a/src/components/daywiseoverview/SpeakerCard.jsx +++ b/src/components/daywiseoverview/SpeakerCard.jsx @@ -1,21 +1,68 @@ -export default function SpeakerCard({ imgSrc, title, date, speaker }) { +'use client'; +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { X } from 'lucide-react'; + +const SpeakerCard = ({ title, experience, imgSrc, data }) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleModal = () => setIsOpen(!isOpen); + return ( -
-

- {title} -

-
-

- 📅 {date} -

-

- 👤 {speaker} -

-
- -
+ <> + +
+ {title} +
+
+

{title}

+

{experience}

+
+
+
+ + + + {isOpen && ( + + +
+
+ {title} +
+
+
+
+

{title}

+

{experience}

+
+ +
+

{data}

+
+
+ + + )} + + ); -} +}; + +export default SpeakerCard; \ No newline at end of file diff --git a/src/components/daywiseoverview/SpeakerCardV2.jsx b/src/components/daywiseoverview/SpeakerCardV2.jsx deleted file mode 100644 index 2418a24..0000000 --- a/src/components/daywiseoverview/SpeakerCardV2.jsx +++ /dev/null @@ -1,68 +0,0 @@ -'use client'; -import React, { useState } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import { X } from 'lucide-react'; - -const SpeakerCard = ({ title, experience, imgSrc, data }) => { - const [isOpen, setIsOpen] = useState(false); - - const toggleModal = () => setIsOpen(!isOpen); - - return ( - <> - -
- {title} -
-
-

{title}

-

{experience}

-
-
-
- - - - {isOpen && ( - - -
-
- {title} -
-
-
-
-

{title}

-

{experience}

-
- -
-

{data}

-
-
- - - )} - - - ); -}; - -export default SpeakerCard; \ No newline at end of file diff --git a/src/data/analytics.json b/src/data/analytics.json index 032e01d..af668f3 100644 --- a/src/data/analytics.json +++ b/src/data/analytics.json @@ -3,44 +3,24 @@ "number": "+150", "title": "Participants", "unit": "students", - "gradientColorFrom": "rose-700", - "gradientColorVia": "orange-700", - "gradientColorTo": "yellow-600", - "bgColorFrom": "transparent", - "bgColorTo": "gray-600", "direction": "br" }, { "number": "+4", "title": "Partners", "unit": "organizations", - "gradientColorFrom": "indigo-600", - "gradientColorVia": "violet-700", - "gradientColorTo": "purple-600", - "bgColorFrom": "transparent", - "bgColorTo": "gray-600", "direction": "bl" }, { "number": "+20", "title": "Speakers", "unit": "experts", - "gradientColorFrom": "lime-800", - "gradientColorVia": "green-700", - "gradientColorTo": "emerald-600", - "bgColorFrom": "transparent", - "bgColorTo": "gray-600", "direction": "tr" }, { "number": "+4", "title": "Sponsors", "unit": "companies", - "gradientColorFrom": "yellow-500", - "gradientColorVia": "yellow-600", - "gradientColorTo": "yellow-800", - "bgColorFrom": "transparent", - "bgColorTo": "gray-600", "direction": "tl" } ] \ No newline at end of file