added about section

awwwards_ss3/src/App.jsx

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

awwwards_ss3/src/components/About.jsx

@@ -0,0 +1,44 @@
+import { PiArrowElbowRightDown, PiArrowElbowDownRightLight } from "react-icons/pi";
+
+const About = () => {
+  return (
+    <div className="px-14 mt-[120px]">
+        <div className="flex-col text-3xl">
+            <p>Full service digital agency.</p>
+            <div className="flex justify-between">
+                <p>Two engagement models.</p>
+                <p>Paris / San Diego</p>
+            </div>
+            <div className="border-[#555555] border-t-2 mt-2"></div>
+        </div>
+        <div className="w-full h-screen flex flex-col justify-between">
+            <div className="mr-20">
+                <p className="mr-20 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
+                off set through our Venture Model-your vision, your decision.</p>
+            </div>
+            <div >
+                <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>
+                <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">
+                    <span className="btn-about">and engagement models</span></a>
+            </div>
+        </div>
+        <div className="w-full h-screen mt-[15vw]">
+            <div className="flex justify-between text-3xl tracking-tight">
+                <p>Transforming visions into brands.</p>
+                <a href="" className="flex gap-2">
+                    <PiArrowElbowDownRightLight className="text-2xl"/>
+                    <p className="btn">See the work</p>
+                </a>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default About

awwwards_ss3/src/components/NavBody.jsx

@@ -43,7 +43,7 @@ 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'>
+            animate={selectedLink.isActive && selectedLink.index != index ? "open" : "closed"} className='flex overflow-hidden text-[3.5vw] leading-none text-[#0E0E0E] mx-40 underline'>
             {getChars(title)}
             </motion.p>
           </a>

awwwards_ss3/src/index.css

@@ -13,7 +13,7 @@ body{
 .home-text{
     font-family: "NB-International-Pro-Bold";
 }
-.btn{
+.btn, .btn-about{
     position: relative;
     text-decoration: none;
 }
@@ -30,10 +30,40 @@ body{
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }
-.btn:hover::after{
+.btn:hover::after, .btn-about:hover::after{
     transform: scaleX(1);
     transform-origin: bottom left;
 }
+
+.btn-about::before{
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(1);
+    border-radius: 5px;
+    height: 4px;
+    bottom: 0;
+    left: 0;
+    background: currentcolor;
+    transform-origin: bottom right;
+}
+.btn-about:hover::before{
+    transform: scaleX(0);
+}
+.btn-about::after{
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    border-radius: 5px;
+    height: 4px;
+    bottom: 0;
+    left: 0;
+    background: currentcolor;
+    transform-origin: bottom right;
+    transition: transform 0.5s ease-out;
+}
+
 .btn-1{
     background: linear-gradient(to right, #0E0E0E 50%, transparent 50%);
     background-size: 200% 100%;
@@ -55,7 +85,6 @@ body{
 
 
 
-
 @font-face {
     font-family: "NB-International-Pro-Bold";
     src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");