added vision and philosophy section

awwwards_ss3/package-lock.json

@@ -13,7 +13,9 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
-        "react-router-dom": "^6.22.3"
+        "react-router-dom": "^6.22.3",
+        "react-slick": "^0.30.2",
+        "slick-carousel": "^1.8.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -1759,6 +1761,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1977,6 +1984,11 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -3416,6 +3428,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3463,6 +3481,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -3542,6 +3568,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4258,6 +4289,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4318,6 +4365,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -4561,6 +4613,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4570,6 +4630,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",

awwwards_ss3/package.json

@@ -15,7 +15,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

awwwards_ss3/src/App.jsx

@@ -1,6 +1,8 @@
 import About from "./components/About"
 import Header from "./components/Header"
 import Home from "./components/Home"
+import Philosophy from "./components/Philosophy"
+import Visions from "./components/Visions"
 import PreLoader from "./components/preloader/PreLoader"
 
 
@@ -12,6 +14,8 @@ function App() {
       <Header/>
       <Home/>
       <About/>
+      <Visions/>
+      <Philosophy/>
     </div>
   )
 }

awwwards_ss3/src/components/About.jsx

@@ -1,6 +1,8 @@
-import { PiArrowElbowRightDown, PiArrowElbowDownRightLight } from "react-icons/pi";
+import { PiArrowElbowRightDown} from "react-icons/pi";
+
 
 const About = () => {
+    
   return (
     <div className="px-14 mt-[120px]">
         <div className="flex-col text-3xl">
@@ -11,12 +13,12 @@ const About = () => {
             </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="flex flex-col justify-between">
-            <div className="mr-20">
+            <div>
-                <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
+                <p className="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=" mt-[20vw] mb-[12vw]">
                 <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>
@@ -28,15 +30,6 @@ const About = () => {
                     <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>
   )
 }

awwwards_ss3/src/components/Philosophy.jsx

@@ -0,0 +1,34 @@
+const Philosophy = () => {
+  return (
+    <div className="w-full h-screen ">
+        <div className="flex-col text-3xl px-14">
+            <p>We operate on a simple philosophy:</p>
+            <p>Quality over quantity.</p>
+            <div className="border-[#555555] border-t-2 mt-2"></div>
+        </div>
+        <div className="flex flex-col justify-between px-14">
+            <div>
+                <p className="mt-5 text-[4vw] leading-[4.3vw] tracking-tight justify-center indent-40" >We collaborate with five clients each year. This allows for intense focus on the trabsformation and 
+                launch of you brand by our very best team, which is the only team we have.</p>
+            </div>
+        </div>
+        <div className="flex flex-col justify-center items-center">
+            <div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">
+                <div className="gradients-container">
+                    <div className="gradient1"></div>
+                    <div className="gradient2"></div>
+                    <div className="gradient3"></div>
+                    <div className="gradient4"></div>
+                    <div className="gradient5"></div>
+                </div>
+            </div>
+            <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>
+  )
+}
+
+export default Philosophy

awwwards_ss3/src/components/Visions.jsx

@@ -0,0 +1,76 @@
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import {PiArrowElbowDownRightLight } from "react-icons/pi";
+
+
+const Visions = () => {
+
+  const slideSettings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          initialSlide: 0,
+          infinite: true,
+          dots: false
+        }
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 2
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1
+        }
+      }
+    ]
+  }
+
+
+  return (
+
+    <div className="w-full h-screen">
+        <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">
+                <PiArrowElbowDownRightLight className="text-2xl"/>
+                <p className="btn">See the work</p>
+            </a>
+        </div>
+        <div className=" px-10">
+          <Slider {...slideSettings}>
+            <div className="relative overflow-hidden">
+              <img src="https://images.prismic.io/rejouice/d8e1fa1f-4f24-41e1-a249-098c62df5aff_Group+46+%281%29.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
+              <video src="../src/assets/Website-homepage-Work-01_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
+            </div>
+            <div className="relative overflow-hidden">
+              <img src="https://images.prismic.io/rejouice/e0350a3d-c390-4d97-af1a-5c86bc822b52_Group+3929.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
+              <video src="../src/assets/Website-homepage-Work-02_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
+            </div>
+            <div className="relative overflow-hidden">
+              <img src="https://images.prismic.io/rejouice/2874f084-ec6c-4a19-b025-a55c1e6db929_Group+3692.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
+              <video src="../src/assets/Website-homepage-Work-03_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
+            </div>
+          </Slider>
+        </div>
+    </div>
+  )
+}
+
+export default Visions

