diff --git a/package-lock.json b/package-lock.json index 9339022..3f73ed4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3673,7 +3673,8 @@ "version": "1.0.42", "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz", "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==", - "deprecated": "'@studio-freight/lenis' has been renamed to just 'lenis', run 'npx @darkroom.engineering/codemods' to update your dependecies accordingly." + "deprecated": "'@studio-freight/lenis' has been renamed to just 'lenis', run 'npx @darkroom.engineering/codemods' to update your dependecies accordingly.", + "license": "MIT" }, "node_modules/@swc/counter": { "version": "0.1.3", diff --git a/src/app/page.tsx b/src/app/page.tsx index 3a7f88f..a7e66a4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,48 +2,44 @@ import React from "react"; import ParallaxFooter from "@/components/common/Footer"; -import StackedCards from "@/components/stacking-cards/stacked"; +import Speakers from "@/components/common/speakers"; import { PreviousEdition } from "@/components/common/Container-Scroll"; import About from "@/components/common/About"; import Team from "@/components/common/Team-Section"; import { CtaSection } from "@/components/common/cta-section"; import Performers from "@/components/widget/performers"; import HeroHighlight from "@/components/widget/hero"; -import Landing_page from "@/components/widget/landing"; export default function Home() { - return ( - <> - {/* */} -
- - {/*
*/} -
- -
+ return ( + <> +
+ +
+ +
+
+ +
-
- {/* */} -

- The Performers -

- -
-
- -
-
-

- The Team -

- - -
-
- - - ); +
+

+ The Performers +

+ +
+
+ +
+
+

+ The Team +

+ + +
+
+ + + ); } diff --git a/src/components/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx index 413ff1b..2a3d4dd 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/TeamCard.tsx b/src/components/common/TeamCard.tsx index cc14085..95971e2 100644 --- a/src/components/common/TeamCard.tsx +++ b/src/components/common/TeamCard.tsx @@ -28,6 +28,8 @@ const TeamCard: React.FC = ({ members }) => { alt={name} fill className="object-cover rounded-2xl transition-transform duration-500 group-hover:scale-105" + priority + loading="eager" /> diff --git a/src/components/common/cta-section.tsx b/src/components/common/cta-section.tsx index 6640360..fe58cec 100644 --- a/src/components/common/cta-section.tsx +++ b/src/components/common/cta-section.tsx @@ -3,27 +3,29 @@ import { Button } from "@/components/ui/button"; export function CtaSection() { - return ( -
-
-
-

- Live What's Worth Living -

-

- Celebrate the joy of accomplishment with an app designed to track your progress and - motivate your efforts. -

- -
-
- ); + return ( +
+
+
+

+ Live What's Worth Living +

+

+ Celebrate the joy of accomplishment with an app designed to track your + progress and motivate your efforts. +

+ +
+
+ ); } diff --git a/src/components/common/speakers.tsx b/src/components/common/speakers.tsx new file mode 100644 index 0000000..1802565 --- /dev/null +++ b/src/components/common/speakers.tsx @@ -0,0 +1,168 @@ +"use client"; +import { useEffect, useRef } from "react"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import Lenis from "lenis"; +import { tedxsjecAssetsPrefix } from "@/lib/utils"; + +const performers = [ + { + id: 1, + name: "Karen Kshiti Suvarna", + profession: "Film Director", + description: + "Karen Kshiti Suvarna’s debut short film, Hide & Seek, has made waves in the film industry, winning the Best Debut Director (Female) at the Dadasaheb Phalke Achievers Awards 2024. The film has also been showcased at the prestigious Cannes Film Festival. It has also earned accolades across 12 other international festivals and received 15 nominations. With a unique narrative style and a commitment to exploring complex themes. She has also worked in several films and advertisements for prestigious brands and Production Houses.", + img: `${tedxsjecAssetsPrefix}/speakers/Kshiti1.avif`, + }, + { + id: 2, + name: "Suma R Nayak", + profession: "Advocate and Animal Welfare Activist", + description: + "Meet Mrs Suma R Nayak, an advocate by profession and animal & environment welfare activist by choice, who believes every creation of God has a right to live a life devoid of pain, suffering and live in dignity. She is the recipient of several awards for her services in the field of environment protection and animal welfare. She is the Trustee of Animal Care Trust, an NGO which runs a charitable hospital cum rescue center for sick and injured community animals and birds at Shakthinagar, Mangalore that rescues and helps over 150 animals every single month.", + img: `${tedxsjecAssetsPrefix}/speakers/Kshiti2.avif`, + }, + { + id: 3, + name: "Badekkila Pradeep", + profession: "Voice Artist and Actor", + description: + "Badekkila Pradeep is a versatile actor, model, writer, and distinguished voice artist from Karnataka. Beginning as a reporter in 2006, Pradeep found his passion in voice-over, transforming Kannada TV narration with his unique style. He's voiced popular shows like Bigg Boss Kannada, Bangalore metro announcements, and numerous campaigns across languages, including Kannada, Tulu, Telugu, Tamil, Hindi, and English. An established voice for major Kannada TV channels, Pradeep is also an actor in Kannada and Tamil films and a writer with over 20 years in Kannada publications.", + img: `${tedxsjecAssetsPrefix}/speakers/Kshiti3.avif`, + }, + { + id: 4, + name: "Namitha Marimuthu", + profession: "Transgender Rights Activist and Actress", + description: + "Namitha Marimuthu is a passionate transgender rights activist and actress who rose to fame with her performances in Tamil cinema. She advocates for the inclusion and recognition of transgender people in the entertainment industry and society. Namitha has also represented the transgender community in various international forums and is committed to creating awareness and understanding through her work.", + img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M1.avif`, + }, + { + id: 5, + name: "Ashwin Shetty", + profession: "Entrepreneur and Innovator", + description: + "Ashwin Shetty is an inspiring entrepreneur and innovator known for his pioneering contributions to sustainable technology. With a background in environmental science, Ashwin has launched several successful green startups that focus on renewable energy and sustainable living solutions. He is a sought-after speaker at eco-friendly and tech events worldwide.", + img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M2.avif`, + }, + { + id: 6, + name: "Shriya Shetty", + profession: "Culinary Expert and Chef", + description: + "Shriya Shetty is a renowned culinary expert and chef who has brought traditional Karnataka cuisine to a global audience. She is celebrated for her innovative fusion of local flavors with international techniques, creating a unique culinary experience. Shriya has been featured in multiple food festivals and has authored cookbooks that highlight the diversity of Indian cuisine.", + img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M3.avif`, + }, + { + id: 7, + name: "Munita Veigas Rao", + profession: "Philanthropist and Social Worker", + description: + "Munita Veigas Rao is a dedicated philanthropist and social worker known for her unwavering support for education and healthcare in underprivileged communities. She runs several non-profit initiatives that focus on women’s empowerment, child welfare, and access to basic health services. Munita is committed to making a tangible difference in society through her charitable activities.", + img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M4.avif`, + }, + { + id: 8, + name: "Yukthi", + profession: "Classical Dancer and Cultural Ambassador", + description: + "Yukthi is a classical dancer and cultural ambassador specializing in Bharatanatyam and Odissi. With years of rigorous training and international performances, she promotes Indian classical dance and culture on a global stage. Yukthi is involved in mentoring young dancers and actively participates in cultural exchange programs to foster understanding and appreciation of Indian traditions.", + img: `${tedxsjecAssetsPrefix}/speakers/Kshiti1.avif`, + }, + { + id: 9, + name: "Agasthyam Kalaripayattu", + profession: "Martial Arts Instructor", + description: + "Agasthyam Kalaripayattu is a respected martial arts instructor specializing in Kalaripayattu, an ancient Indian martial art. He has dedicated his life to preserving and promoting this traditional art form, teaching students around the world about the physical and mental discipline required. Agasthyam has also organized international workshops and demonstrations to showcase Kalaripayattu.", + img: `${tedxsjecAssetsPrefix}/speakers/Kshiti2.avif`, + }, +]; + +export default function Speakers() { + const cardsRef = useRef([]); + useEffect(() => { + gsap.registerPlugin(ScrollTrigger); + + const lenis = new Lenis(); + lenis.on("scroll", ScrollTrigger.update); + + gsap.ticker.add((time) => { + lenis.raf(time * 1000); + }); + + gsap.ticker.lagSmoothing(0); + + const cardsWrapper = gsap.utils.toArray(".cards__item"); + const cardsEl = gsap.utils.toArray(".cards_el"); + + cardsWrapper.forEach((e, i) => { + const card = cardsEl[i] as HTMLDivElement; + gsap.to(card, { + scale: 1, + rotationX: 0, + top: 0, + left: 0, + transformOrigin: "top center", + ease: "none", + scrollTrigger: { + trigger: e, + start: "top " + 120, + end: "bottom +=650px", + endTrigger: ".end-animation", + pin: e, + pinSpacing: false, + scrub: true, + }, + }); + }); + + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, []); + + return ( +
+

+ The Speakers +

+
+ {performers.map((card, index) => ( +
{ + if (el) cardsRef.current[index] = el; + }} + > +
+
+ {`Card +
+
+

+ {card.name} +

+

+ {card.profession} +

+

+ {card.description} +

+
+
+
+ ))} +
+
+
+
+ ); +} diff --git a/src/components/stacking-cards/performers.json b/src/components/stacking-cards/performers.json deleted file mode 100644 index b262fda..0000000 --- a/src/components/stacking-cards/performers.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "id": 1, - "title": "Performer 1", - "description": " ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", - "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" - }, - { - "id": 2, - "title": "Performer 2", - "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", - "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" - }, - { - "id": 3, - "title": "Performer 3", - "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", - "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" - }, - { - "id": 4, - "title": "Performer 4", - "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", - "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" - } -] diff --git a/src/components/stacking-cards/stacked.css b/src/components/stacking-cards/stacked.css deleted file mode 100644 index 98fc47b..0000000 --- a/src/components/stacking-cards/stacked.css +++ /dev/null @@ -1,99 +0,0 @@ -.sticky-section { - box-sizing: border-box; - position: relative; - margin-top: 200px; -} - -.cards__item { - position: sticky; - top: 0; -} - -.cards_el { - will-change: transform; - background: white; - border-radius: 14px; - display: flex; - overflow: hidden; - box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%); - transform-origin: center top; -} - -.cards { - padding: 10px; - box-sizing: border-box; - width: 100%; - max-width: 900px; - margin: 0 auto; - display: grid; - grid-template-rows: repeat(4, var(--card-height)); - gap: 40px 0; -} - -.card__image-container { - display: flex; - width: 40%; - flex-shrink: 0; -} - -.card__image { - width: 100%; - height: 100%; - object-fit: cover; - aspect-ratio: 1; -} - -.card__content { - padding: 40px 30px; - display: flex; - flex-direction: column; -} - -.card__title { - padding: 0; - margin: 0; - font-size: 60px; - font-weight: 600; - color: #16263a; -} - -.card__description { - line-height: 1.4; - font-size: 24px; - color: #16263a; -} - -.space { - height: 90vh; - font-size: 24px; -} - -.space--small { - height: 40vh; -} - -@media (max-width: 600px) { - .cards_el { - flex-direction: column; - } - - .card__image-container { - width: 100%; - } - - .card__image { - aspect-ratio: 16 / 9; - } - - .card__title { - font-size: 32px; - } - - .card__description { - font-size: 16px; - } - - .card__content { - padding: 30px 20px; - } -} diff --git a/src/components/stacking-cards/stacked.tsx b/src/components/stacking-cards/stacked.tsx deleted file mode 100644 index e55839f..0000000 --- a/src/components/stacking-cards/stacked.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client"; -import { useEffect, useRef } from "react"; -import "@/components/stacking-cards/stacked.css"; -import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import Lenis from "lenis"; -import performersData from "@/components/stacking-cards/performers.json"; - -export default function StackedCards() { - const cardsRef = useRef([]); - useEffect(() => { - gsap.registerPlugin(ScrollTrigger); - - const lenis = new Lenis(); - lenis.on("scroll", ScrollTrigger.update); - - gsap.ticker.add((time) => { - lenis.raf(time * 1000); - }); - - gsap.ticker.lagSmoothing(0); - - const cardsWrapper = gsap.utils.toArray(".cards__item"); - const cardsEl = gsap.utils.toArray(".cards_el"); - - cardsWrapper.forEach((e, i) => { - const card = cardsEl[i] as HTMLDivElement; - let scale = 1, - rotate = 0; - - if (i !== cardsEl.length - 1) { - scale = 0.9 + 0.025 * i; - rotate = -5; - } - // console.log(`Card Index: ${i}, Scale: ${scale}, Rotate: ${rotate}`); - - gsap.to(card, { - scale: scale, - rotationX: rotate, - transformOrigin: "top center", - ease: "none", - scrollTrigger: { - trigger: e, - start: "top " + (120 + 30 * i), - end: "bottom +=650px", - endTrigger: ".end-animation", - pin: e, - pinSpacing: false, - scrub: true, - }, - }); - }); - - return () => { - ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); - }; - }, []); - return ( -
-
- {performersData.map((card, index) => ( -
{ - if (el) cardsRef.current[index] = el; - }} - > -
-
- {`Card -
-
-

{card.title}

-

{card.description}

-
-
-
- ))} -
-
-
-
- ); -} diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index 52519f1..f752ed3 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -1,19 +1,19 @@ /* eslint-disable @next/next/no-img-element */ -'use client' +"use client"; -import { useEffect, useRef, useState } from "react" -import { gsap } from "gsap" -import { ScrollTrigger } from "gsap/ScrollTrigger" -import Lenis from "@studio-freight/lenis" -import { useGSAP } from "@gsap/react" +import { useEffect, useRef, useState } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import Lenis from "@studio-freight/lenis"; +import { useGSAP } from "@gsap/react"; -gsap.registerPlugin(ScrollTrigger) +gsap.registerPlugin(ScrollTrigger); interface PerformerSection { - images: string[] - title: string - subtitle: string - description: string + images: string[]; + title: string; + subtitle: string; + description: string; } const performerSections: PerformerSection[] = [ @@ -25,7 +25,8 @@ const performerSections: PerformerSection[] = [ ], title: "The Spotlight Crew", subtitle: "Shining brightest when it matters most.", - description: "The Spotlight Crew is a dynamic ensemble of performers who thrive under pressure. With their electrifying energy and captivating stage presence, they turn every performance into an unforgettable experience. From dazzling choreography to powerful vocals, they leave audiences spellbound and craving more." + description: + "The Spotlight Crew is a dynamic ensemble of performers who thrive under pressure. With their electrifying energy and captivating stage presence, they turn every performance into an unforgettable experience. From dazzling choreography to powerful vocals, they leave audiences spellbound and craving more.", }, { images: [ @@ -35,7 +36,8 @@ const performerSections: PerformerSection[] = [ ], title: "The Rhythm Masters", subtitle: "Keeping the beat, moving your feet.", - description: "The Rhythm Masters are the pulse of any performance. With their impeccable timing and infectious grooves, they create the foundation that drives the entire show. From thunderous drums to funky basslines, their rhythmic prowess keeps audiences moving and grooving all night long." + description: + "The Rhythm Masters are the pulse of any performance. With their impeccable timing and infectious grooves, they create the foundation that drives the entire show. From thunderous drums to funky basslines, their rhythmic prowess keeps audiences moving and grooving all night long.", }, { images: [ @@ -45,102 +47,113 @@ const performerSections: PerformerSection[] = [ ], title: "The Harmony Collective", subtitle: "Blending voices, touching souls.", - description: "The Harmony Collective is a group of vocal virtuosos who create magic with their voices. Their seamless harmonies and emotive performances transport listeners to another world. From soaring ballads to intricate a cappella arrangements, they showcase the true power and beauty of the human voice." + description: + "The Harmony Collective is a group of vocal virtuosos who create magic with their voices. Their seamless harmonies and emotive performances transport listeners to another world. From soaring ballads to intricate a cappella arrangements, they showcase the true power and beauty of the human voice.", }, -] +]; export default function Performers() { - const containerRef = useRef(null) + const containerRef = useRef(null); const [currentImageIndices, setCurrentImageIndices] = useState( performerSections.map(() => 0) - ) - const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]) + ); + const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]); useGSAP(() => { - const lenis = new Lenis({ lerp: 0.07 }) + const lenis = new Lenis({ lerp: 0.07 }); - lenis.on("scroll", ScrollTrigger.update) + lenis.on("scroll", ScrollTrigger.update); gsap.ticker.add((time) => { - lenis.raf(time * 1000) - }) - - gsap.utils.toArray(".img-container").forEach((container) => { - const img = container.querySelector("img") - - if (img) { - gsap.fromTo( - img, - { yPercent: -10 }, - { - yPercent: 10, - ease: "none", - scrollTrigger: { - trigger: container, - scrub: true, - start: "top bottom", - end: "bottom top", - }, - } - ) - } - }) + lenis.raf(time * 1000); + }); + + gsap.utils + .toArray(".img-container") + .forEach((container) => { + const img = container.querySelector("img"); + + if (img) { + gsap.fromTo( + img, + { yPercent: -10 }, + { + yPercent: 10, + ease: "none", + scrollTrigger: { + trigger: container, + scrub: true, + start: "top bottom", + end: "bottom top", + }, + } + ); + } + }); // Set up hover animations for description - gsap.utils.toArray(".performer-section").forEach((section) => { - const description = section.querySelector(".description") - const tl = gsap.timeline({ paused: true }) - - tl.fromTo(description, - { yPercent: 100, opacity: 0 }, - { yPercent: 0, opacity: 1, duration: 0.3, ease: "power2.out" } - ) - - section.addEventListener("mouseenter", () => tl.play()) - section.addEventListener("mouseleave", () => tl.reverse()) - }) + gsap.utils + .toArray(".performer-section") + .forEach((section) => { + const description = section.querySelector(".description"); + const tl = gsap.timeline({ paused: true }); + + tl.fromTo( + description, + { yPercent: 100, opacity: 0 }, + { yPercent: 0, opacity: 1, duration: 0.3, ease: "power2.out" } + ); + + section.addEventListener("mouseenter", () => tl.play()); + section.addEventListener("mouseleave", () => tl.reverse()); + }); return () => { - lenis.destroy() - ScrollTrigger.getAll().forEach((st) => st.kill()) - } - }, []) + lenis.destroy(); + ScrollTrigger.getAll().forEach((st) => st.kill()); + }; + }, []); useEffect(() => { performerSections.forEach((_, index) => { intervalRefs.current[index] = setInterval(() => { setCurrentImageIndices((prevIndices) => { - const newIndices = [...prevIndices] - newIndices[index] = (newIndices[index] + 1) % performerSections[index].images.length - return newIndices - }) - }, 2500 + index * 1000) // Stagger the intervals to make the changes less synchronized - }) + const newIndices = [...prevIndices]; + newIndices[index] = + (newIndices[index] + 1) % performerSections[index].images.length; + return newIndices; + }); + }, 2500 + index * 1000); // Stagger the intervals to make the changes less synchronized + }); return () => { // eslint-disable-next-line react-hooks/exhaustive-deps intervalRefs.current.forEach((interval) => { - if (interval) clearInterval(interval) - }) - } - }, []) + if (interval) clearInterval(interval); + }); + }; + }, []); return (
{performerSections.map((section, sectionIndex) => (
-
+
{section.images.map((image, imageIndex) => ( {`Performer @@ -152,7 +165,9 @@ export default function Performers() { > {section.title} -

{section.subtitle}

+

+ {section.subtitle} +

@@ -163,5 +178,5 @@ export default function Performers() {

))}
- ) -} \ No newline at end of file + ); +}