muayjtp/awwwards_series
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added animation and updated responsive website

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-17 18:29:54 -05:00
parent a30de8207d
commit 8658db0507
19 changed files with 181 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
awwwards_ss3/package-lock.json generated
View file

@ -17,6 +17,7 @@
"react-router-dom": "^6.22.3",
"react-scroll-trigger": "^0.6.14",
"react-slick": "^0.30.2",
"resize-observer-polyfill": "^1.5.1",
"slick-carousel": "^1.8.1"
},
"devDependencies": {

1
awwwards_ss3/package.json
View file

@ -19,6 +19,7 @@
"react-router-dom": "^6.22.3",
"react-scroll-trigger": "^0.6.14",
"react-slick": "^0.30.2",
"resize-observer-polyfill": "^1.5.1",
"slick-carousel": "^1.8.1"
},
"devDependencies": {

30
awwwards_ss3/src/App.jsx
View file

@ -1,28 +1,32 @@
import About from "./components/About"
import Contact from "./components/Contact"
import Footer from "./components/Footer"
import FooterText from "./components/FooterText"
import Header from "./components/Header"
import Home from "./components/Home"
import Philosophy from "./components/Philosophy"
import SmoothScroll from "./components/SmoothScroll"
import Strategy from "./components/Strategy"
import Visions from "./components/Visions"
//import PreLoader from "./components/preloader/PreLoader"
import PreLoader from "./components/preloader/PreLoader"
function App() {
return (
<div>
{/*<PreLoader/>*/}
<Header/>
<Home/>
<About/>
<Visions/>
<Philosophy/>
<Strategy/>
<Contact/>
<Footer/>
</div>
<>
<PreLoader/>
<SmoothScroll>
<Header/>
<Home/>
<About/>
<Visions/>
<Philosophy/>
<Strategy/>
<Contact/>
<Footer/>
<FooterText/>
</SmoothScroll>
</>
)
}

BIN
awwwards_ss3/src/assets/gradient.webm Normal file
View file

Binary file not shown.

22
awwwards_ss3/src/components/About.jsx
View file

@ -6,9 +6,9 @@ const About = () => {
const [counterOn, setCounterOn] = useState(false);
return (
<div className="px-14 mt-[5vw]">
<div className="px-[3vw] mt-[10vw] sm:mt-[5vw]">
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
<div className="flex-col text-3xl">
<div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none">
<p>Full service digital agency.</p>
<div className="flex justify-between">
<p>Two engagement models.</p>
@ -19,18 +19,18 @@ const About = () => {
</ScrollTrigger>
<div className="flex flex-col justify-between">
<div>
<p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity
<p className="mt-[4vw] sm:mt-[1vw] text-[7vw] sm:text-[4vw] leading-[7.5vw] sm:leading-[4.3vw] tracking-tight justify-center indent-[15vw] sm:indent-[8.3vw]" >We are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity
off set through our Venture Model-your vision, your decision.</p>
</div>
<div className=" mt-[20vw] mb-[12vw]">
<div className="flex gap-2 items-center justify-center mb-10">
<p className="text-xl">Agency & Venture </p>
<span className="py-1 px-3 bg-[#0E0E0E] text-xs text-white rounded-full mr-2">Models</span>
<PiArrowElbowRightDown className="text-xl"/>
<div className="mt-[40vw] sm:mt-[20vw] mb-[24vw] sm:mb-[12vw]">
<div className="flex gap-2 items-center justify-center mb-[5vw] sm:mb-[2vw]">
<p className="text-[3.5vw] sm:text-[1vw]">Agency & Venture </p>
<span className="py-[0.6vw] sm:py-[0.2vw] px-[1.6vw] sm:px-[0.6vw] bg-[#0E0E0E] text-[2vw] sm:text-[0.6vw] text-white rounded-full mr-[0.4vw]">Models</span>
<PiArrowElbowRightDown className="text-[3vw] sm:text-[1vw]"/>
</div>
<a href="" className="flex justify-center text-center text-[4vw] leading-none tracking-tight">
<span className="btn-about">Explore our services</span></a><br />
<a href="" className="flex justify-center text-center text-[4vw] leading-none tracking-tight">
<a href="" className="flex justify-center text-center text-[12vw] sm:text-[4vw] leading-none tracking-tight">
<span className="btn-about mb-[1vw]">Explore our services</span></a>
<a href="" className="flex justify-center text-center text-[12vw] sm:text-[4vw] leading-none tracking-tight">
<span className="btn-about">and engagement models</span></a>
</div>
</div>

52
awwwards_ss3/src/components/Contact.jsx
View file

@ -20,59 +20,59 @@ const Contact = () => {
return (
<div className="w-full">
<div className="px-14">
<div className="flex text-[8vw] leading-none">
<div className="px-[3vw]">
<div className="flex text-[18vw] sm:text-[8vw] leading-none">
<p className="tracking-tighter">Get in touch.</p>
</div>
<div className="border-[#555555] border-t-2 mt-2"></div>
</div>
<div className="-mt-[3vw]">
<div className="my-[-8vw] sm:-mt-[3vw]">
<Slider {...slideAuto}>
<div>
<motion.div className="flex items-end" variants={slider} initial="initial" animate="animate">
<div className="">
<img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="">
<img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
</motion.div>
</div>
<div>
<motion.div className="flex items-end" variants={slider} initial="initial" animate="animate">
<div className="">
<img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="">
<img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
<div>
<img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-[0.4vw] "/>
</div>
</motion.div>
</div>
</Slider>
</div>
<div className="flex flex-col justify-center items-center m-[15vw]">
<p className="flex gap-4 items-center text-[1.1vw] mb-5">We’re uniquely built <PiArrowElbowRightDown/></p>
<a href="" className="btn-about text-[4vw] leading-none tracking-tight">About us</a>
<div className="flex flex-col justify-center items-center mt-[30vw] sm:mt-[15vw] mb-[30vw] sm:mb-[15vw]">
<p className="flex gap-4 items-center text-[3.5vw] sm:text-[1vw] mb:-[2vw] sm:mb-[1vw]">We’re uniquely built <PiArrowElbowRightDown className="text-[3vw] sm:text-[1vw]"/></p>
<a href="" className="btn-about text-[12vw] sm:text-[4vw] leading-none tracking-tight">About us</a>
</div>
</div>
)

36
awwwards_ss3/src/components/Footer.jsx
View file

@ -1,17 +1,17 @@
import { FaXTwitter } from "react-icons/fa6";
import { GoArrowUpRight } from "react-icons/go";
const Footer = () => {
return (
<>
<div className='w-full h-[60vh] bg-[#0E0E0E] text-white px-14 flex flex-col justify-between'>
<div className="flex justify-between mt-[8vh]">
<div className='w-full h-[60vh] bg-[#0E0E0E] text-white px-[3vw] flex flex-col justify-between'>
<div className="grid sm:flex sm:justify-between mt-[4vh] sm:mt-[8vh]">
<div>
<p className=' text-3xl'>Relax. We&apos;ve got you.</p>
<button className="mt-[1.5vw] px-6 py-4 border text-xl rounded-lg hover:bg-[#FAF8F3] hover:text-black hover:transition-transform duration-500">Take a seat</button>
<p className='text-[6vw] sm:text-[1.5vw] leading-none'>Relax. We&apos;ve got you.</p>
<button className="mt-[6vw] mb-[6vw] sm:mt-[1.5vw] px-[3.5vw] sm:px-[1.25vw] py-[1.6vw] sm:py-[0.8vw] border text-[3.5vw] sm:text-[1vw] rounded-full sm:rounded-lg hover:bg-[#FAF8F3] hover:text-black hover:transition-transform duration-500">Take a seat</button>
</div>
<div className="flex gap-[5vw] text-xl">
<div className="flex gap-[20vw] sm:gap-[5vw] text-[4vw] sm:text-[1vw]">
<div className="flex flex-col ">
<a href="">Home</a>
<a href="">Work</a>
@ -20,35 +20,23 @@ const Footer = () => {
<a href="">Contact</a>
</div>
<div className="flex flex-col">
<a href="" className="flex"><FaXTwitter/><GoArrowUpRight className="text-md"/></a>
<a href="" className="flex">Instagram <GoArrowUpRight className="text-md"/></a>
<a href="" className="flex">LinkedIn <GoArrowUpRight className="text-md"/></a>
<a href="" className="flex"><FaXTwitter/><GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
<a href="" className="flex">Instagram <GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
<a href="" className="flex">LinkedIn <GoArrowUpRight className="text-[3vw] sm:text-[0.8vw]"/></a>
</div>
</div>
</div>
<div className="flex justify-between ">
<div className="text-xl">
<div className="grid sm:flex sm:justify-between">
<div className="text-[4vw] sm:text-[1vw]">
<p>San Diego—California</p>
<p>Paris—France </p>
</div>
<div className="flex gap-[5vw] text-xl">
<div className="grid sm:flex sm:gap-[5vw] text-[4vw] sm:text-[1vw]">
<div className="flex flex-col">biz@rejouice.com</div>
<div className="flex flex-col">©2023 legal</div>
</div>
</div>
</div>
<div className="preloader w-full bg-[#0E0E0E] text-[#FAF8F3] flex justify-center items-center text-center">
<h1 className="texts-container leading-none tracking-tighter font-semibold">
<span className="text-[24vw]">r</span>
<span className="text-[24vw]">e</span>
<span className="text-[18vw]">J</span>
<span className="text-[18vw]">O</span>
<span className="text-[18vw]">U</span>
<span className="text-[18vw]">I</span>
<span className="text-[18vw]">C</span>
<span className="text-[24vw]">e</span>
</h1>
</div>
</>
)
}

11
awwwards_ss3/src/components/FooterText.jsx Normal file
View file

@ -0,0 +1,11 @@
const FooterText = () => {
return (
<div className='w-full px-[3vw] flex bg-[#0E0E0E] justify-center items-end text-center'>
<h1 className="home-text text-[20vw] text-[#FFFCF1] leading-none tracking-tight"><span className="text-[27vw]">re</span>JOUIC<span className="text-[27vw]">e</span></h1>
</div>
)
}
export default FooterText

12
awwwards_ss3/src/components/Header.jsx
View file

@ -49,14 +49,14 @@ const Header = () => {
return (
<div className={`w-[100%] fixed z-40 ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`} style={navbarStyle}>
<div className="flex items-center justify-between z-40 ">
<div className="relative flex items-center h-[100%] px-14 pt-14">
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="text-2xl text-white">The venture agency.</motion.p>
<motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-3xl absolute opacity-0 text-[#2D2B2B] font-medium tracking-tight">rejouice</motion.p>
<div className="relative flex items-center h-[100%] px-[8vw] sm:px-[3vw] pt-[8vw] sm:pt-[3vw]">
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="text-[5vw] sm:text-[1.3vw] text-white">The Venture Agency.</motion.p>
<motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-[5vw] sm:text-[1.3vw] absolute opacity-0 text-[#2D2B2B] font-medium tracking-tight">rejouice</motion.p>
</div>
<div onClick={handleClick} className={`flex items-center gap-2 cursor-pointer `} >
<div onClick={() => {setIsActive(!isActive)}} className="relative flex items-center h-[100%] px-14 pt-14">
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="text-2xl text-white">Menu</motion.p>
<motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-2xl absolute opacity-0">Close</motion.p>
<div onClick={() => {setIsActive(!isActive)}} className="relative flex items-center h-[100%] px-[8vw] sm:px-[3vw] pt-[8vw] sm:pt-[3vw]">
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="text-[5vw] sm:text-[1.3vw] text-white">Menu</motion.p>
<motion.p variants={opacity} animate={isActive ? "open" : "closed"} className="text-[5vw] sm:text-[1.3vw] absolute opacity-0">Close</motion.p>
</div>
</div>
</div>

6
awwwards_ss3/src/components/Home.jsx
View file

@ -2,10 +2,10 @@ import vidoBg from "../assets/vido-bg.mp4"
const Home = () => {
return (
<div className="w-[100%] h-[100vh]">
<div className="w-[80vh] sm:w-full h-[80vh] sm:h-screen flex items-end">
<video src={vidoBg} autoPlay loop muted className="w-[100%] h-[100%] object-cover"></video>
<div className=" w-full flex absolute justify-center items-center text-center bottom-0">
<h1 className="home-text text-[20vw] text-white leading-none tracking-tight"><span className="text-[27vw]">re</span>JOUIC<span className="text-[27vw]">e</span></h1>
<div className="w-full flex absolute justify-center items-center text-center">
<h1 className="home-text text-[20vw] text-[#FFFCF1] leading-none tracking-tight mb-[5vw] sm:mb-[0vw]"><span className="text-[27vw]">re</span>JOUIC<span className="text-[27vw]">e</span></h1>
</div>
</div>
)

4
awwwards_ss3/src/components/NavBody.jsx
View file

@ -43,13 +43,13 @@ const NavBody = ({links, selectedLink, setSelectedLink}) => {
const { title, href } = link;
return <a key={index} href={href}> {/*This a tag can change to be Link to take to pages*/}
<motion.p onMouseOver={() => {setSelectedLink({isActive: true, index})}} onMouseLeave={() => {setSelectedLink({isActive: false, index})}}
animate={selectedLink.isActive && selectedLink.index != index ? "open" : "closed"} className='flex overflow-hidden text-[3.5vw] leading-none text-[#0E0E0E] mx-40 underline'>
animate={selectedLink.isActive && selectedLink.index != index ? "open" : "closed"} className='flex overflow-hidden text-[6vw] sm:text-[3.5vw] leading-none text-[#0E0E0E] mx:[1vw] sm:mx-[8.3vw] my-[3vw] sm:my-[1vw] hover:underline '>
{getChars(title)}
</motion.p>
</a>
})
}
<button className='btn-1 mx-40 my-5 block border-[1px] border-[#0E0E0E] rounded-md '> <span className='text text-center text-xl block px-6 py-4'>Take a seat</span></button>
<button className='btn-1 mx-[1vw] sm:mx-[8.3vw] my-[3vw] sm:my-[1vw] block border-[1px] border-[#0E0E0E] rounded-md '> <span className='text text-center text-[3vw] sm:text-[1vw] block px-[1.5vw] py-[0.8vw]'>Take a seat</span></button>
</div>
)
}

12
awwwards_ss3/src/components/NavFooter.jsx
View file

@ -3,12 +3,12 @@ import { MdOutlineArrowOutward } from "react-icons/md";
const NavFooter = () => {
return (
<div className="footer flex justify-between items-center px-14 border-t-[1px] border-black mt-2">
<p className="mt-5 mb-5 flex text-xl">Tomorrow’s Brands, Today.™</p>
<div className="flex items-center gap-4 mt-5 mb-5 text-xl">
<a href="" className="flex items-center gap-1"><span className="btn"><FaXTwitter/></span><MdOutlineArrowOutward className="text-sm"/></a>
<a href="" className="flex items-center gap-1"><span className="btn">Instagram </span> <MdOutlineArrowOutward className="text-sm"/></a>
<a href="" className="flex items-center gap-1"><span className="btn">LinkedIn</span><MdOutlineArrowOutward className="text-sm"/></a>
<div className="footer flex justify-between items-center px-[8vw] sm:px-[3vw] border-t-[1px] border-black mt-2">
<p className="mt-[2vw] sm:mt-[1vw] mb-[2vw] sm:mb-[1vw] flex text-[2vw] sm:text-[1vw]">Tomorrow’s Brands, Today.™</p>
<div className="flex items-center gap-4 mt-[2vw] sm:mt-[1vw] mb-[2vw] sm:mb-[1vw] text-[2vw] sm:text-[1vw]">
<a href="" className="flex items-center gap-1"><span className="btn"><FaXTwitter/></span><MdOutlineArrowOutward className="text-[1.5vw] sm:text-[0.7vw]"/></a>
<a href="" className="flex items-center gap-1"><span className="btn">Instagram </span> <MdOutlineArrowOutward className="text-[1.5vw] sm:text-[0.7vw]"/></a>
<a href="" className="flex items-center gap-1"><span className="btn">LinkedIn</span><MdOutlineArrowOutward className="text-[1.5vw] sm:text-[0.7vw]"/></a>
</div>
</div>

10
awwwards_ss3/src/components/Navbar.jsx
View file

@ -48,12 +48,12 @@ const Navbar = () => {
return (
<motion.div variants={height} initial="initial" animate="enter" exit="exit" className="overflow-hidden bg-[#FF5F38] flex flex-col">
<div className="px-14 grid grid-cols-2">
<div className='flex flex-col w-[430px]'>
<video src={vidoBg} autoPlay loop muted className="video-container w-[450px] h-[280px] object-cover rounded-md my-2"></video>
<div className="px-[8vw] sm:px-[3vw] grid grid-cols-2">
<div className='video-container flex flex-col w-[26vw] sm:w-[22vw]'>
<video src={vidoBg} autoPlay loop muted className="w-[26vw] h-[16.5vw] sm:w-[23vw] sm:h-[14.5vw] object-cover rounded-md my-2"></video>
<div className='flex justify-between mt-2'>
<p className='flex gap-2 items-center text-xl cursor-pointer'><IoMdPlayCircle className='text-2xl'/> <span className='btn'>Play reel</span></p>
<p className='text-xl'>-01:18</p>
<p className='flex gap-[1vw] sm:gap-[1vw] text-center items-center text-[3vw] sm:text-[1vw] cursor-pointer'><IoMdPlayCircle className='text[4vw] sm:text-[2vw]'/> <span className='btn'>Play reel</span></p>
<p className='text-[3vw] sm:text-[1vw]'>-01:18</p>
</div>
</div>
<div>

16
awwwards_ss3/src/components/Philosophy.jsx
View file

@ -9,34 +9,34 @@ const Philosophy = () => {
return (
<div className="w-full">
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
<div className="flex-col text-3xl px-14">
<div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none px-[3vw]">
<p>We operate on a simple philosophy:</p>
<p>Quality over quantity.</p>
{counterOn && <div className="line mt-2 relative"></div>}
</div>
</ScrollTrigger>
<div className="flex flex-col justify-between px-14">
<div className="flex flex-col justify-between px-[3vw]">
<div>
<p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We collaborate with five clients each year. This allows for intense focus on the trabsformation and
<p className="mt-[4vw] sm:mt-[1vw] text-[7vw] sm:text-[4vw] leading-[7.5vw] sm:leading-[4.3vw] tracking-tight justify-center indent-[15vw] sm:indent-[8.3vw]" >We collaborate with five clients each year. This allows for intense focus on the trabsformation and
launch of you brand by our very best team, which is the only team we have.</p>
</div>
</div>
<div className="flex flex-col justify-center items-center">
<video src="https://www.rejouice.com/assets/videos/RJ-BALL-BLUE-ORANGE-scaled.webm" autoPlay loop muted className="h-[100vh]"></video>
<svg className="absolute tl:0 fit transform rotate:-90deg w-[35vw]" viewBox="0 0 100 100">
<video src="https://www.rejouice.com/assets/videos/RJ-BALL-BLUE-ORANGE-scaled.webm" autoPlay loop muted className="h-[40vh] md:h-[100vh]"></video>
<svg className="absolute tl:0 fit transform rotate:-90deg w-[60vw] sm:w-[35vw]" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="49" stroke="#fff" stroke-width="0.25" fill="none" className="o:0.3 $$2$$ $$3$$ $$4$$ (.in-view):tween:all,2.8s,easeOutSlow dasharray:308 dashoffset:616 (.in-view):dashoffset:492.8"></circle>
<circle cx="50" cy="50" r="49" stroke="#fff" stroke-width="0.25" fill="none" className="$$5$$ $$6$$ $$7$$ (.in-view):tween:all,2.8s,easeOutSlow dasharray:308 dashoffset:308 (.in-view):dashoffset:184.79999999999998"></circle>
</svg>
<svg className="absolute tl:0 fit transform rotate:0 $$8$$ (.in-view):tween:all,2.8s,easeOutSlow (.in-view):rotate:144deg w-[35vw]" viewBox="0 0 100 100">
<svg className="absolute tl:0 fit transform rotate:0 $$8$$ (.in-view):tween:all,2.8s,easeOutSlow (.in-view):rotate:144deg w-[60vw] sm:w-[35vw]" viewBox="0 0 100 100">
<circle cx="50" cy="1" r="1" fill="#fff"></circle>
</svg>
<div className="absolute text-center text-white">
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
<p className="text-7xl" >
<p className="text-[6vw] sm:text-[3.75vw]" >
{counterOn && <CountUp start={0} end={3} duration={3} delay={0}/>}
seats</p>
</ScrollTrigger>
<p className="text-3xl">available for 2024</p>
<p className="text-[5vw] sm:text-[1.5vw]">available for 2024</p>
</div>
{/*gradient option*/}
{/*<div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">

38
awwwards_ss3/src/components/SmoothScroll.jsx Normal file
View file

@ -0,0 +1,38 @@
import { useRef, useState, useCallback, useLayoutEffect } from "react"
import ResizeObserver from "resize-observer-polyfill"
import { useViewportScroll, useTransform, useSpring, motion } from "framer-motion"
const SmoothScroll = ({ children }) => {
const scrollRef = useRef(null);
const [pageHeight, setPageHeight] = useState(0);
const resizePageHeight = useCallback(entries => {
for (let entry of entries) {
setPageHeight(entry.contentRect.height)
}
}, [])
useLayoutEffect(() => {
const resizeObserver = new ResizeObserver(entries =>
resizePageHeight(entries)
)
scrollRef && resizeObserver.observe(scrollRef.current)
return () => resizeObserver.disconnect()
}, [scrollRef, resizePageHeight])
const { scrollY } = useViewportScroll()
const transform = useTransform(scrollY, [0, pageHeight], [0, -pageHeight])
const physics = { damping: 15, mass: 0.27, stiffness: 55 }
const spring = useSpring(transform, physics)
return (
<>
<motion.div ref={scrollRef} style={{y: spring}} className="scroll-container">
{children}
</motion.div>
<div style={{ height: pageHeight }} />
</>
)
}
export default SmoothScroll

6
awwwards_ss3/src/components/Strategy.jsx
View file

@ -6,9 +6,9 @@ const Strategy = () => {
return (
<div className="w-full px-14 mb-[12vw] mt-[5vw]">
<div className="w-full px-[3vw] mb-[30vw] sm:mb-[12vw] mt-[5vw]">
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
<div className="flex-col text-3xl">
<div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none">
<p>Strategy & emotion.</p>
<p>You need both.</p>
{counterOn && <div className="line mt-2 relative"></div>}
@ -16,7 +16,7 @@ const Strategy = () => {
</ScrollTrigger>
<div className="flex flex-col justify-between">
<div>
<p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >Data matters, yet it’s the emotion that drives buying decisions. We don’t
<p className="mt-[4vw] sm:mt-[1vw] text-[7vw] sm:text-[4vw] leading-[7.5vw] sm:leading-[4.3vw] tracking-tight justify-center indent-[15vw] sm:indent-[8.3vw]" >Data matters, yet it’s the emotion that drives buying decisions. We don’t
believe in ’one size fits all. Instead, we collabolate closely with founders to craft unique brand experiences that deeply resonate with their audiences and boots their KPIs.</p>
</div>
</div>

20
awwwards_ss3/src/components/Visions.jsx
View file

@ -43,27 +43,27 @@ const Visions = () => {
}
return (
<div className="w-full mb-[12vw]">
<div className="flex justify-between text-3xl tracking-tight px-14 mb-5">
<div className="w-full mb-[24vw] sm:mb-[12vw]">
<div className="flex justify-between text-[3.5vw] sm:text-[1.5vw] tracking-tight px-[3vw] mb-[1vw]">
<p>Transforming visions into brands.</p>
<a href="" className="flex gap-2">
<PiArrowElbowDownRightLight className="text-2xl"/>
<PiArrowElbowDownRightLight className="text-[3vw] sm:text-[1.25vw]"/>
<p className="btn">See the work</p>
</a>
</div>
<div className=" px-10">
<div className="px-[2vw]">
<Slider {...slideSettings}>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/d8e1fa1f-4f24-41e1-a249-098c62df5aff_Group+46+%281%29.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-01_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
<img src="https://images.prismic.io/rejouice/d8e1fa1f-4f24-41e1-a249-098c62df5aff_Group+46+%281%29.jpg" alt="" className="px-[0.8vw] w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-01_1.mp4" autoPlay muted loop className="px-[0.8vw] absolute inset-0 -z-[1]"></video>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/e0350a3d-c390-4d97-af1a-5c86bc822b52_Group+3929.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-02_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
<img src="https://images.prismic.io/rejouice/e0350a3d-c390-4d97-af1a-5c86bc822b52_Group+3929.jpg" alt="" className="px-[0.8vw] w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-02_1.mp4" autoPlay muted loop className="px-[0.8vw] absolute inset-0 -z-[1]"></video>
</div>
<div className="relative overflow-hidden">
<img src="https://images.prismic.io/rejouice/2874f084-ec6c-4a19-b025-a55c1e6db929_Group+3692.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-03_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
<img src="https://images.prismic.io/rejouice/2874f084-ec6c-4a19-b025-a55c1e6db929_Group+3692.jpg" alt="" className="px-[0.8vw] w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
<video src="../src/assets/Website-homepage-Work-03_1.mp4" autoPlay muted loop className="px-[0.8vw] absolute inset-0 -z-[1]"></video>
</div>
</Slider>
</div>

2
awwwards_ss3/src/components/preloader/PreLoader.jsx
View file

@ -10,7 +10,7 @@ const PreLoader = () => {
return (
<div className="preloader h-[100vh] w-[100%] flex justify-center items-center overflow-hidden bg-[#0E0E0E] fixed bottom-0 left-0 right-0 z-50 text-white">
<div className="texts-container flex justify-between items-center text-4xl font-serif overflow-hidden gap-1">
<div className="texts-container flex justify-between items-center text-[6vw] sm:text-[2vw] font-serif overflow-hidden gap-1">
<p>Tomorrow’s </p>
<p>Brands, </p>
<p>Today.™</p>

22
awwwards_ss3/src/index.css
View file

@ -14,6 +14,13 @@ body{
color: #0E0E0E;
font-family: "Epilogue", sans-serif;
}
.scroll-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.img-container{
display: none;
}
@ -48,7 +55,7 @@ body{
width: 100%;
transform: scaleX(1);
border-radius: 5px;
height: 4px;
height: 0.2vw;
bottom: 0;
left: 0;
background: currentcolor;
@ -63,7 +70,7 @@ body{
width: 100%;
transform: scaleX(0);
border-radius: 5px;
height: 4px;
height: 0.2vw;
bottom: 0;
left: 0;
background: currentcolor;
@ -201,6 +208,17 @@ body{
/*========== Responsive ==========*/
@media (max-width: 600px){
.video-container{
display: none;
}
.btn-about{
text-decoration: underline;
}
.btn-about::before, .btn-about::after{
display: none;
}
}
@media (min-width: 1000px){
.video-container{
display: block;