updated navbar, footer

awwwards_ss3/src/App.jsx

@@ -1,6 +1,6 @@
 import Header from "./components/Header"
 import Home from "./components/Home"
-import PreLoader from "./components/preloader/PreLoader"
+//import PreLoader from "./components/preloader/PreLoader"
 
 
 
@@ -8,7 +8,7 @@ function App() {
 
   return (
     <div>
-      <PreLoader/> 
+      {/*<PreLoader/>*/}
       <Header/>
       <Home/>
     </div>

awwwards_ss3/src/components/Header.jsx

@@ -25,10 +25,13 @@ const Header = () => {
   }
 
   return (
-    <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 className={`w-[100%] fixed z-40 ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`}>
+      <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>
+        <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>

awwwards_ss3/src/components/Home.jsx

@@ -5,7 +5,7 @@ const Home = () => {
     <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>
+            <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>
     </div>
   )

awwwards_ss3/src/components/NavBody.jsx

@@ -37,18 +37,19 @@ const NavBody = ({links, selectedLink, setSelectedLink}) => {
   }
 
   return (
-    <div className="">
+    <div>
       {
         links.map((link, index) => {
           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-[32px] font-semibold text-black'>
+            animate={selectedLink.isActive && selectedLink.index != index ? "open" : "closed"} className='flex overflow-hidden text-[3.5vw] leading-none text-[#0E0E0E] mx-40'>
             {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>
     </div>
   )
 }

awwwards_ss3/src/components/NavFooter.jsx

@@ -1,15 +1,17 @@
 import { FaXTwitter } from "react-icons/fa6";
+import { MdOutlineArrowOutward } from "react-icons/md";
 
 const NavFooter = () => {
   return (
-    <div className="footer flex justify-between px-14">
-      <p>Tomorrow’s Brands, Today.™</p>
-      <div className="flex items-center gap-4">
-        <a href=""><FaXTwitter/></a>
-        <a href="">Instagram</a>
-        <a href="">LinkedIn</a>
+    <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>
     </div>
+
   )
 }
 

awwwards_ss3/src/components/Navbar.jsx

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { motion } from 'framer-motion';
 import NavBody from "./NavBody"
 import NavFooter from "./NavFooter"
-
+import vidoBg from "../assets/vido-bg.mp4"
+import { IoMdPlayCircle } from "react-icons/io";
 
 const links = [
     {
@@ -48,10 +49,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>
-                <p>rejouice</p>
-                <img src="https://images.unsplash.com/photo-1711843250654-43310460b3f8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" 
-                className='img-container w-[450px] h-[300px] object-cover relative'/>
+            <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='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>
+                </div>
             </div>
             <div>
                 <NavBody links={links} selectedLink={selectedLink} setSelectedLink={setSelectedLink}/>

awwwards_ss3/src/index.css

@@ -13,6 +13,48 @@ body{
 .home-text{
     font-family: "NB-International-Pro-Bold";
 }
+.btn{
+    position: relative;
+    text-decoration: none;
+}
+.btn::after{
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    border-radius: 5px;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    background: currentcolor;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+}
+.btn:hover::after{
+    transform: scaleX(1);
+    transform-origin: bottom left;
+}
+.btn-1{
+    background: linear-gradient(to right, #0E0E0E 50%, transparent 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: all .5s ease-out;
+}
+.btn-1:hover {
+    background-position: left bottom;
+}
+.text {
+    transition: all .6s ease-out;
+}
+.text:hover {
+    color: #FF5F38;  
+}
+
+
+
+
+
+
 
 @font-face {
     font-family: "NB-International-Pro-Bold";
@@ -20,7 +62,7 @@ body{
     font-weight: normal;
 }
 @media (min-width: 1000px) {
-    .img-container{
+    .video-container{
         display: block;
     }
 }