added footer & updated animation
This commit is contained in:
parent
b27971cf18
commit
a30de8207d
10 changed files with 310 additions and 27 deletions
172
awwwards_ss3/package-lock.json
generated
172
awwwards_ss3/package-lock.json
generated
|
|
@ -11,9 +11,11 @@
|
|||
"framer-motion": "^11.0.27",
|
||||
"gsap": "^3.12.5",
|
||||
"react": "^18.2.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-scroll-trigger": "^0.6.14",
|
||||
"react-slick": "^0.30.2",
|
||||
"slick-carousel": "^1.8.1"
|
||||
},
|
||||
|
|
@ -941,6 +943,18 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/source-map": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
|
|
@ -1252,11 +1266,21 @@
|
|||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
|
||||
"integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
|
||||
"dev": true
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.75",
|
||||
|
|
@ -1277,6 +1301,11 @@
|
|||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
|
||||
},
|
||||
"node_modules/@ungap/structured-clone": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
|
||||
|
|
@ -1654,6 +1683,14 @@
|
|||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||
}
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
|
||||
|
|
@ -1766,6 +1803,11 @@
|
|||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
||||
},
|
||||
"node_modules/clean-react-props": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-react-props/-/clean-react-props-0.4.0.tgz",
|
||||
"integrity": "sha512-8KKm9sC/cUax4SBWwSY5a3W44aJKOUQg39Bo3fRErp3/mF8D1kMN9xc1lvQGmvkK/AmpH2Xh/UYVZOJMcxoy9w=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
|
@ -1802,6 +1844,11 @@
|
|||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/countup.js": {
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
|
||||
"integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
@ -1831,8 +1878,7 @@
|
|||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/data-view-buffer": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -3579,6 +3625,11 @@
|
|||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
|
|
@ -3711,7 +3762,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -4177,7 +4227,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
@ -4224,6 +4273,17 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-countup": {
|
||||
"version": "6.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
|
||||
"integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
|
||||
"dependencies": {
|
||||
"countup.js": "^2.8.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
|
|
@ -4247,8 +4307,7 @@
|
|||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.0",
|
||||
|
|
@ -4289,6 +4348,44 @@
|
|||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scroll-trigger": {
|
||||
"version": "0.6.14",
|
||||
"resolved": "https://registry.npmjs.org/react-scroll-trigger/-/react-scroll-trigger-0.6.14.tgz",
|
||||
"integrity": "sha512-Z7l9CMJTU4uPArv/3XaJzCtSej+JeLpbev1X7JxAmZwGf16ya5mxqjeeQ/5O4thvOVK0ZWhgyQf52tH1hg1O7Q==",
|
||||
"dependencies": {
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"clean-react-props": "^0.4.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ryanhefner"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15",
|
||||
"react-dom": ">=15"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scroll-trigger/node_modules/@types/react": {
|
||||
"version": "16.14.60",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.60.tgz",
|
||||
"integrity": "sha512-wIFmnczGsTcgwCBeIYOuy2mdXEiKZ5znU/jNOnMZPQyCcIxauMGWlX0TNG4lZ7NxRKj7YUIZRneJQSSdB2jKgg==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "^0.16",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scroll-trigger/node_modules/@types/react-dom": {
|
||||
"version": "16.9.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",
|
||||
"integrity": "sha512-Gcmq2JTDheyWn/1eteqyzzWKSqDjYU6KYsIvH7thb7CR5OYInAWOX+7WnKf6PaU/cbdOc4szJItcDEJO7UGmfA==",
|
||||
"dependencies": {
|
||||
"@types/react": "^16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-slick": {
|
||||
"version": "0.30.2",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
|
||||
|
|
@ -4630,6 +4727,29 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support/node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"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",
|
||||
|
|
@ -4958,6 +5078,34 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.30.3",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
|
||||
"integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.8.2",
|
||||
"commander": "^2.20.0",
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
"bin": {
|
||||
"terser": "bin/terser"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/terser/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
|
@ -5129,6 +5277,14 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "5.26.5",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
|
||||
|
|
|
|||
|
|
@ -13,9 +13,11 @@
|
|||
"framer-motion": "^11.0.27",
|
||||
"gsap": "^3.12.5",
|
||||
"react": "^18.2.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-scroll-trigger": "^0.6.14",
|
||||
"react-slick": "^0.30.2",
|
||||
"slick-carousel": "^1.8.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import About from "./components/About"
|
||||
import Contact from "./components/Contact"
|
||||
import Footer from "./components/Footer"
|
||||
import Header from "./components/Header"
|
||||
import Home from "./components/Home"
|
||||
import Philosophy from "./components/Philosophy"
|
||||
|
|
@ -20,6 +21,7 @@ function App() {
|
|||
<Philosophy/>
|
||||
<Strategy/>
|
||||
<Contact/>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
import { useState } from "react";
|
||||
import { PiArrowElbowRightDown} from "react-icons/pi";
|
||||
|
||||
import ScrollTrigger from "react-scroll-trigger"
|
||||
|
||||
const About = () => {
|
||||
const [counterOn, setCounterOn] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="px-14 mt-[5vw]">
|
||||
<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>
|
||||
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
|
||||
<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>
|
||||
{counterOn && <div className="line mt-2 relative"></div>}
|
||||
</div>
|
||||
<div className="border-[#555555] border-t-2 mt-2"></div>
|
||||
</div>
|
||||
</ScrollTrigger>
|
||||
<div className="flex flex-col justify-between">
|
||||
<div>
|
||||
<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
|
||||
|
|
|
|||
56
awwwards_ss3/src/components/Footer.jsx
Normal file
56
awwwards_ss3/src/components/Footer.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { FaXTwitter } from "react-icons/fa6";
|
||||
import { GoArrowUpRight } from "react-icons/go";
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='w-full h-[60vh] bg-[#0E0E0E] text-white px-14 flex flex-col justify-between'>
|
||||
<div className="flex justify-between mt-[8vh]">
|
||||
<div>
|
||||
<p className=' text-3xl'>Relax. We've got you.</p>
|
||||
<button className="mt-[1.5vw] px-6 py-4 border text-xl rounded-lg hover:bg-[#FAF8F3] hover:text-black hover:transition-transform duration-500">Take a seat</button>
|
||||
</div>
|
||||
<div className="flex gap-[5vw] text-xl">
|
||||
<div className="flex flex-col ">
|
||||
<a href="">Home</a>
|
||||
<a href="">Work</a>
|
||||
<a href="">About</a>
|
||||
<a href="">Services & Models</a>
|
||||
<a href="">Contact</a>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<a href="" className="flex"><FaXTwitter/><GoArrowUpRight className="text-md"/></a>
|
||||
<a href="" className="flex">Instagram <GoArrowUpRight className="text-md"/></a>
|
||||
<a href="" className="flex">LinkedIn <GoArrowUpRight className="text-md"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between ">
|
||||
<div className="text-xl">
|
||||
<p>San Diego—California</p>
|
||||
<p>Paris—France </p>
|
||||
</div>
|
||||
<div className="flex gap-[5vw] text-xl">
|
||||
<div className="flex flex-col">biz@rejouice.com</div>
|
||||
<div className="flex flex-col">©2023 legal</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="preloader w-full bg-[#0E0E0E] text-[#FAF8F3] flex justify-center items-center text-center">
|
||||
<h1 className="texts-container leading-none tracking-tighter font-semibold">
|
||||
<span className="text-[24vw]">r</span>
|
||||
<span className="text-[24vw]">e</span>
|
||||
<span className="text-[18vw]">J</span>
|
||||
<span className="text-[18vw]">O</span>
|
||||
<span className="text-[18vw]">U</span>
|
||||
<span className="text-[18vw]">I</span>
|
||||
<span className="text-[18vw]">C</span>
|
||||
<span className="text-[24vw]">e</span>
|
||||
</h1>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Navbar from './Navbar';
|
||||
|
||||
|
|
@ -23,9 +23,31 @@ const Header = () => {
|
|||
transition: {duration: 0.35}
|
||||
}
|
||||
}
|
||||
//Scrollable Navbar
|
||||
const [prevScrollpos, setPrevScrollpos] = useState(window.pageYOffset);
|
||||
const [top, setTop] = useState(0);
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
if (prevScrollpos > currentScrollPos) {
|
||||
setTop(0); // Show navbar
|
||||
} else {
|
||||
setTop(-100); // Hide navbar
|
||||
}
|
||||
setPrevScrollpos(currentScrollPos);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [prevScrollpos]);
|
||||
|
||||
const navbarStyle = {
|
||||
top: `${top}px`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`w-[100%] fixed z-40 ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`}>
|
||||
<div className={`w-[100%] fixed z-40 ${(changeColor === true) ? 'bg-[#FF5F38] ' : 'bg-transparent delay-[0.9s] transition duration-[1] ease-in'}`} style={navbarStyle}>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
import { useState } from "react"
|
||||
import CountUp from "react-countup"
|
||||
import ScrollTrigger from "react-scroll-trigger"
|
||||
|
||||
|
||||
const Philosophy = () => {
|
||||
const [counterOn, setCounterOn] = useState(false);
|
||||
|
||||
return (
|
||||
<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>
|
||||
<div className="border-[#555555] border-t-2 mt-2"></div>
|
||||
</div>
|
||||
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
|
||||
<div className="flex-col text-3xl px-14">
|
||||
<p>We operate on a simple philosophy:</p>
|
||||
<p>Quality over quantity.</p>
|
||||
{counterOn && <div className="line mt-2 relative"></div>}
|
||||
</div>
|
||||
</ScrollTrigger>
|
||||
<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
|
||||
|
|
@ -22,7 +31,11 @@ const Philosophy = () => {
|
|||
<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>
|
||||
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
|
||||
<p className="text-7xl" >
|
||||
{counterOn && <CountUp start={0} end={3} duration={3} delay={0}/>}
|
||||
seats</p>
|
||||
</ScrollTrigger>
|
||||
<p className="text-3xl">available for 2024</p>
|
||||
</div>
|
||||
{/*gradient option*/}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
import { useState } from "react"
|
||||
import ScrollTrigger from "react-scroll-trigger"
|
||||
|
||||
const Strategy = () => {
|
||||
const [counterOn, setCounterOn] = useState(false);
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full px-14 mb-[12vw] mt-[5vw]">
|
||||
<ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
|
||||
<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>
|
||||
{counterOn && <div className="line mt-2 relative"></div>}
|
||||
</div>
|
||||
</ScrollTrigger>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect } from "react"
|
||||
import {preLoaderAnim} from "../preloader/PreloadAnimatiom"
|
||||
import { preLoaderAnim } from "../preloader/PreloadAnimatiom"
|
||||
|
||||
|
||||
const PreLoader = () => {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
src: local("NB-International-Pro-Bold"), url("./assets/NB-International-Pro-Bold.ttf") format("opentype");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
html{
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body{
|
||||
background-color: #FAF8F3;
|
||||
color: #0E0E0E;
|
||||
|
|
@ -84,6 +86,24 @@ body{
|
|||
.text:hover{
|
||||
color: #FF5F38;
|
||||
}
|
||||
/*==========*/
|
||||
.line::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
border-bottom: solid 2px #555555;
|
||||
animation: border_animation 3s linear forwards;
|
||||
}
|
||||
@keyframes border_animation{
|
||||
0%{
|
||||
width: 0%;
|
||||
}
|
||||
100%{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/*===== gradient =====*/
|
||||
/*.gradient-bg{
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue