updated responsive
This commit is contained in:
parent
4ae90daf2c
commit
bdaa6b64c5
12 changed files with 126 additions and 182 deletions
|
|
@ -1,5 +1,4 @@
|
|||
# In this project, we recreate the design of OCHI design (https://ochi.design/) by using Vite + React.
|
||||
#### Start project --> npm run dev
|
||||
#
|
||||
P.S. This is a non-responsive website
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import FeaturedProjects from "./components/FeaturedProjects"
|
|||
import Footer from "./components/Footer"
|
||||
import Ready from "./components/Ready"
|
||||
import LocomotiveScroll from 'locomotive-scroll';
|
||||
import ScrollDown from "./components/ScrollDown"
|
||||
|
||||
|
||||
|
||||
|
|
@ -18,7 +17,6 @@ const App = () => {
|
|||
<div className="w-full h-screen bg-[#F1F1F1] text-[#212121]">
|
||||
<Navbar/>
|
||||
<Hero/>
|
||||
<ScrollDown/>
|
||||
<TextAnimation/>
|
||||
<About/>
|
||||
<Eyes/>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,22 @@ const About = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.15" className='about-text w-full pt-20 pb-20 bg-[#CDEA68] rounded-t-3xl'>
|
||||
<div data-scroll data-scroll-speed="-0.15" className='about-text w-full pt-[4vw] pb-[4vw] bg-[#CDEA68] rounded-t-3xl'>
|
||||
<div className="max-w-[1600px]">
|
||||
<h1 className="text-[3.2vw] leading-[4vw] tracking-tight px-16">Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products,
|
||||
<h1 className="text-[14px] sm:text-[3.2vw] leading-[4vw] tracking-tight px-[2vw] lg:px-[3.3vw]">Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products,
|
||||
explain complex ideas, and hire great people. </h1>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-[2vw]"></div>
|
||||
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-10"></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3">
|
||||
<div className="text-[1vw]">What you can expect:</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="text-[1vw] pr-10">
|
||||
<div className="w-[100vw] sm:w-[50vw] xl:w-full px-[2vw] lg:px-[3.3vw] mt-5 flex flex-col xl:grid xl:grid-cols-2 gap-3">
|
||||
<div className="text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw]">What you can expect:</div>
|
||||
<div className="flex flex-col xl:grid 2xl:grid-cols-2">
|
||||
<div className="text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw] pr-[2vw]">
|
||||
<p className=" mb-5">We create tailored presentations to help you persuade your colleagues, clients, or investors.
|
||||
Whether it’s live or digital, delivered for one or a hundred people. </p> <br />
|
||||
<p>We believe the mix of strategy and design (with a bit of coffee) is what makes your message clear, convincing, and captivating.</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center text-[1vw] mx-40 -mb-20">
|
||||
<div className="flex flex-col justify-center text-[14px] sm:text-[2vw] md:text-[1.5vw] xl:text-[1vw] mx-0 2xl:mx-40 mt-10 2xl:mt-1 -mb-20">
|
||||
<p className="mb-4">S:</p>
|
||||
<p>Instagram </p>
|
||||
<p>Behance </p>
|
||||
|
|
@ -32,15 +31,15 @@ const About = () => {
|
|||
|
||||
<div className="border-t-[1px] border-[#98AC52] mt-40"></div>
|
||||
|
||||
<div className="flex px-16 mt-5">
|
||||
<div className=" w-1/2">
|
||||
<p className="text-7xl text-[#212121] mb-8">Our approach:</p>
|
||||
<div className="h-[50vh] md:h-[70vh] flex flex-col lg:flex lg:flex-row px-[2vw] lg:px-[3.3vw] mt-5">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<p className="text-[3.75vw] text-[#212121] mb-[1.6vw]">Our approach:</p>
|
||||
<button className="btn flex justify-center items-center gap-8">
|
||||
<p className="text-[19px] uppercase">Read More</p>
|
||||
<span className="w-3 h-3 bg-white rounded-full"></span>
|
||||
<p className="text-[1vw] uppercase">Read More</p>
|
||||
<span className="w-2 md:w-3 h-2 md:h-3 bg-white rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-1/2 h-[70vh]"><img src={imgModel} alt="" className="rounded-xl h-full "/></div>
|
||||
<div className="w-full lg:w-1/2 h-[40vh] md:h-[50vh] xl:h-[60vh] 2xl:h-[70vh] mt-4 lg:mt-0"><img src={imgModel} alt="" className="rounded-xl h-full "/></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,17 +22,17 @@ const Eyes = () => {
|
|||
<div className="flex gap-10 absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[80%]">
|
||||
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
|
||||
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
|
||||
<p className="text-white uppercase text-3xl">play</p>
|
||||
<p className="text-white uppercase text-sm sm:text-[xl] 2xl:text-3xl">play</p>
|
||||
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
|
||||
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
<div className="w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-[15vw] h-[15vw] bg-[#F4F4F4] rounded-full">
|
||||
<div className="flex items-center justify-center relative w-3/5 h-3/5 bg-[#212121] rounded-full">
|
||||
<p className="text-white uppercase text-3xl">play</p>
|
||||
<p className="text-white uppercase text-sm sm:text-[xl] 2xl:text-3xl">play</p>
|
||||
<div style={{transform: `translate(-50%, -50%) rotate(${rotate}deg)`}} className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-[25px]">
|
||||
<div className="w-[25px] h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
<div className="w-[15px] h-[15px] sm:w-[25px] sm:h-[25px] bg-[#F4F4F4] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,230 +12,184 @@ const FeaturedProjects = () => {
|
|||
featureTop[index].start({y: "100%"})
|
||||
}
|
||||
|
||||
const featurebottom = [useAnimation(), useAnimation()]
|
||||
const handleHoverTextStart = (index) => {
|
||||
featurebottom[index].start({y: "0"})
|
||||
}
|
||||
const handleHoverTextEnd = (index) => {
|
||||
featurebottom[index].start({y: "100%"})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.1" className="w-full pt-20 pb-20 bg-[#f1f1f1] rounded-t-3xl">
|
||||
<div className="px-16">
|
||||
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Feature projects</h1>
|
||||
<div data-scroll data-scroll-speed="-0.1" className="w-full pt-[4vw] pb-[40vw] bg-[#f1f1f1] rounded-t-3xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<h1 className="pt-[2vw] text-[8vw] leading-none lg:text-7xl text-[#212121] tracking-tight">Feature projects</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16"></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw]"></div>
|
||||
|
||||
<div className="px-16">
|
||||
<div className="w-full flex gap-5 mt-20">
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<div className="w-full flex flex-col md:flex md:flex-row gap-5 mt-[4vw]">
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>fyde</p>
|
||||
<motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className=" h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
<motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute hidden md:flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"fyde".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<h1 className="md:hidden w-full flex justify-center top-[45%] absolute z-10 text-[8vw] uppercase font-bold text-[#CDEA68] tracking-tight ">fyde</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/10/Fyde_Illustration_Crypto_2-663x551.png"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-5 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">audit</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">copywriting</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">sales desk</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">slides design</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">audit</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">copywriting</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">sales desk</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">slides design</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>vise</p>
|
||||
<motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="h-[80vh] relative">
|
||||
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
<motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative">
|
||||
<h1 className="feature-text absolute hidden md:flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"vise".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[1]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<h1 className="md:hidden w-full flex justify-center top-[45%] absolute z-10 text-[8vw] uppercase font-bold text-[#CDEA68] tracking-tight ">vise</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/09/Vise_front2-663x551.jpg"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-5 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">agency</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">company presentations</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">agency</span>
|
||||
<span className="border border-[#212121] px-[1vw] py-[0.5vw] text-[1vw] uppercase tracking-tight rounded-full">company presentations</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-16">
|
||||
<div className="w-full flex gap-5 mt-20">
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>trawa</p>
|
||||
<motion.div onHoverStart={() => handleHoverTextStart(0)} onHoverEnd={() => handleHoverTextEnd(0)} className=" h-[80vh] relative">
|
||||
<h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"trawa".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/08/Frame-3875-663x551.jpg"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-16 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand identity</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">design research</span>
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">investor desk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-col w-1/2">
|
||||
<p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>Premium Blend</p>
|
||||
<motion.div onHoverStart={() => handleHoverTextStart(1)} onHoverEnd={() => handleHoverTextEnd(1)} className="h-[80vh] relative">
|
||||
<h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
|
||||
{"Premium Blend".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[1]} transition={{ease: Power4.ease, delay: index*0.01}} key={item} className="inline-block">{item}</motion.span>)}
|
||||
</h1>
|
||||
<div className="w-full h-full rounded-xl overflow-hidden">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/12/PB-Front-4-663x551.png"} alt="" className="w-full h-full"/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex gap-2 mt-16 items-center text-center">
|
||||
<span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand template</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-center items-center text-center px-16 mt-40">
|
||||
|
||||
<div className="flex justify-center items-center text-center px-[2vw] lg:px-[3.3vw] mt-[2vw]">
|
||||
<button className="btn flex justify-center items-center gap-8">
|
||||
<p className="text-[19px] uppercase">view all case studies</p>
|
||||
<span className="w-3 h-3 bg-white rounded-full"></span>
|
||||
<p className="text-[1vw] xl:text-[19px] uppercase">view all case studies</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/*===== review section =====*/}
|
||||
<div className="about-text">
|
||||
<div className="px-16">
|
||||
<h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Clients’ reviews</h1>
|
||||
<div className="px-[2vw] lg:px-[3.3vw]">
|
||||
<h1 className="pt-[5vw] text-[8vw] leading-none lg:text-7xl text-[#212121] tracking-tight">Clients’ reviews</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw]"></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 flex flex-col lg:grid lg:grid-cols-2 gap-3 text-md xl:text-xl">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2">
|
||||
<p className="">Karman Ventures </p>
|
||||
<div className="">
|
||||
<p className="mb-20">Services:</p>
|
||||
<button className="btn-review uppercase mb-3 ">investor desk </button> <br />
|
||||
<button className="btn-review uppercase mb-3">sales desk </button>
|
||||
<p className="mb-[4vw] mt-5 lg:mt-0">Services:</p>
|
||||
<button className="btn-review uppercase mb-3 text-sm xl:text-xl">investor desk </button> <br />
|
||||
<button className="btn-review uppercase mb-3 text-sm xl:text-xl">sales desk </button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<p className="mb-20">William Barnes</p>
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[130px] rounded-xl"/>
|
||||
<p className="mt-10 w-2/3">They were transparent about the time and the stages of the project. The end product is high quality,
|
||||
<p className="mb-[4vw]">William Barnes</p>
|
||||
<img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[100px] xl:w-[130px] rounded-xl"/>
|
||||
<p className="mt-10 w-4/4 lg:w-3/4 text-sm xl:text-xl">They were transparent about the time and the stages of the project. The end product is high quality,
|
||||
and I feel confident about how they were handholding the client through the process.
|
||||
I feel like I can introduce them to someone who needs to put a sales deck together from scratch, and they would be able to handhold the client experience
|
||||
from 0 to 100 very effectively from story to design. 5/5</p>
|
||||
</div>
|
||||
<p className="text-xl text-gray-400 uppercase">read</p>
|
||||
<p className="hidden lg:flex lg:text-xl text-gray-400 uppercase">read</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-[3.3vw] "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Planetly</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Nina Walloch</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Workiz Easy </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Tomer Levy</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Premium Blend </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Ellen Kim</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Hypercare Systems </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Brendan Goss</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Officevibe </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Raff Labrie</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Orderlion </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Stefan Strohmer</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Black Book </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Jaci Smith</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
|
||||
<div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-5 grid grid-cols-2 gap-3 text-md sm:text-lg lg:text-xl">
|
||||
<div>
|
||||
<p>Trawa Energy </p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>David Budde</p>
|
||||
<p className="uppercase">read</p>
|
||||
<p className="uppercase text-xs sm:text-sm lg:text-xl">read</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
|
||||
</div>
|
||||
|
||||
{/*===== cardHero section =====*/}
|
||||
<div className="grid grid-cols-2 gap-5 px-16 pt-40 pb-40 bg-[#f1f1f1]">
|
||||
<div className="w-full h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
|
||||
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-5 px-[2vw] lg:px-[3.3vw] pt-[8.5vw] bg-[#f1f1f1]">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
|
||||
<svg width="150" height="80" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="#CDEA68"></path>
|
||||
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="#CDEA68"></path>
|
||||
|
|
@ -243,16 +197,16 @@ const FeaturedProjects = () => {
|
|||
<path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="#CDEA68"></path>
|
||||
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="#CDEA68"></path>
|
||||
</svg>
|
||||
<button className="absolute left-10 bottom-10 py-1 px-4 border border-[#CDEA68] rounded-full text-[#CDEA68] text-xl">©2019-2022</button>
|
||||
<button className="absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#CDEA68] rounded-full text-[#CDEA68] text-sm xl:text-xl">©2019-2022</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<div className="flex flex-col sm:grid sm:grid-cols-2 gap-5">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo002.svg"} alt="" />
|
||||
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase">rating 5.0 0n clutch</button>
|
||||
<button className="btn-1 absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-sm xl:text-xl uppercase">rating 5.0 0n clutch</button>
|
||||
</div>
|
||||
<div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<div className="w-full h-[30vh] md:h-[40vh] xl:h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
|
||||
<img src={"https://ochi.design/wp-content/uploads/2022/04/logo003.png"} alt="" className="w-[100px] h-[100px]"/>
|
||||
<button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase tracking-tighter">business bootcamp alumni</button>
|
||||
<button className="btn-1 absolute left-[2vw] bottom-[2vw] py-[0.5vw] px-[1vw] border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-sm xl:text-xl uppercase tracking-tighter">business bootcamp alumni</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
const Footer = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.2" className="w-full h-full flex bg-[#F1F1F1] rounded-t-3xl">
|
||||
<div className="px-16 w-1/2 h-full flex flex-col justify-between gap-3 text-xl">
|
||||
<div className="mt-20 uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[170px] leading-none">eye-</p>
|
||||
<p className="feature-text text-[170px] leading-none -mt-8">opening</p>
|
||||
<div className="w-1 md:w-1/2 h-full flex flex-col justify-between gap-3 text-sm lg:text-xl">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-[4.1vw] uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">eye-</p>
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">opening</p>
|
||||
</div>
|
||||
<div className="mb-10">
|
||||
<div className="hidden md:flex mb-10">
|
||||
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
|
||||
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>
|
||||
|
|
@ -17,12 +17,12 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2">
|
||||
<div className="mt-20 uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[170px] leading-none">Presentations</p>
|
||||
<div className="w-1 md:w-1/2 mt-[8.3vw] md:mt-0">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] mt-[14vw] md:mt-[4.1vw] uppercase font-bold tracking-tight">
|
||||
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">Presentations</p>
|
||||
</div>
|
||||
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">S:</p>
|
||||
<p>Instagram</p>
|
||||
<p>Behance</p>
|
||||
|
|
@ -30,15 +30,15 @@ const Footer = () => {
|
|||
<p>Linkedin</p>
|
||||
</div>
|
||||
|
||||
<div className="w-5/6 flex justify-between">
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] w-[50vh] md:w-5/6 flex flex-col md:flex md:flex-row md:justify-between">
|
||||
<div className="text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">L:</p>
|
||||
<p>202-1965 W 4th Ave</p>
|
||||
<p>Vancouver, Canada</p> <br />
|
||||
<p>30 Chukarina St</p>
|
||||
<p>Lviv, Ukraine</p>
|
||||
</div>
|
||||
<div className="text-xl mt-10">
|
||||
<div className="text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">M:</p>
|
||||
<p>Home</p>
|
||||
<p>Services</p>
|
||||
|
|
@ -49,16 +49,16 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xl mt-10">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-[2vw]">
|
||||
<p className="mb-5">E:</p>
|
||||
<p>hello@ochi.design</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-[#cecece]">
|
||||
<div className="text-xl mt-14">
|
||||
<div className="w-[60vh] md:w-5/6 flex flex-col md:flex md:flex-row md:justify-between text-[#cecece]">
|
||||
<div className="px-[2vw] lg:px-[3.3vw] text-sm lg:text-xl mt-5 md:mt-14">
|
||||
<p>© ochi design 2024. Legal Terms</p>
|
||||
</div>
|
||||
<div className="text-xl mt-14 pr-16">
|
||||
<div className="text-sm lg:text-xl mt-5 md:mt-14 px-4 md:px-0 pr-16">
|
||||
<p className="mb-5">Website by Obys</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@ const boxSlide = {
|
|||
const Hero = () => {
|
||||
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="-0.3" className="w-full h-[90vh] bg-[#F1F1F1] pt-1">
|
||||
<div className="home-text mt-48 pl-16">
|
||||
<div data-scroll data-scroll-speed="-0.3" className="w-full h-[98vh] bg-[#F1F1F1] pt-1">
|
||||
<div className="home-text mt-[150px] xl:mt-[10vw] pl-[2vw] lg:pl-[3.3vw]">
|
||||
<div className="flex justify-between">
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">We create</h1>
|
||||
<div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-4">
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none">We create</h1>
|
||||
<div className="border flex-col bg-[#E73C37] text-center text-[#f1f1f1] p-2 lg:p-3 xl:p-4">
|
||||
<p className="text-xl font-semibold mb-4">W.</p>
|
||||
<p className="home-text-2 [writing-mode:sideways-lr] text-sm">Site of the Day</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 -mt-12 items-center">
|
||||
<motion.p className="bg-[#B5D252] w-[150px] h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
|
||||
<div className="flex gap-2 -mt-[110px] lg:-mt-[80px] xl-mt-20 2xl:-mt-12 items-center">
|
||||
<motion.p className="hidden lg:flex bg-[#B5D252] w-[40px] lg:w-[60px] xl:w-[120px] 2xl:w-[150px] h-[40px] lg:h-[75px] xl:h-[85px] 2xl:h-[108px] rounded-md -mt-4" variants={boxSlide} initial="initial" animate="animate"></motion.p>
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none">eye-opening</h1>
|
||||
</div>
|
||||
<h1 className="uppercase text-[150px] tracking-tight font-bold leading-none -mt-6">presentations</h1>
|
||||
<h1 className="uppercase text-[60px] lg:text-[100px] xl:text-[120px] 2xl:text-[150px] tracking-tight font-bold leading-none -mt-4 lg:-mt-6">presentations</h1>
|
||||
</div>
|
||||
<div className="border-t-[1px] mt-36 border-[#b1b1b1]">
|
||||
<div className="flex justify-between px-16 mt-5 text-[21px]">
|
||||
<div className="border-t-[1px] mt-60 sm:mt-[35vw] lg:mt-[20vw] xl:mt-[7.5vw] border-[#b1b1b1]">
|
||||
<div className="flex flex-col xl:flex xl:flex-row xl:justify-between px-[2vw] lg:px-[3.3vw] mt-5 text-[4vw] sm:text-[2vw] lg:text-[21px]">
|
||||
<p>For public and private companies</p>
|
||||
<p>From the first pitch to IPO</p>
|
||||
<div className="flex gap-2 items-center cursor-pointer">
|
||||
<p className="uppercase border border-[#202020] py-1 px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out">start the project</p>
|
||||
<span className="p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-xl"/></span>
|
||||
<p className="uppercase border border-[#202020] py-[0.5vw] px-[1vw] lg:py-1 lg:px-4 rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out text-[3vw] sm:text-[2vw] lg:text-lg">start the project</p>
|
||||
<span className="p-[0.5vw] lg:p-2 border border-[#202020] rounded-full hover:bg-[#202020] hover:text-[#dedede] transition duration-300 ease-in-out"><MdArrowOutward className="text-md lg:text-xl"/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { HiBars2 } from "react-icons/hi2";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<div className="nav-text w-full px-16 py-6 flex justify-between items-center fixed z-[999] backdrop-blur-sm">
|
||||
<div className="nav-text w-full px-[2vw] lg:px-[3.3vw] py-6 flex justify-between items-center fixed z-[999] backdrop-blur-sm">
|
||||
<div>
|
||||
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
|
||||
|
|
@ -10,15 +12,16 @@ const Navbar = () => {
|
|||
<path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex gap-10 text-xl tracking-tight cursor-pointer">
|
||||
<div className="hidden lg:flex gap-[2vw] text-[1.2vw] 2xl:text-[1vw] tracking-tight cursor-pointer">
|
||||
<p className="nav-topic">Services</p>
|
||||
<p className="nav-topic">Our work</p>
|
||||
<p className="nav-topic">About us</p>
|
||||
<p className="nav-topic">Insights</p>
|
||||
<div className=" ml-80">
|
||||
<p className="nav-topic">Contact us</p>
|
||||
<div className="ml-[15vw]">
|
||||
<p className="hidden nav-topic">Contact us</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="flex text-xl lg:hidden"><HiBars2/></p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
const Ready = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-speed="0.1" className="w-full bg-[#CDEA68] rounded-t-3xl pt-48 pb-40 flex flex-col justify-center items-center text-center">
|
||||
<div className="text-ready flex flex-col uppercase font-bold text-[290px] tracking-tight leading-none">
|
||||
<div data-scroll data-scroll-speed="-0.4" className="w-full bg-[#CDEA68] rounded-t-3xl pt-[10vw] pb-60 flex flex-col justify-center items-center text-center">
|
||||
<div className="text-ready flex flex-col uppercase font-bold text-[15vw] tracking-tight leading-[15.5vw]">
|
||||
<p>Ready</p>
|
||||
<p className="-mt-12">to start</p>
|
||||
<p className="-mt-12">the project?</p>
|
||||
<p className="-mt-5 md:-mt-8 lg:-mt-10 xl:-mt-12">to start</p>
|
||||
<p className="-mt-5 md:-mt-8 lg:-mt-10 xl:-mt-12">the project?</p>
|
||||
</div>
|
||||
<button className="btn uppercase text-xl mb-4">start the project</button>
|
||||
<p className="uppercase text-xl mb-4">or</p>
|
||||
<button className="btn-2 uppercase text-xl">hello@ochi.design</button>
|
||||
<button className="btn uppercase text-sm lg:text-xl mb-4">start the project</button>
|
||||
<p className="uppercase text-sm lg:text-xl mb-4">or</p>
|
||||
<button className="btn-2 uppercase text-sm lg:text-xl">hello@ochi.design</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
const ScrollDown = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-sections data-scroll-speed="0" className="w-full h-[20vh] bg-[#F1F1F1] flex justify-center text-center mt-5">
|
||||
<p className="text-xl text-[#cecece]">Scroll down</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ScrollDown
|
||||
|
|
@ -9,9 +9,9 @@ const slider = {
|
|||
const TextAnimation = () => {
|
||||
return (
|
||||
<div data-scroll data-scroll-sections data-scroll-speed="-0.1" className="bg-[#F1F1F1]">
|
||||
<div className="marquee-text w-full pt-28 pb-20 bg-[#004D43] rounded-t-3xl">
|
||||
<div className="animate-text w-full pt-10 sm:pt-28 pb-20 bg-[#004D43] rounded-t-3xl">
|
||||
<div className="flex border-t-[1px] border-b-[1px] border-[#ffffff50] text-[#FFFFFF] overflow-hidden whitespace-nowrap gap-40">
|
||||
<motion.h1 className="text-[400px] font-bold uppercase leading-none -mb-20" variants={slider} initial="initial" animate="animate">
|
||||
<motion.h1 className="text-[50vw] sm:text-[40vw] lg:text-[30vw] 2xl:text-[20vw] font-bold uppercase leading-none -mb-20" variants={slider} initial="initial" animate="animate">
|
||||
We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ html{
|
|||
.home-text, .feature-text, .text-ready{
|
||||
font-family: "Bebas Neue", sans-serif;
|
||||
}
|
||||
.nav-text, .marquee-text, .home-text-2, .about-text{
|
||||
.nav-text, .animate-text, .home-text-2, .about-text{
|
||||
font-family: "Epilogue", sans-serif;
|
||||
}
|
||||
.nav-text{
|
||||
|
|
@ -39,7 +39,7 @@ html{
|
|||
|
||||
|
||||
.btn{
|
||||
padding: 20px 40px;
|
||||
padding: 1vw 2vw;
|
||||
border-radius: 50px;
|
||||
color: white;
|
||||
background: linear-gradient(#212121, #212121 50%, black 50%, black);
|
||||
|
|
@ -60,7 +60,7 @@ html{
|
|||
background-position: 100% 100%;
|
||||
}
|
||||
.btn-2{
|
||||
padding: 20px 40px;
|
||||
padding: 1vw 2vw;
|
||||
border-radius: 50px;
|
||||
border: 1px solid #212121;
|
||||
color: #212121;
|
||||
|
|
@ -73,7 +73,7 @@ html{
|
|||
background-position: 100% 100%;
|
||||
}
|
||||
.btn-review{
|
||||
padding: 6px 12px;
|
||||
padding: 0.3vw 1.2vh;
|
||||
border: 1px solid #212121;
|
||||
border-radius: 50px;
|
||||
transition: ease-in-out 0.3s;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue