Landing page for eventide

package.json

@@ -21,8 +21,10 @@
     "@tailwindcss/typography": "^0.5.10",
     "clsx": "^2.1.0",
     "dotenv": "^16.4.5",
+    "framer-motion": "^11.11.8",
     "gsap": "^3.12.5",
     "hamburger-react": "^2.5.0",
+    "i": "^0.3.7",
     "markdown-to-jsx": "^7.4.1",
     "next": "14.0.4",
     "next-transpile-modules": "^10.0.1",
@@ -31,6 +33,7 @@
     "prop-types": "^15.8.1",
     "react": "^18",
     "react-dom": "^18.2.0",
+    "react-easy-marquee": "^1.2.4",
     "react-fast-marquee": "^1.6.2",
     "react-icons": "^5.0.1",
     "react-lite-youtube-embed": "^2.4.0",

src/app/eventide/components/Container.jsx

@@ -0,0 +1,11 @@
+'use client';
+
+const Container = ({ children }) => {
+    return (
+        <div className="max-w-[2480px] xl:px-20 md:px-10 sm:px-2 px-4 mx-auto">
+            {children}
+        </div>
+    );
+};
+
+export default Container;

src/app/eventide/components/Hero/Hero.jsx

@@ -0,0 +1,64 @@
+'use client'
+
+import Image from 'next/image';
+import {motion} from "framer-motion"
+import { BackgroundBeams } from "../background-beams";
+
+const Hero = () => {
+    const container = {
+        hidden: { opacity: 0 },
+        show: {
+          opacity: 1,
+          transition: {
+            staggerChildren: 0.3,
+          },
+        },
+      };
+
+      const item = {
+        hidden: { opacity: 0, y:30,  },
+        show: { opacity: 1, y:0, transition:{type: 'smooth'} },
+    };
+
+    const image = {
+        hidden: { opacity: 0, y:30,  },
+        show: { opacity: 1, y:0, transition:{type: 'smooth'} },
+    }
+
+    const etext="Eventide the 3-day cultural extravaganza of Anokha, has brought joy to thousands over the past decade through explosive performances from talented artists. The enchanting melodies of Raagasudha, our soulful music club, and the graceful performances of Natyasudha, our energetic dance club have left our audience in awe. The highlight of this grand celebration, the pro show has featured passionate and top-tier artists from the music industry.Eventide has become a platform for the celebration of India's rich cultural heritage and diversity encouraging performers from all over the country. Between soulful classical music, scintillating film numbers, and powerful percussion, we have explored every genre you can name. This cultural experience has left an everlasting impression on our audience."
+
+    return (
+        <div className="pt-28">
+                <BackgroundBeams />
+            <motion.div initial='hidden' whileInView='show' viewport={{once:true}} variants={container}
+             className="flex flex-col items-center justify-between">
+                <motion.h1 variants={item} className="text-center text-9xl pb-2 leading-snug max-lg:text-7xl max-md:text-5xl text-white">Feel the Rhythm of</motion.h1>
+                 <motion.p className="text-center text-9xl pb-14 max-lg:text-7xl max-md:text-5xl text-white" variants={item}>Your Heart&apos;s Music</motion.p>
+                <motion.p variants={item} className="text-xl text-center w-10/12 mx-auto tracking-wider text-neutral-400 max-lg:text-base max-md:text-sm">{etext}</motion.p>
+
+            </motion.div>
+            <div className="mt-28 text-white">
+                <div className="p-2 relative scale-50 sm:scale-100">
+                <motion.img
+    initial={{ y: 400, opacity: 0 }}
+    whileInView={{ y: 0, opacity: 1 }}
+    viewport={{ once: true }}
+    transition={{ duration: 0.8, type: "keyframes" }}
+    className="w-full h-full object-cover object-top"
+    src="/images/poster.webp"
+    alt=""
+  />
+                    {/* <motion.div variants={container} whileInView='show' initial='hidden' viewport={{once:true}} transition={{delayChildren:0.1}}>
+                    <motion.span variants={image} className="absolute top-4 left-4 lg:text-7xl text-4xl">txt</motion.span>
+                    <motion.span variants={image} className="absolute bottom-8 left-4 lg:text-xl md:text-base text-sm max-sm:hidden">txt </motion.span>
+                    <motion.span variants={image}className="absolute top-4 right-4 md:text-xl text-sm">txt</motion.span>
+                    <motion.span variants={image} className="absolute right-4 bottom-4 md:text-3xl text-sm">Date</motion.span>
+                    </motion.div> */}
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Hero

src/app/eventide/components/Hero/Section.jsx

@@ -0,0 +1,61 @@
+'use client';
+import { motion } from "framer-motion";
+import Image from 'next/image';
+
+const Section = () => {
+    const container = {
+        hidden: { opacity: 0 },
+        show: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.3,
+                delayChildren: 1.5,
+            },
+        },
+    };
+
+    const item = {
+        hidden: { opacity: 0, y: 30 },
+        show: { opacity: 1, y: 0, transition: { type: 'keyframe', duration: 0.4 } },
+    };
+
+    const image = {
+        hidden: { opacity: 0, scale: 1.1, y: 30 },
+        show: { opacity: 1, scale: 1, y: 0, transition: { type: 'keyframe', duration: 0.4 } },
+    };
+
+    return (
+        <div className="mt-40">
+            <motion.div initial='hidden' whileInView='show' variants={container} viewport={{ once: true }} className="md:grid grid-cols-2 gap-x-7 space-y-10">
+                <motion.div variants={image}>
+                    <Image src="/images/Sarnesh_160.jpg" alt="" layout="responsive" width={500} height={500} />
+                </motion.div>
+                <div className="max-md:hidden text-4xl md:text-7xl text-neutral-600 flex items-center font-extrabold">GRACEFUL EXPRESSION</div>
+                <motion.div variants={item}>
+                    <h1 className="text-4xl mt-7 mb-4 max-sm:text-3xl text-white ">Natya Night </h1>
+                    {/* <p className="text-2xl text-neutral-500 max-sm:text-xl">short</p> */}
+                    <p className="text-neutral-500 mt-3 max-sm:text-sm">Every year, the stage comes alive with Raagasudha’s enthralling music performances! From heartfelt classical renditions to exciting beats of contemporary tunes, each performance is a testament to the club’s versatility. The performers showcase their dedication and collaborative effort, creating an electrifying atmosphere that leaves the audience spellbound. Every note is a masterpiece, showcasing an impeccable blend of melody, pitch, rhythm, and harmony. Come witness this musical spectacle at Anokha 2024.</p>
+
+                </motion.div>
+                <motion.div variants={image} className="md:mt-[40px]">
+                    <Image src="/images/Sarnesh_62.jpg" alt="" layout="responsive" width={500} height={500} />
+                </motion.div>
+                <motion.div variants={image} className="md:mt-[-100px] opacity-80">
+                    <Image src="/images/Sarnesh_867.jpg" alt="" layout="responsive" width={500} height={500} />
+                </motion.div>
+                <div className="max-md:hidden text-4xl md:text-7xl text-neutral-600 flex items-center justify-center font-extrabold">EXPRESSIVE IMPROVISATION</div>
+                <motion.div variants={item}>
+                    <h1 className="text-4xl mt-7 mb-4 max-sm:text-3xl text-white">Raaga Night</h1>
+                    {/* <p className="text-2xl text-neutral-500 max-sm:text-xl">short</p> */}
+                    <p className="text-neutral-500 mt-3 max-sm:text-sm">Natyasudha’s dance performance is an explosion of energy captivating the audience from the very first beat. Each member pours their passion into every movement and infuses their performance with infectious enthusiasm. Their catchy steps not only display the technical expertise of the dancers but also invite the audience to become active participants in the experience. From the graceful elegance of traditional forms to the high-energy beats of hip-hop, every routine leaves an indelible mark on the audience.</p>
+
+                </motion.div>
+                <motion.div variants={image} className="md:mt-[40px]">
+                    <Image src="/images/Sarnesh_1689.jpg" alt="" layout="responsive" width={500} height={500} />
+                </motion.div>
+            </motion.div>
+        </div>
+    );
+};
+
+export default Section;

src/app/eventide/components/ZoomParallax/index.jsx

@@ -0,0 +1,57 @@
+import styles from './styles.module.scss';
+import Picture1 from '../../../../../public/images/stephen2.jpg';
+import Picture2 from '../../../../../public/images/Sarnesh_148.jpg';
+import Picture3 from '../../../../../public/images/Eniyan_25.jpg';
+import Picture4 from '../../../../../public/images/SriHaran_2.jpg';
+import Picture5 from '../../../../../public/images/Sarnesh_780.jpg';
+import Picture6 from '../../../../../public/images/Eniyan_47.jpg';
+import Picture7 from '../../../../../public/images/Sarnesh_1137.jpg';
+import Image from 'next/image';
+import { useScroll, useTransform, motion } from 'framer-motion';
+import { useRef } from 'react';
+
+export default function Index() {
+
+    const container = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: container,
+        offset: ['start start', 'end end']
+    });
+
+    const scale4 = useTransform(scrollYProgress, [0, 1], [1, 4]);
+    const scale5 = useTransform(scrollYProgress, [0, 1], [1, 5]);
+    const scale6 = useTransform(scrollYProgress, [0, 1], [1, 6]);
+    const scale8 = useTransform(scrollYProgress, [0, 1], [1, 8]);
+    const scale9 = useTransform(scrollYProgress, [0, 1], [1, 9]);
+
+    const pictures = [
+        { src: Picture1, scale: scale4 },
+        { src: Picture2, scale: scale5 },
+        { src: Picture3, scale: scale6 },
+        { src: Picture4, scale: scale5 },
+        { src: Picture5, scale: scale6 },
+        { src: Picture6, scale: scale8 },
+        { src: Picture7, scale: scale9 }
+    ];
+
+    return (
+        <div ref={container} className={styles.container}>
+            <div className={styles.sticky}>
+                {
+                    pictures.map(({ src, scale }, index) => (
+                        <motion.div key={index} style={{ scale }} className={styles.el}>
+                            <div className={styles.imageContainer}>
+                                <Image
+                                    src={src}
+                                    fill
+                                    alt="image"
+                                    placeholder='blur'
+                                />
+                            </div>
+                        </motion.div>
+                    ))
+                }
+            </div>
+        </div>
+    );
+}

src/app/eventide/components/ZoomParallax/styles.module.scss

@@ -0,0 +1,75 @@
+.container{
+    height: 300vh;
+    position: relative;
+    .sticky{
+        position: sticky;
+        overflow: hidden;
+        top: 0;
+        height: 100vh;
+
+        .el{
+            width: 100%;
+            height: 100%;
+            top: 0;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .imageContainer{
+                position: relative;
+                width: 25vw;
+                height: 25vh;
+                img{
+                    object-fit: cover;
+                }
+            }
+            &:nth-of-type(2){
+                .imageContainer{
+                    top: -30vh;
+                    left: 5vw;
+                    width: 35vw;
+                    height: 30vh;
+                }
+            }
+            &:nth-of-type(3){
+                .imageContainer{
+                    top: -10vh;
+                    left: -25vw;
+                    width: 20vw;
+                    height: 45vh;
+                }
+            }
+            &:nth-of-type(4){
+                .imageContainer{
+                    left: 27.5vw;
+                    width: 25vw;
+                    height: 25vh;
+                }
+            }
+            &:nth-of-type(5){
+                .imageContainer{
+                    top: 27.5vh;
+                    left: 5vw;
+                    width: 20vw;
+                    height: 25vh;
+                }
+            }
+            &:nth-of-type(6){
+                .imageContainer{
+                    top: 27.5vh;
+                    left: -22.5vw;
+                    width: 30vw;
+                    height: 25vh;
+                }
+            }
+            &:nth-of-type(7){
+                .imageContainer{
+                    top: 22.5vh;
+                    left: 25vw;
+                    width: 15vw;
+                    height: 15vh;
+                }
+            }
+        }
+    }
+}