-
We are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity +
+
+
- 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.
+
-
)
}
diff --git a/awwwards_ss3/src/components/Philosophy.jsx b/awwwards_ss3/src/components/Philosophy.jsx
new file mode 100644
index 0000000..852b794
--- /dev/null
+++ b/awwwards_ss3/src/components/Philosophy.jsx
@@ -0,0 +1,34 @@
+const Philosophy = () => {
+ return (
+ Agency & Venture
Models @@ -28,15 +30,6 @@ const About = () => { and engagement models
-
-
- Transforming visions into brands.
- -See the work
- -
+
+ )
+}
+
+export default Philosophy
\ No newline at end of file
diff --git a/awwwards_ss3/src/components/Visions.jsx b/awwwards_ss3/src/components/Visions.jsx
new file mode 100644
index 0000000..2a824e9
--- /dev/null
+++ b/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 (
+
+
+
+ We operate on a simple philosophy:
+Quality over quantity.
+ +
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3 seats
+available for 2024
+
+
+ )
+}
+
+export default Visions
\ No newline at end of file
diff --git a/awwwards_ss3/src/index.css b/awwwards_ss3/src/index.css
index a41d0ae..4256382 100644
--- a/awwwards_ss3/src/index.css
+++ b/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;
}
-
-
-
-
-
-
-@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;
+/*==========*/
+.gradient-bg{
+ position: relative;
+ overflow: hidden;
+ background: radial-gradient(circle, #FF5F38, #FAF8F3, #FAF8F3);
}
-@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;
}
-}
-
+}
\ No newline at end of file
+
+ Transforming visions into brands.
+ +See the work
+ +
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+