Fanta Landing - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8" /> <meta name="viewport" content="width=device width, initial scale=1.0" /> <title>Gravity Coding | Project</title> <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <nav class="d flex"> <h1>LOGO</h1> <div class="cntr nav d flex"> <a href="">Home</a> <a href="">Product</a> <a href="">Shop</a> <a href="">Contact</a> </div> <i class="ri menu line"></i> </nav> <div class="section section1 d flex"> <h1>FANTA</h1> <img id="leaf1" src="./Assets2/leaf.webp" alt="" /> <img id="orange2" src="./Assets2/orange2.png" alt="" /> <img id="leaf2" src="./Assets2/leaf2.png" alt="" /> <img id="fanta" src="./Assets2/fanta.png" alt="" /> <img id="orange" src="./Assets2/orange.webp" alt="" /> </div> <div class="section d flex section2"> <div class="lft d flex"> <div class="magicpattern"></div> </div> <div class="rght d flex c"> <h1 class="mainHeading">Flavour Updated</h1> <p class="mainP"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores, sunt enim! Debitis eius distinctio, unde in quis totam, dolorem cumque laborum deserunt dignissimos reprehenderit quaerat sed rerum enim, obcaecati quisquam quidem magni modi laudantium nemo omnis nobis provident! Temporibus quos a sequi, voluptas fuga quis commodi suscipit doloribus tempora nemo. </p> <button>Check Now</button> </div> </div> <div class="section d flex section3"> <div class="card d flex c"> <div class="img div d flex"> <img id="pineapplecut" src="./Assets/orangefruit.jpg" alt="" /> <img id="pineapple" src="./Assets2/cocacola.png" alt="" /> </div> <h1 class="mainHeading">CocaCola</h1> <button>Buy Now</button> </div> <div class="card d flex c"> <div class="img div d flex"> <img id="resp orange" src="./Assets2/orange2.png" alt="" /> <img id="resp fanta" src="./Assets2/fanta.png" alt="" /> </div> <h1 class="mainHeading">Fanta</h1> <button>Buy Now</button> </div> <div class="card d flex c"> <div class="img div d flex"> <img id="orangefruit" src="./Assets/orangefruit.jpg" alt="" /> <img id="yellow" src="./Assets2/pepsi.png" alt="" /> </div> <h1 class="mainHeading">Lemon</h1> <button>Buy Now</button> </div> </div> <div class="section"></div> </div> <script src="https://unpkg.com/lenis@1.1.9/dist/lenis.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html> const lenis = new Lenis() lenis.on('scroll', (e) => { console.log(e) }) function raf(time) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf) let mm = gsap.matchMedia(); mm.add("(min width: 800px)", () => { let tl = gsap.timeline({ scrollTrigger: { trigger: '.section1', start: '50% 50%', end: '130% 50%', scrub: 1 } }); tl.to('#leaf1', { top: "120%", left: "80%", rotate: 90 }, 'timeO') .to('#leaf2', { top: "105%", left: "5%", rotate: 120 }, 'timeO') .to('#fanta', { top: "115%", left: "5%", }, 'timeO') .to('#orange2', { top: "150%", left: "25%", }, 'timeO') .to('#orange', { top: "160%", left: "70%", }, 'timeO') }); mm.add("(max width: 799px)", () => { let tl = gsap.timeline({ scrollTrigger: { trigger: '.section1', start: '50% 50%', end: '130% 50%', scrub: 1 } }); tl.to('#leaf1', { top: "120%", left: "80%", rotate: 90 }, 'timeO') .to('#leaf2', { top: "105%", left: "5%", rotate: 120 }, 'timeO') .to('#fanta', { top: "125%", left: "5%", }, 'timeO') .to('#orange2', { top: "110%", left: "15%", }, 'timeO') .to('#orange', { top: "160%", left: "35%", width: "65vw" }, 'timeO') }); let mm2 = gsap.matchMedia(); mm2.add("(min width: 800px)", () => { let tl2 = gsap.timeline({ scrollTrigger: { trigger: '.section2', start: '50% 50%', end: '200% 100%', scrub: 1, // markers: true } }); tl2.to('#fanta', { top: "220%", left: "35%", width: "30vw", }, 'time1') .to('#orange2', { top: "220%", left: "40%", width: "20vw", }, 'time1') .from('#pineapplecut', { y: 500, x: 900, rotate: 90, }, 'time1') .from('#pineapple', { y: 300, x: 700, rotate: 90, }, 'time1') .from('#orangefruit', { y: 500, x: 900, rotate: 90, }, 'time1') .from('#yellow', { y: 300, x: 700, rotate: 90, }, 'time1') }); mm2.add("(max width: 799px)", () => { let tl2 = gsap.timeline({ scrollTrigger: { trigger: '.section3', start: '0% 90%', end: '100% 100%', scrub: 1, markers: true } }); tl2.from('#pineapplecut', { y: 500, x: 900, rotate: 90, }, 'time1') .from('#pineapple', { y: 300, x: 700, rotate: 90, }, 'time1') .from('#orangefruit', { y: 500, x: 900, rotate: 90, }, 'time1') .from('#yellow', { y: 300, x: 700, rotate: 90, }, 'time1') .from('#resp orange', { y: 500, x: 900, rotate: 90, }, 'time1') .from('#resp fanta', { y: 300, x: 700, rotate: 90, }, 'time1') }); import Image from 'next/image'; import styles from '../styles/Home.module.css'; export default function Home() { console.log('Rendering Home component'); return ( <div className={styles.scrollContainer}> {console.log('scrollContainer rendered')} <div className={styles.imageWrapper}> {console.log('imageWrapper rendered')} <Image src="/example image.jpg" // Replace with your image path alt="Scrolling Animation" width={800} height={600} className={styles.image} onLoad={() => console.log('First image loaded')} /> <Image src="/example image.jpg" // Same image repeated alt="Scrolling Animation" width={800} height={600} className={styles.image} onLoad={() => console.log('Second image loaded')} /> <Image src="/example image.jpg" // Same image repeated alt="Scrolling Animation" width={800} height={600} className={styles.image} onLoad={() => console.log('Third image loaded')} /> </div> </div> ); } html.lenis, html.lenis body { height: auto; } .lenis.lenis smooth { scroll behavior: auto !important; } .lenis.lenis smooth [data lenis prevent] { overscroll behavior: contain; } .lenis.lenis stopped { overflow: hidden; } .lenis.lenis smooth iframe { pointer events: none; } @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); * { margin: 0; padding: 0; box sizing: border box; font family: "Roboto", sans serif; font weight: 500; font style: normal; } html, body { height: 100%; width: 100%; } #main { width: 100%; min height: 100vh; /* background color: black; */ } .d flex { display: flex; align items: center; justify content: center; } .d flex c { display: flex; align items: center; justify content: center; flex direction: column; } nav { position: fixed; top: 0; width: 100%; height: 10vh; justify content: space between !important; padding: 0vw 10vw; background: rgba(255, 255, 255, 0.2); box shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop filter: blur(5px); webkit backdrop filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); color: #000; z index: 999999; } .cntr nav { width: 50%; gap: 3vw; } .cntr nav a { text decoration: none; color: #333; } .ri menu line { font size: 1.5vw; } .section { width: 100%; height: 100vh; } .section1 { background image: url(./Assets2/magicpattern mesh gradient 1722524507236.png); background size: cover; background position: center; } .section1 h1 { font size: 22vw; color: #fff; } .section1 img { position: absolute; transition: all cubic bezier(0.19, 1, 0.22, 1) 0.5s; } #leaf1 { left: 20%; top: 20%; } #fanta { width: 35vw; } #orange { top: 65%; left: 48%; width: 20vw; } #leaf2 { top: 55%; left: 75%; width: 10vw; } #orange2 { top: 10%; left: 35%; width: 15vw; } /* section 2 */ .section2 .lft { width: 50%; height: 100%; /* background color: red; */ } .section2 .rght { width: 50%; height: 100%; align items: start; gap: 5vh; padding: 0vw 10vw 0vw 0vw; /* background color: orange; */ } .magicpattern { width: 70%; height: 70%; background size: cover; background position: center center; background repeat: repeat; background image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath id=%22a%22%3E%3Cpath fill=%22currentColor%22 d=%22M835.5 673.5Q700 847 508 833T202 659.5Q88 500 217.5 368T499 237.5q152 1.5 312 132t24.5 304Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip path=%22url(%23a)%22%3E%3Cpath fill=%22%23f77f45%22 d=%22M835.5 673.5Q700 847 508 833T202 659.5Q88 500 217.5 368T499 237.5q152 1.5 312 132t24.5 304Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .mainHeading { font size: 3vw; color: rgb(252, 145, 13); } .mainP { font size: 1vw; color: #919191; font weight: 400; } .section2 .rght button { padding: 1vw 2vw; background color: rgb(252, 145, 13); /* border: none; */ /* border radius: 10px; */ /* color: #fff; */ } /* Section 3 */ .section3 { gap: 5vw; overflow: hidden; } .section3 .card { width: 25vw; height: 70vh; background color: #fff2e5; padding: 1vw; gap: 2vh; border radius: 20px; } .img div { position: relative; width: 100%; height: 80%; /* background color: rebeccapurple; */ } .img div img { position: absolute; width: 100%; } .card .mainHeading { color: #000; } .card button { padding: 1vw 2vw; background color: rgb(245, 142, 64); } #pineapple { width: 12vw; } #yellow { width: 18vw; } #pineapplecut, #orangefruit { width: 30vw; } #resp orange { width: 50vw; } #resp fanta { width: 90vw; } #resp orange, #resp fanta { display: none; } @media (max width: 799px) { .cntr nav { display: none; } .ri menu line { font size: 7vw; } .section1 h1 { font size: 32vw; } #fanta { width: 95vw; } #orange2 { top: 15%; left: 10%; width: 39vw; } #leaf1 { top: 14%; left: 67%; width: 19vw; } #orange { top: 58%; left: 47%; width: 42vw; } #leaf2 { top: 76%; left: 12%; width: 16vw; } .section2 { flex direction: column; height: 200vh; } .magicpattern { width: 100%; height: 40%; } .section2 .lft { width: 100%; height: 40%; } .section2 .rght { width: 100%; padding: 10vw; height: 60%; } .mainHeading { font size: 8vw; } .mainP { font size: 5vw; } .section2 .rght button { padding: 5vw 10vw; } .section3 { flex direction: column; height: 210vh; } .section3 .card { width: 80vw; padding: 5vw; } .card button { padding: 5vw 10vw; } #pineapple { width: 37vw; } #pineapplecut, #orangefruit { width: 75vw; } #pineapplecut, #orangefruit { width: 75vw; } #yellow { width: 57vw; } #resp orange, #resp fanta { display: initial; } }
