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

update homepage

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-11 22:25:07 -05:00
parent ea2b8f4649
commit 9fa37a7ff3
10 changed files with 35 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
awwwards_ss3/index.html
View file

@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prosto+One&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awwwards | REJOUICE®</title>
</head>

2
awwwards_ss3/src/App.jsx
View file

@ -1,5 +1,5 @@
import Home from "./components/Home"
import Header from "./components/Header"
import Home from "./components/Home"
import PreLoader from "./components/preloader/PreLoader"

BIN
awwwards_ss3/src/assets/NB-International-Pro-Bold.ttf Normal file
View file

Binary file not shown.

BIN
awwwards_ss3/src/assets/NB-International-Pro-Light.ttf Normal file
View file

Binary file not shown.

BIN
awwwards_ss3/src/assets/vido-bg.mp4 Normal file
View file

Binary file not shown.

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

@ -11,26 +11,26 @@ const Header = () => {
}
const opacity = {
initial: {
opacity: 0
},
open: {
opacity: 1,
transition: {duration: 0.35}
},
closed: {
opacity: 0,
transition: {duration: 0.35}
}
initial: {
opacity: 0
},
open: {
opacity: 1,
transition: {duration: 0.35}
},
closed: {
opacity: 0,
transition: {duration: 0.35}
}
}
return (
<div onClick={handleClick} className={`w-[100%] fixed ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-[#222222] delay-[0.9s] transition duration-[1] ease-in'}`}>
<div className="flex items-center justify-between">
<p className="capitalize text-2xl px-14 pt-20">The venture agency.</p>
<div onClick={handleClick} className={`w-[100%] fixed ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`}>
<div className="flex items-center justify-between z-40">
<p className="capitalize text-2xl px-14 pt-14 text-white">The venture agency.</p>
<div className="flex items-center gap-2 cursor-pointer ">
<div onClick={() => {setIsActive(!isActive)}} className="relative flex items-center h-[100%] px-14 pt-20">
<motion.p variants={opacity} animate={!isActive ? "open" : "closed"} className="text-2xl">Menu</motion.p>
<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>
</div>

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

@ -1,9 +1,12 @@
import vidoBg from "../assets/vido-bg.mp4"
const Home = () => {
return (
<div>
<div></div>
<div className="w-[100%] h-[100vh]">
<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"><span className="text-[27vw]">re</span>JOUIC<span className="text-[27vw]">e</span></h1>
</div>
</div>
)
}

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

@ -2,7 +2,6 @@ import { motion } from 'framer-motion';
const NavBody = ({links, selectedLink, setSelectedLink}) => {
const translate = {
initial: {
y: "100%",
@ -37,7 +36,6 @@ const NavBody = ({links, selectedLink, setSelectedLink}) => {
return chars;
}
return (
<div className="">
{

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

@ -9,7 +9,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">
<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">
<p>Tomorrow’s </p>
<p>Brands, </p>

12
awwwards_ss3/src/index.css
View file

@ -3,14 +3,22 @@
@tailwind utilities;
body{
background-color: #222222;
color: white;
background-color: #FAF8F3;
color: #0E0E0E;
font-family: "Epilogue", sans-serif;
}
.img-container{
display: none;
}
.home-text{
font-family: "NB-International-Pro-Bold";
}
@font-face {
font-family: "NB-International-Pro-Bold";
src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");
font-weight: normal;
}
@media (min-width: 1000px) {
.img-container{
display: block;