awwwards_ss3/src/index.css

@@ -1,6 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@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;
+}
 
 body{
     background-color: #FAF8F3;
@@ -34,7 +39,7 @@ body{
     transform: scaleX(1);
     transform-origin: bottom left;
 }
-
+/*==========*/
 .btn-about::before{
     content: '';
     position: absolute;
@@ -63,36 +68,121 @@ body{
     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%;
     background-position: right bottom;
     transition: all .5s ease-out;
 }
-.btn-1:hover {
+.btn-1:hover{
     background-position: left bottom;
 }
-.text {
+.text{
     transition: all .6s ease-out;
 }
-.text:hover {
+.text:hover{
     color: #FF5F38;  
 }
-
+/*==========*/
-
+.gradient-bg{
-
+    position: relative;
-
+    overflow: hidden;
-
+    background: radial-gradient(circle, #FF5F38, #FAF8F3, #FAF8F3);
-
-@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) {
+.gradients-container{
+    filter: blur(40px) ;
+    width: 100%;
+    height: 100%;
+}
+.gradient1{
+    position: absolute;
+    background: radial-gradient(circle, rgba(18, 101, 255, 0.808) 0, rgba(18, 113, 255, 0) 50%) no-repeat;
+    mix-blend-mode: normal;
+    width: 80%;
+    height: 80%;
+    top: calc(50% - 80% / 2);
+    left: calc(50% - 80% / 2);
+    transform-origin: center center;
+    animation: moveVertical 30s ease infinite;
+    opacity: 1;
+}
+.gradient2{
+    position: relative;
+    background: radial-gradient(circle at center, rgba(52, 81, 247, 0.884) 0, rgba(221, 74, 255, 0) 50%) no-repeat;
+    mix-blend-mode: hard-light;
+    width: 80%;
+    height: 80%;
+    top: calc(50% - 80% / 2);
+    right: calc(50% - 90% / 2);
+    transform-origin: calc(50% - 400px);
+    animation: moveVertical 20s reverse infinite;
+    opacity: 1;
+}
+.gradient3{
+    position: relative;
+    background: radial-gradient(circle at left, rgba(115, 39, 236, 0.603) 0, rgba(100, 220, 255, 0) 50%) no-repeat;
+    mix-blend-mode: normal;
+    width: 80%;
+    height: 80%;
+    transform-origin: calc(50% + 500px);
+    animation: moveHorizontal 40s linear infinite;
+    opacity: 1;
+}
+.gradient4 {
+    position: relative;
+    background: radial-gradient(circle at top, rgba(233, 118, 10, 0.938) 0, rgba(200, 50, 50, 0) 50%) no-repeat;
+    mix-blend-mode: hard-light;
+    width: 80%;
+    height: 80%;
+    top: calc(50% - 60% / 2);
+    left: calc(50% - 80% / 2);
+    transform-origin: calc(50% - 100px);
+    animation: moveHorizontal 40s ease infinite;
+    opacity: 0.7;
+}
+.gradient5 {
+    position: relative;
+    background: radial-gradient(circle at bottom, rgba(29, 112, 236, 0.8) 0, rgba(180, 180, 50, 0) 50%) no-repeat;
+    mix-blend-mode: hard-light;
+    width: calc(80% * 2);
+    height: calc(80% * 2);
+    left: calc(50% - 50%);
+    transform-origin: calc(50% - 800px) calc(50% + 100px);
+    animation: moveVertical 20s ease infinite;
+    opacity: 1;
+}
+ 
+@keyframes moveVertical {
+    0% {
+      transform: translateY(10%);
+    }
+    50% {
+      transform: translateY(20%);
+    }
+    100% {
+      transform: translateY(10%);
+    }
+}
+  
+@keyframes moveHorizontal {
+    0% {
+      transform: translateX(-50%) translateY(10%);
+    }
+    50% {
+      transform: translateX(20%) translateY(20%);
+    }
+    100% {
+      transform: translateX(50%) translateY(10%);
+    }
+}
+/*==========*/
+
+
+
+/*========== Responsive ==========*/
+@media (min-width: 1000px){
     .video-container{
         display: block;
     }
-}
+}
-