From 813ef36401f5bf3f506352827be327a1f5f93ceb Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sun, 14 Apr 2024 22:33:42 -0500
Subject: [PATCH] added about section

---
 awwwards_ss3/src/App.jsx                |  7 ++--
 awwwards_ss3/src/components/About.jsx   | 44 +++++++++++++++++++++++++
 awwwards_ss3/src/components/NavBody.jsx |  2 +-
 awwwards_ss3/src/index.css              | 35 ++++++++++++++++++--
 4 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 awwwards_ss3/src/components/About.jsx

diff --git a/awwwards_ss3/src/App.jsx b/awwwards_ss3/src/App.jsx
index 69bf798..abb4d43 100644
--- a/awwwards_ss3/src/App.jsx
+++ b/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>
   )
 }
diff --git a/awwwards_ss3/src/components/About.jsx b/awwwards_ss3/src/components/About.jsx
new file mode 100644
index 0000000..e5d6d82
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/awwwards_ss3/src/components/NavBody.jsx b/awwwards_ss3/src/components/NavBody.jsx
index 0564cf5..303d83f 100644
--- a/awwwards_ss3/src/components/NavBody.jsx
+++ b/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>
diff --git a/awwwards_ss3/src/index.css b/awwwards_ss3/src/index.css
index c0161e2..a41d0ae 100644
--- a/awwwards_ss3/src/index.css
+++ b/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");