diff --git a/src/app/page.tsx b/src/app/page.tsx index d1a7e1d..de2ddbf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,19 +1,18 @@ "use client"; import React from "react"; -import HorizontalScroll from "@/components/common/HorizontalScrollCarousel"; -import TextReveal from "@/components/ui/text-reveal"; import ParallaxFooter from "@/components/common/Footer"; import StackedCards from "@/components/stacking-cards/stacked"; import { PreviousEdition } from "@/components/common/Container-Scroll"; import About from "@/components/common/About"; +import Team from "@/components/common/Team-Section"; export default function Home() { return ( <> -
+
@@ -22,11 +21,14 @@ export default function Home() {
-
+
-
- +
+

+ The Team +

+
diff --git a/src/components/common/About.tsx b/src/components/common/About.tsx index 75e7a64..c91dd29 100644 --- a/src/components/common/About.tsx +++ b/src/components/common/About.tsx @@ -6,19 +6,19 @@ const AboutSection: React.FC = () => { {/* Background decorative layers */}
{ whileInView={{ y: 0, opacity: 1 }} transition={{ duration: 1, ease: "easeOut" }} > -

+

About TEDxSJEC

-

+

TEDxSJEC is an independently organized event bringing together innovators, thinkers, and visionaries from around the world. Our goal is to inspire change, provoke deep discussions, and foster creativity - through groundbreaking ideas. -

-

- Join us for a day of inspiring talks, immersive experiences, and - powerful conversations. Together, we will explore the future and share - ideas that are truly worth spreading. + through groundbreaking ideas. Our goal is to inspire change, provoke + deep discussions, and foster creativity through groundbreaking ideas.

{/* Decorative line */} diff --git a/src/components/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx index d62ce43..95217e6 100644 --- a/src/components/common/Container-Scroll.tsx +++ b/src/components/common/Container-Scroll.tsx @@ -8,7 +8,7 @@ export function PreviousEdition() { -

+

Check out the Previous Edition

diff --git a/src/components/common/HorizontalScrollCarousel.tsx b/src/components/common/HorizontalScrollCarousel.tsx deleted file mode 100644 index cc6cd25..0000000 --- a/src/components/common/HorizontalScrollCarousel.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { tedxsjecAssetsPrefix } from "@/lib/utils"; -import { motion, useTransform, useScroll } from "framer-motion"; -import { useRef } from "react"; - -const HorizontalScroll = () => { - return ( -
- -
- ); -}; - -const HorizontalScrollCarousel = () => { - const targetRef = useRef(null); - const { scrollYProgress } = useScroll({ - target: targetRef, - }); - - const x = useTransform(scrollYProgress, [0, 1], ["5%", "-50%"]); - - return ( -
-
- -

- The Team -

- {cards.map((card) => { - return ; - })} - -
-
- ); -}; - -const Card = ({ card }: { card: CardType }) => { - return ( -
-
-
-
-

{card.name}

-

{card.title}

-
-
-
- ); -}; - -export default HorizontalScroll; - -type CardType = { - url: string; - title: string; - id: number; - name: string; -}; - -const cards: CardType[] = [ - // { - // url: "https://tedx-sjec.github.io/website-assets/team/dr-binu-k-g.avif", - // title: "Faculty Co-Ordinator", - // name: "Binu K G", - // id: 1, - // }, - { - url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, - title: "Licensee & Organizer", - id: 2, - name: "Sharon Tyana Menezes", - }, - { - url: "/imgs/abstract/3.jpg", - title: "Co-Organizer", - id: 3, - name: "Sasha Sajith", - }, - { - url: "/imgs/abstract/4.jpg", - title: "Curation Head", - id: 4, - name: "Vyasa M Nayak", - }, - { - url: "/imgs/abstract/5.jpg", - title: "Technical Head", - id: 5, - name: "Hanniel Andrede", - }, - { - url: "/imgs/abstract/6.jpg", - title: "Design Head", - id: 6, - name: "Lawrence Robert D'Souza", - }, - // { - // url: "/imgs/abstract/7.jpg", - // title: "Title 7", - // id: 7, - // name: "Binu K G", - // }, -]; diff --git a/src/components/common/Team-Section.tsx b/src/components/common/Team-Section.tsx new file mode 100644 index 0000000..352317f --- /dev/null +++ b/src/components/common/Team-Section.tsx @@ -0,0 +1,44 @@ +import CardHoverEffect from "@/components/edil-ozi/card-hover-effect"; +import { tedxsjecAssetsPrefix } from "@/lib/utils"; + +const team = [ + { + url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, + title: "Licensee & Organizer", + id: 2, + name: "Sharon Tyana Menezes", + }, + { + url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, + title: "Co-Organizer", + id: 3, + name: "Sasha Sajith", + }, + { + url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, + title: "Curation Head", + id: 4, + name: "Vyasa M Nayak", + }, + { + url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, + title: "Technical Head", + id: 5, + name: "Hanniel Andrede", + }, + { + url: `${tedxsjecAssetsPrefix}/team/sharon.avif`, + title: "Design Head", + id: 6, + name: "Lawrence Robert D'Souza", + }, +]; + +const Team = () => { + return ( +
+ +
+ ); +}; +export default Team; diff --git a/src/components/edil-ozi/card-hover-effect.tsx b/src/components/edil-ozi/card-hover-effect.tsx new file mode 100644 index 0000000..290f896 --- /dev/null +++ b/src/components/edil-ozi/card-hover-effect.tsx @@ -0,0 +1,79 @@ +import { FC, useState } from "react"; + +import { cn } from "@/lib/utils"; +import { AnimatePresence, motion } from "framer-motion"; +import Image from "next/image"; + +interface Props { + members: { title: string; name: string; id: number; url: string }[]; + wrapperClasses?: string; + itemClasses?: string; +} + +const Index: FC = ({ members, itemClasses, wrapperClasses }) => { + const [hoveredIdx, setHoveredIdx] = useState(null); + + return ( +
+ {members.map(({ name, title, url }, idx) => ( +
setHoveredIdx(idx)} + onMouseLeave={() => setHoveredIdx(null)} + > + + {hoveredIdx === idx && ( + + {/* logo */} + + )} + +
+ {name} +

{name}

+

{title}

+
+
+ ))} +
+ ); +}; +export default Index; diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx deleted file mode 100644 index 15b723f..0000000 --- a/src/components/ui/text-reveal.tsx +++ /dev/null @@ -1,92 +0,0 @@ -"use client"; - -import { FC, ReactNode, useRef } from "react"; -import { motion, useScroll, useTransform, useInView } from "framer-motion"; - -import { cn } from "@/lib/utils"; - -interface TextRevealByWordProps { - text: string; - className?: string; -} - -export const TextRevealByWord: FC = ({ - text, - className, -}) => { - const targetRef = useRef(null); - - const { scrollYProgress } = useScroll({ - target: targetRef, - }); - const words = text.split(" "); - - // const ref = useRef(null); // Create a reference for the element - // const isInView = useInView(ref, { once: true }); // Trigger animation once when in view - - // Adjust the transform to make it exit only as it reaches the top of the viewport - const y = useTransform(scrollYProgress, [0, 0.25], [0, -350]); // Exit moves the heading further up (150px) - const opacity = useTransform(scrollYProgress, [0.1, 0.25], [2, 0]); // Fade out starts later and ends as it scrolls up - - return ( -
-
- - About - - -

- {words.map((word, i) => { - const start = i / words.length; - const end = start + 1 / words.length; - return ( - - {word} - - ); - })} -

-
-
- ); -}; - -interface WordProps { - children: ReactNode; - progress: any; - range: [number, number]; -} - -const Word: FC = ({ children, progress, range }) => { - const opacity = useTransform(progress, range, [0, 1]); - return ( - - {children} - - {children} - - - ); -}; - -export default TextRevealByWord;