Skip to content

Instantly share code, notes, and snippets.

@zenkodr

zenkodr/Hero.jsx

Forked from Mif2006/Hero.jsx
Created August 8, 2025 22:51
Show Gist options
  • Save zenkodr/d23d3fc33448f9de8b0c0ba78740d94f to your computer and use it in GitHub Desktop.
Save zenkodr/d23d3fc33448f9de8b0c0ba78740d94f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
constants**index.js
export const navList = [
{
name: "About",
link: "/about"
},
{
name: "Collections",
link: "/collections"
},
{
name: "Discoveries",
link: "/discoveries"
},
{
name: "Roadmap",
link: "/Roadmap"
},
{
name: "Tutorials",
link: "/tutorials"
},
]
Raw
Hero.jsx
"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
Raw
Navbar.jsx
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment