From b27971cf183a7a9294a1b23684f9600aa9e6b66a Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Tue, 16 Apr 2024 12:19:51 -0500
Subject: [PATCH] added contact section

---
 awwwards_ss3/src/App.jsx                   |  8 ++-
 awwwards_ss3/src/components/About.jsx      |  2 +-
 awwwards_ss3/src/components/Contact.jsx    | 81 ++++++++++++++++++++++
 awwwards_ss3/src/components/Philosophy.jsx | 19 ++++-
 awwwards_ss3/src/components/Strategy.jsx   | 19 +++++
 awwwards_ss3/src/components/Visions.jsx    |  4 +-
 awwwards_ss3/src/index.css                 |  6 +-
 7 files changed, 127 insertions(+), 12 deletions(-)
 create mode 100644 awwwards_ss3/src/components/Contact.jsx
 create mode 100644 awwwards_ss3/src/components/Strategy.jsx

diff --git a/awwwards_ss3/src/App.jsx b/awwwards_ss3/src/App.jsx
index c295fd9..88df43d 100644
--- a/awwwards_ss3/src/App.jsx
+++ b/awwwards_ss3/src/App.jsx
@@ -1,21 +1,25 @@
 import About from "./components/About"
+import Contact from "./components/Contact"
 import Header from "./components/Header"
 import Home from "./components/Home"
 import Philosophy from "./components/Philosophy"
+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/>
+      {/*<PreLoader/>*/}
       <Header/>
       <Home/>
       <About/>
       <Visions/>
       <Philosophy/>
+      <Strategy/>
+      <Contact/>
     </div>
   )
 }
diff --git a/awwwards_ss3/src/components/About.jsx b/awwwards_ss3/src/components/About.jsx
index ae14217..984b737 100644
--- a/awwwards_ss3/src/components/About.jsx
+++ b/awwwards_ss3/src/components/About.jsx
@@ -4,7 +4,7 @@ import { PiArrowElbowRightDown} from "react-icons/pi";
 const About = () => {
     
   return (
-    <div className="px-14 mt-[120px]">
+    <div className="px-14 mt-[5vw]">
         <div className="flex-col text-3xl">
             <p>Full service digital agency.</p>
             <div className="flex justify-between">
diff --git a/awwwards_ss3/src/components/Contact.jsx b/awwwards_ss3/src/components/Contact.jsx
new file mode 100644
index 0000000..b50e2df
--- /dev/null
+++ b/awwwards_ss3/src/components/Contact.jsx
@@ -0,0 +1,81 @@
+import {motion} from "framer-motion"
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { PiArrowElbowRightDown } from "react-icons/pi";
+
+
+const Contact = () => {
+  const slideAuto = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+
+  const slider = {
+    initial:{x: 0,},
+    animate:{x: "-100%",  transition:{ease: "linear", repeat: Infinity, duration: 50},},
+  };
+  
+  return (
+    <div className="w-full">
+      <div className="px-14">
+        <div className="flex 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]">
+        <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            </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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </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>
+    </div>
+  )
+}
+
+export default Contact
\ No newline at end of file
diff --git a/awwwards_ss3/src/components/Philosophy.jsx b/awwwards_ss3/src/components/Philosophy.jsx
index 852b794..7279b57 100644
--- a/awwwards_ss3/src/components/Philosophy.jsx
+++ b/awwwards_ss3/src/components/Philosophy.jsx
@@ -1,6 +1,6 @@
 const Philosophy = () => {
   return (
-    <div className="w-full h-screen ">
+    <div className="w-full">
         <div className="flex-col text-3xl px-14">
             <p>We operate on a simple philosophy:</p>
             <p>Quality over quantity.</p>
@@ -13,7 +13,20 @@ const Philosophy = () => {
             </div>
         </div>
         <div className="flex flex-col justify-center items-center">
-            <div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">
+            <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">
+                <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">
+                <circle cx="50" cy="1" r="1" fill="#fff"></circle>
+            </svg>
+            <div className="absolute text-center text-white">
+                <p className="text-7xl">3 seats</p>
+                <p className="text-3xl">available for 2024</p>
+            </div>
+            {/*gradient option*/}
+            {/*<div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">
                 <div className="gradients-container">
                     <div className="gradient1"></div>
                     <div className="gradient2"></div>
@@ -25,7 +38,7 @@ const Philosophy = () => {
             <div className="absolute text-center">
                 <h1 className="text-[4vw] leading-none text-white mt-20">3 seats</h1>
                 <p className="text-[1.4vw] text-white">available for 2024</p>
-            </div>
+            </div>*/}
         </div>
     </div>
   )
diff --git a/awwwards_ss3/src/components/Strategy.jsx b/awwwards_ss3/src/components/Strategy.jsx
new file mode 100644
index 0000000..adc97f7
--- /dev/null
+++ b/awwwards_ss3/src/components/Strategy.jsx
@@ -0,0 +1,19 @@
+const Strategy = () => {
+  return (
+    <div className="w-full px-14 mb-[12vw] mt-[5vw]">
+        <div className="flex-col text-3xl">
+            <p>Strategy & emotion.</p>
+            <p>You need both.</p>
+            <div className="border-[#555555] border-t-2 mt-2"></div>
+        </div>
+        <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 
+                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>
+    </div>
+  )
+}
+
+export default Strategy
\ No newline at end of file
diff --git a/awwwards_ss3/src/components/Visions.jsx b/awwwards_ss3/src/components/Visions.jsx
index 2a824e9..4c7d89f 100644
--- a/awwwards_ss3/src/components/Visions.jsx
+++ b/awwwards_ss3/src/components/Visions.jsx
@@ -42,10 +42,8 @@ const Visions = () => {
     ]
   }
 
-
   return (
-
-    <div className="w-full h-screen">
+    <div className="w-full mb-[12vw]">
         <div className="flex justify-between text-3xl tracking-tight px-14 mb-5">
             <p>Transforming visions into brands.</p>
             <a href="" className="flex gap-2">
diff --git a/awwwards_ss3/src/index.css b/awwwards_ss3/src/index.css
index 4256382..b8182c0 100644
--- a/awwwards_ss3/src/index.css
+++ b/awwwards_ss3/src/index.css
@@ -84,8 +84,8 @@ body{
 .text:hover{
     color: #FF5F38;  
 }
-/*==========*/
-.gradient-bg{
+/*===== gradient =====*/
+/*.gradient-bg{
     position: relative;
     overflow: hidden;
     background: radial-gradient(circle, #FF5F38, #FAF8F3, #FAF8F3);
@@ -175,7 +175,7 @@ body{
     100% {
       transform: translateX(50%) translateY(10%);
     }
-}
+}*/
 /*==========*/