added contact section
This commit is contained in:
parent
1065aa65d3
commit
b27971cf18
7 changed files with 127 additions and 12 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
81
awwwards_ss3/src/components/Contact.jsx
Normal file
81
awwwards_ss3/src/components/Contact.jsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
19
awwwards_ss3/src/components/Strategy.jsx
Normal file
19
awwwards_ss3/src/components/Strategy.jsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
/*==========*/
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue