files uploaded

MisbahAnsar · Jun 30, 2024 · 93556d2 · 93556d2
commit 93556d2
Show file tree

Hide file tree

Showing 18 changed files with 5,884 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/About.jsx b/About.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const About = () => {
+  console.log("Jo bhi console check kiya wo gay.")
+  return (
+    <div className='w-full py-20 px-[4.5vw] bg-[#CDEA68] rounded-t-3xl text-black'>
+      <h1 className='font-[neue_Montreal] text-[4vw] leading-[4.5vw] tracking-tight'>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 className='w-full flex gap-5 border-t-[1px] pt-10 mt-16 border-[#90a158]'>
+        <div className='w-1/2'>
+          <h1 className='text-7xl'>Our approach:</h1>
+          <button className='flex gap-10 uppercase items-center px-10 py-6 bg-zinc-900 mt-10 rounded-full text-white'>Read More
+            <div className='w-2 h-2 bg-zinc-100 rounded-full'></div>
+          </button>
+        </div>
+        <div className='w-1/2 h-[70vh]'><img className='rounded-3xl w-full h-full' src="https://ochi.design/wp-content/uploads/2022/05/Homepage-Photo-663x469.jpg" alt="" /></div>
+      </div>
+    </div>
+  )
+}
+
+export default About
diff --git a/App.jsx b/App.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import Navbar from './components/Navbar'
+import LandingPage from './components/LandingPage'
+import Marquee from './components/Marquee'
+import About from './components/About'
+import Eyes from './components/Eyes'
+import Feature from './components/Feature'
+import Cards from './components/Cards'
+import Footer from './components/Footer'
+import LocomotiveScroll from 'locomotive-scroll';
+
+const App = () => {
+
+  const locomotiveScroll = new LocomotiveScroll();
+
+  return (
+    <div className='w-full min-h-screen bg-zinc-900 text-white'>
+      <Navbar />  
+      <LandingPage />
+      <Marquee />
+      <About />
+      <Eyes />
+      <Feature />
+      <Cards />
+      <Footer />
+    </div>
+  )
+}
+
+export default App
diff --git a/Cards.jsx b/Cards.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Cards = () => {
+  return (
+    <div className="w-full h-screen flex-col- bg-zinc-100 flex items-center px-24 gap-5">
+        <div className='cardcontainer h-[50vh] w-1/2'>
+            <div className='card relative rounded-xl w-full h-full  bg-[#004D43] flex items-center justify-center'>
+                <img className='w-32' src="https://ochi.design/wp-content/uploads/2022/04/logo001.svg" alt="hi" />
+                <button className='absolute px-5 py-1 border-2 rounded-full left-10 bottom-8'>&copy;2019-2022</button>
+            </div>
+        </div>
+        <div className='cardcontainer flex h-[50vh] gap-5 w-1/2'>
+            <div className='card relative flex items-center justify-center rounded-xl w-1/2 h-full bg-[#192826]'>
+              <img className='w-32' src="https://ochi.design/wp-content/uploads/2022/04/logo002.svg" alt="hi" />
+              <button className='absolute px-5 py-1 border-2 rounded-full left-4 bottom-8'>RATING 5.0 ON CLUTCH</button>
+            </div>
+            <div className='card relative flex items-center justify-center rounded-xl w-1/2 h-full bg-[#192826]'>
+              <img className='w-32' src="https://ochi.design/wp-content/uploads/2022/04/logo003.png" alt="hi" />
+              <button className='absolute px-5 py-1 border-2 rounded-full left-4 bottom-8'>BUSINESS BOOTCAMP ALUMNI</button>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Cards
diff --git a/Eyes.jsx b/Eyes.jsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+
+const Eyes = () => {
+    const [rotate, setRotate] = useState(0);
+
+    useEffect(()=>{
+        window.addEventListener("mousemove", (e) => {
+            let mouseX = e.clientX;
+            let mouseY = e.clientY;
+
+            let x = mouseX - window.innerWidth/2;
+            let y = mouseY - window.innerHeight/2;
+
+            var angle = Math.atan2(y, x) * (180/Math.PI);
+            setRotate(angle-180);
+        })
+    })
+
+  return (
+    <div className='eyes w-full h-screen overflow-hidden'>
+        <div 
+            data-scroll 
+            data-scroll-speed="-.5" 
+            className='relative w-full h-full bg-cover bg-center bg-[url("https://ochi.design/wp-content/uploads/2022/05/Top-Viewbbcbv-1-scaled.jpg")]'>
+                <div className='absolute flex gap-10 top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%]'>
+                    <div className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100'>
+                        <div className='w-2/3 h-2/3 rounded-full relative items-center justify-center bg-zinc-900'>
+                            <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-10'>
+                                <div className='w-10 h-10 rounded-full bg-zinc-100'></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100'>
+                        <div className='w-2/3 h-2/3 rounded-full relative items-center justify-center bg-zinc-900'>
+                            <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-10'>
+                                <div className='w-10 h-10 rounded-full bg-zinc-100'></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        </div>
+    </div>
+  )
+}
+
+export default Eyes
diff --git a/Feature.jsx b/Feature.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const Feature = () => {
+  return (
+    <div className='w-full py-16'>
+        <div className='w-full px-10 border-b-[1px] border-zinc-700 pb-20'>
+            <h1 className='text-7xl tracking-tighter font-["Founders Grotesk Light"]'>Featured Projects</h1>
+
+        </div>
+        <div className='px-20'>
+            <div className="cards w-full flex gap-10 mt-10">
+                <div className="cardcontainer relative w-1/2 h-[75vh]">
+                  <div className='w-full h-full rounded-xl overflow-hidden'>
+                <h1 className='absolute text-[#CDEA68] z-[9] text-7xl leading-none tracking-tighter left-full -translate-x-1/2 top-1/2 -translate-y-1/2 font-["Founders Grotesk Light"]'>
+                  {"FYDE".split('').map((item, index) => (
+                    <span>{item}</span>
+                  ))}
+                </h1>
+                    <img className="w-full h-full bg-cover" src="https://ochi.design/wp-content/uploads/2023/10/Fyde_Illustration_Crypto_2-663x551.png" alt="img1" />
+                  </div>
+                </div>
+                <div className="cardcontainer relative w-1/2 h-[75vh]">
+                  <div className='w-full h-full rounded-xl overflow-hidden'>
+                <h1 className='absolute text-[#CDEA68] z-[9] text-7xl leading-none tracking-tighter right-full translate-x-1/2 top-1/2 -translate-y-1/2 font-["Founders Grotesk Light"]'>
+                  {"VISE".split('').map((item, index) => (
+                    <span>{item}</span>
+                  ))}
+                </h1>
+                    <img className="w-full h-full bg-cover" src="https://ochi.design/wp-content/uploads/2022/09/Vise_front2-663x551.jpg" alt="img1" />
+                  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Feature
diff --git a/Footer.jsx b/Footer.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div className=' flex w-full h-screen bg-zinc-900 p-20 font-["Founders Grotesk Light"]'>
+        <div className='w-1/2 h-full flex flex-col justify-between'>
+            <div className='heading'>
+                <h1 className='text-[7vw] font-semibold uppercase leading-none -mb-[1.1vw]'>Eye-</h1>
+                <h1 className='text-[7vw] font-semibold uppercase leading-none -mb-[1.1vw]'>Opening</h1>
+            </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>
+									<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>
+									<path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="currentColor"></path>
+									<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="currentColor"></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="currentColor"></path></svg>
+        </div>
+        <div className="w-1/2">
+            <h1 className='text-[6vw] font-semibold uppercase leading-none -mb-4'>
+                Presentations
+            </h1>
+            <div className='dets flex-col font-["Founders Grotesk Light"] mt-10'>
+                    <a className='block text-xl font-light' href="#">Facebook</a>
+                    <a className='block text-xl font-light' href="#">Instagram</a>
+                    <a className='block text-xl font-light' href="#">Twitter</a>
+            </div>
+            <div className='dets flex-col font-["Founders Grotesk Light"] mt-10'>
+                    <a className='block text-xl font-light' href="#">202-1965 W</a>
+                    <a className='block text-xl font-light' href="#">Vancouver, Canada</a>
+                    <a className='block text-xl font-light' href="#">Lviv, Ukraine</a>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/LandingPage.jsx b/LandingPage.jsx
@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion';
+import React from 'react'
+import { FaArrowUpLong } from "react-icons/fa6";
+
+const LandingPage = () => {
+  return (
+    <div 
+      data-scroll 
+      data-scroll-section
+      data-scroll-speed="-.3" 
+      className='w-full h-screen bg-zinc-900 pt-1'>
+      <div className="textstructure mt-32 px-20">
+        {["We Create", "Eye Opening", "Presentations"].map((item, index)=>{
+          return <div className="masker">
+            <div className='w-fit flex items-end '>
+              {index === 1 && (
+                <motion.div
+                 initial={{ width: 0 }} 
+                 animate={{ width: "8vw" }} 
+                 transition={{ ease: [0.76, 0, 0.24, 1], duration:1}} 
+                 className="mr-[1vw] w-[8vw] rounded-md h-[5.7vw] relative top-[1.4vw] bg-green-500">
+                </motion.div>)}
+              <h1 className='pt-[2vw] -mb-[1.8vw] uppercase text-[8vw] leading-[7.5vw] tracking-tighter font-["Founders Grotesk Light"] font-medium'>{item}</h1>
+            </div>
+          </div>
+        })}
+      </div>
+      <div className="border-t-[1px] border-zinc-800 mt-20 flex justify-between items-center py-5 px-20">
+        {["For public and provate companies", "From the firsth pitch to IPO"].map((item,index) => (
+          <p className='text-md font-light tracking-tight leading-none'>{item}</p>
+        ))}
+        <div className='start flex items-center gap-5'>
+          <div className='px-5 py-2 border-[2px] border-zinc-500 font-light text-md capitalize rounded-full'>start the project</div>
+          <div className='w-10 h-10 flex items-center justify-center border-[2px] border-zinc-400 rounded-full'>
+            <span className="rotate-[45deg]"></span>
+            <FaArrowUpLong />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LandingPage
+
+
+
+
+{/* <h1 className='flex items-center uppercase text-9xl leading-[5.5vw] tracking-tighter font-[" FoundersGrotesk, Roboto, sans-serif"] font-medium'>We create</h1> */}
+
+
+// <div className='textstructure mt-40 px-16'>
+//         <div className='masker'>
+//           <div className='w-fit flex items-center'>
+//             <h1 className='flex items-center uppercase text-9xl leading-[5.5vw] tracking-tighter font-[" FoundersGrotesk, Roboto, sans-serif"] font-medium'>We create</h1>
+//           </div>
+//         </div>
+//         <div className='masker'>
+//           <div className='w-fit flex items-center'>
+//             <div className='w-[9vw h-[5vw] bg-red-300]'>
+//             <h1 className='flex items-center uppercase text-9xl  tracking-tighter font-[" FoundersGrotesk, Roboto, sans-serif"] font-medium'>Eye Opening</h1>
+//           </div></div>
+//         </div>
+//         <div className='masker'>
+//           <div className='w-fit flex items-center'>
+//             <h1 className='flex items-center uppercase text-9xl leading-[5.5vw] tracking-tighter font-[" FoundersGrotesk, Roboto, sans-serif"] font-medium'>Presentations</h1>
+//           </div>
+//         </div>
+//       </div>
diff --git a/Marquee.jsx b/Marquee.jsx
@@ -0,0 +1,20 @@
+import { motion } from 'framer-motion'
+import { Linear } from 'gsap'
+import React from 'react'
+
+const Marquee = () => {
+  return (
+    <div 
+      data-scroll 
+      data-scroll-section 
+      data-scroll-speed=".2" 
+      className='w-full py-20 rounded-tl-3xl rounded-tr-3xl bg-[#004D43] flex'>
+        <div className='text border-t-2 border-b-2 border-zinc-300 flex overflow-hidden whitespace-nowrap'>
+            <motion.h1 initial={{x: "0"}} animate={{x:"-100%"}} transition={{repeat: Infinity, ease: "linear", duration: 15}}  className='text-[20vw] leading-none tracking-tighter font-["Founders Grotesk Light"] uppercase mb-2 -mt-6 font-bold pr-10'>We are Ochi</motion.h1>
+            <motion.h1 initial={{x: "0"}} animate={{x:"-100%"}} transition={{repeat: Infinity, ease: "linear", duration: 15}}  className='text-[20vw] leading-none tracking-tighter font-["Founders Grotesk Light"] uppercase mb-2 -mt-6 font-bold pr-10'>We are Ochi</motion.h1>
+        </div>
+    </div>
+  )
+}
+
+export default Marquee
diff --git a/Navbar.jsx b/Navbar.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const Navbar = () => {
+  return (
+    <div className="fixed z-[999] w-full px-20 py-4 font-['Neue Montreal'] flex justify-between items-center">
+        <div className="logo"><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>
+									<path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="currentColor"></path>
+									<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="currentColor"></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="currentColor"></path></svg>
+            </div>
+            <div className="links flex gap-10">
+                {["Services", "Our Work", "About Us", "Insights", "Contact"].map((item, index)=>(
+                    <a key={index} className={`text-md capitalize font-light ${index === 4 && "ml-32"}`}>{item}</a>         //navbar services logic margin vhanging trick
+                ))}
+            </div>
+    </div>
+  )
+}
+
+export default Navbar
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+navbar
+landing page
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;