Skip to content

Instantly share code, notes, and snippets.

@Mif2006
Created November 21, 2024 13:31

Revisions

  1. Mif2006 created this gist Nov 21, 2024.
    94 changes: 94 additions & 0 deletions Hero.jsx
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    "use client"

    import { useGSAP } from '@gsap/react'
    import gsap from 'gsap'
    import Image from 'next/image'
    import React, { useRef, useState } from 'react'

    const Hero = () => {
    const lettersRef = useRef([])
    const odysseyRef = useRef(null)
    const outerDivRef = useRef(null)
    const innerDivRef = useRef(null)
    const [currentImageIndex, setCurrentImageIndex] = useState(0)

    const images = ["/astro1.jpg", "/astro2.jpeg", "/astro3.jpeg", "/astro5.jpg",]

    useGSAP(() => {
    const tl = gsap.timeline()

    const changeSlide = () => {
    tl.to(innerDivRef.current, {
    x: "-100%",
    duration: 1,
    ease: "power2.inOut",
    delay: 5,
    onComplete: () => {
    setCurrentImageIndex((prev) => (prev + 1) % images.length)
    gsap.set(innerDivRef.current, {x: "100%"})
    }
    })

    tl.to(innerDivRef.current, {
    x: "0%",
    duration: 1,
    ease: "power2.inOut"
    })
    }

    const interval = setInterval(changeSlide, 2000);
    changeSlide()

    tl.to(lettersRef.current, {
    x: 0,
    opacity: 1,
    stagger: 0.1,
    duration: 1
    }).to(odysseyRef.current, {
    x: 0,
    opacity: 1,
    duration: 1
    }).to(outerDivRef.current, {
    y: 0,
    opacity: 1,
    scale: 1,
    duration: 1.2
    })
    }, [])

    return (
    <div className='w-full min-h-screen overflow-hidden bg-cover bg-center' style={{backgroundImage: "url(/astro4.jpeg)"}}>
    <div className='absolute inset-0 w-full h-full bg-cover bg-center top-0 z-[4]' style={{backgroundImage: "url(/astronobg.png)"}}/>
    <div className='absolute transform top-[5vh] lg:top-[-5vh] right-0 inline-flex'>
    <div className='text-[30vw] lg:text-[300px] font-bold text-white flex flex-col'>
    <div className='flex'>
    {'OCEAN'.split("").map((letter, index) => (
    <span key={index} ref={(el) => (lettersRef.current[index] = el)} className='inline-block opacity-0 translate-x-[200px]'>
    {letter}
    </span>
    ))}
    </div>
    <h3 ref={odysseyRef} className='text-[12vw] lg:text-8xl font-semibold opacity-0 translate-x-[200px] text-white absolute bottom-0 right-[-4px]'>ODYSSEY</h3>
    </div>
    </div>

    <div ref={outerDivRef} className='absolute bottom-[5vh] right-[10vw] outerdiv flex overflow-hidden h-[32vh] w-[38vw] rounded-xl bg-white/10 backdrop-blur-lg'>
    <div ref={innerDivRef} className='flex relative innerdiv flex-row w-full h-full items-center p-3'>
    <div className='h-full w-[100%] rounded-xl'>
    <img src={images[currentImageIndex]} className='object-cover rounded-xl w-full h-full' />
    </div>
    <div className='absolute h-full w-full pr-[20%]'>
    <h2 className='text-white absolute top-[10%] left-[2%] max-w-[20%] text-[8vw] lg:text-6xl font-bold'>
    THE BEST
    </h2>
    <h2 className='text-white absolute top-[40%] right-[70%] lg:right-[10%] text-right max-w-[20%] text-[6vw] lg:text-4xl font-bold'>
    IN THE WORLD
    </h2>
    </div>
    </div>
    </div>
    </div>
    )
    }

    export default Hero
    30 changes: 30 additions & 0 deletions Navbar.jsx
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    import { navList } from '@/constants'
    import Image from 'next/image'
    import React from 'react'

    const Navbar = () => {
    return (
    <div className='w-full h-[12vh] z-[10] absolute top-0 left-0 flex items-center justify-center'>
    <div className='bg-white/10 shadow-lg backdrop-blue-lg rounded-full flex items-center justify-between px-12 w-[90%] h-[70%]'>
    <Image src="/logo.png" alt='logo' width={70} height={70} />
    <div className='hidden md:flex border p-4 rounded-full flex-row gap-6'>
    {navList.map((item) => (
    <h3 key={item.name} className='cursor-pointer text-white'>{item.name}</h3>
    ))}
    </div>
    <div className='w-[20vw] h-[2px] bg-white' />

    <div className='hidden md:flex p-4 px-12 rounded-full border text-white flex-row gap-12 justify-center items-center'>
    <h3 className='cursor-pointer'>
    Contact us
    </h3>
    <h3 className='cursor-pointer'>
    More Info
    </h3>
    </div>
    </div>
    </div>
    )
    }

    export default Navbar
    22 changes: 22 additions & 0 deletions constants**index.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    export const navList = [
    {
    name: "About",
    link: "/about"
    },
    {
    name: "Collections",
    link: "/collections"
    },
    {
    name: "Discoveries",
    link: "/discoveries"
    },
    {
    name: "Roadmap",
    link: "/Roadmap"
    },
    {
    name: "Tutorials",
    link: "/tutorials"
    },
    ]