Skip to content

formatting #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
omkarspace wants to merge 1 commit into
base: main
Choose a base branch
from
Open

formatting #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 50 additions & 50 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React, { useState, useEffect } from 'react';
import { AnimatePresence , motion} from 'framer-motion';
import Navbar from './components/Navbar';
import LandingPage from './pages/LandingPage';
import Marquee from './components/Marquee';
import About_Us from './components/About_Us';
import Eyes from './components/Eyes';
import Featured from './components/Featured';
import Cards from './components/Cards';
import Footer from './components/Footer';
import Preloader from './components/Preloader';
import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NotFoundPage from './components/NotFoundPage';
import { logPageView } from './analytics';
import React, { useState, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import Navbar from "./components/Navbar";
import LandingPage from "./pages/LandingPage";
import Marquee from "./components/Marquee";
import About_Us from "./components/About_Us";
import Eyes from "./components/Eyes";
import Featured from "./components/Featured";
import Cards from "./components/Cards";
import Footer from "./components/Footer";
import Preloader from "./components/Preloader";
import LocomotiveScroll from "locomotive-scroll";
import "locomotive-scroll/dist/locomotive-scroll.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NotFoundPage from "./components/NotFoundPage";
import { logPageView } from "./analytics";
import Contact from "./pages/Contact";
import CustomCursor from './components/CustomCursor';
import CustomCursor from "./components/CustomCursor";

function App() {
const locomotiveScroll = new LocomotiveScroll();
Expand All @@ -29,49 +29,49 @@ function App() {
}, []);

return (
<div className='scroll-container w-full min-h-screen cursor-none '>
<div className="scroll-container w-full min-h-screen cursor-none ">
<AnimatePresence mode="wait">
{isLoading ? (
<motion.div
key="preloader"
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 1 }}
transition={{ duration: 1}}
transition={{ duration: 1 }}
>
<Preloader />
</motion.div>
) : (
<>
{/* Add Custom Cursor here */}
<CustomCursor />
<Router>
<Navbar />
<Routes>
{/* Home Route */}
<Route
path="/"
element={
<>
<LandingPage />
<Marquee />
<About_Us />
<Eyes />
<Featured />
<Cards />
<Footer />
</>
}
/>
{/* Contact Route */}
<Route path="/contact" element={<Contact />} />
{/* Not Found Route */}
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Router>
</>
)}
) : (
<>
{/* Add Custom Cursor here */}
<CustomCursor />

<Router>
<Navbar />
<Routes>
{/* Home Route */}
<Route
path="/"
element={
<>
<LandingPage />
<Marquee />
<About_Us />
<Eyes />
<Featured />
<Cards />
<Footer />
</>
}
/>
{/* Contact Route */}
<Route path="/contact" element={<Contact />} />
{/* Not Found Route */}
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Router>
</>
)}
</AnimatePresence>
</div>
);
Expand Down
47 changes: 29 additions & 18 deletions src/components/About_Us.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
import React from 'react'
import React from "react";

function About_Us() {
return (
<div className='w-full p-8 md:p-20 bg-[#f3b9b9] rounded-tl-3xl rounded-tr-3xl font-mono text-black'>
<div className=' hover-target text-xl md:text-3xl leading-[7vw] md:leading-[4vw] tracking-tight '>
Vector specializes in building custom websites and products, helping businesses achieve their online goals and stand out in the competitive digital landscape.
<div className="w-full p-8 md:p-20 bg-[#f3b9b9] rounded-tl-3xl rounded-tr-3xl font-mono text-black">
<div className=" hover-target text-xl md:text-3xl leading-[7vw] md:leading-[4vw] tracking-tight ">
Vector specializes in building custom websites and products, helping
businesses achieve their online goals and stand out in the competitive
digital landscape.
</div>
<div className='w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784]'>
<div className="flex w-full h-1/2 py-5">
<div className="w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784]">
<div className="flex w-full h-1/2 py-5">
<div className="flex-[4_4_0%] px-6">What you can expect:</div>
<div className="flex-[4_4_0%] text-justify px-6 ">At Vector, we build tailored websites and projects for businesses and students, combining creativity with the latest technology to deliver visually stunning and highly functional results. Whether you're enhancing your online presence or working on a project, we're here to bring your vision to life.
<br></br>Expect personalized service, modern design, and scalable solutions that align with your goals, ensuring your project stands out and makes a lasting impact.</div>
<div className="flex-[2_2_0%] px-6">Our Socials:<br></br>LinkedIN<br></br>Instagram </div>
<div className="flex-[4_4_0%] text-justify px-6 ">
At Vector, we build tailored websites and projects for businesses
and students, combining creativity with the latest technology to
deliver visually stunning and highly functional results. Whether
you're enhancing your online presence or working on a project, we're
here to bring your vision to life.
<br></br>Expect personalized service, modern design, and scalable
solutions that align with your goals, ensuring your project stands
out and makes a lasting impact.
</div>
<div className="flex-[2_2_0%] px-6">
Our Socials:<br></br>LinkedIN<br></br>Instagram{" "}
</div>
</div>

</div>
<div className='w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784] py-5'>
<div className='w-full md:w-1/2 '>
<h1 className='text-3xl md:text-5xl'> Our Approach:</h1>
<button className='flex uppercase gap-4 md:gap-10 items-center px-6 py-4 md:px-10 md:py-6 bg-zinc-900 mt-6 md:mt-10 rounded-full text-white'>
Read More
<div className='w-2 h-2 md:w-3 md:h-3 bg-zinc-100 rounded-full'></div>
<div className="w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784] py-5">
<div className="w-full md:w-1/2 ">
<h1 className="text-3xl md:text-5xl"> Our Approach:</h1>
<button className="flex uppercase gap-4 md:gap-10 items-center px-6 py-4 md:px-10 md:py-6 bg-zinc-900 mt-6 md:mt-10 rounded-full text-white">
Read More
<div className="w-2 h-2 md:w-3 md:h-3 bg-zinc-100 rounded-full"></div>
</button>
</div>
<div className='w-full md:w-1/2 h-[40vh] md:h-[60vh] rounded-3xl bg-[#964784]'></div>
<div className="w-full md:w-1/2 h-[40vh] md:h-[60vh] rounded-3xl bg-[#964784]"></div>
</div>
</div>
);
}

export default About_Us
export default About_Us;
22 changes: 14 additions & 8 deletions src/components/Cards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState } from "react";

function Cards() {
const [hoveredCard, setHoveredCard] = useState(null);
Expand All @@ -12,19 +12,25 @@ function Cards() {
};

return (
<div className='w-full min-h-screen bg-zinc-100 flex flex-col md:flex-row items-center gap-5 px-5 md:px-32 py-10'>
<div className="w-full min-h-screen bg-zinc-100 flex flex-col md:flex-row items-center gap-5 px-5 md:px-32 py-10">
{/* Cards */}
{[0, 1, 2].map((index) => (
<div
<div
key={index}
className={`cardcontainer transition-all duration-300 h-[40vh] md:h-[50vh]
${hoveredCard === index ? 'md:w-1/2' : 'md:w-1/3'}`}
onMouseEnter={() => handleMouseEnter(index)}
${hoveredCard === index ? "md:w-1/2" : "md:w-1/3"}`}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={handleMouseLeave}
>
<div className='card relative w-full h-full rounded-xl bg-[#004D43] flex items-center justify-center'>
<img className='w-24 md:w-32' src='https://ochi.design/wp-content/uploads/2022/04/logo001.svg' alt='Logo' />
<button className='absolute px-3 py-1 md:px-5 md:py-1 rounded-xl border-2 left-5 md:left-10 bottom-5 md:bottom-10'>&copy; 2019</button>
<div className="card relative w-full h-full rounded-xl bg-[#004D43] flex items-center justify-center">
<img
className="w-24 md:w-32"
src="https://ochi.design/wp-content/uploads/2022/04/logo001.svg"
alt="Logo"
/>
<button className="absolute px-3 py-1 md:px-5 md:py-1 rounded-xl border-2 left-5 md:left-10 bottom-5 md:bottom-10">
&copy; 2019
</button>
</div>
</div>
))}
Expand Down
16 changes: 8 additions & 8 deletions src/components/CustomCursor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";

const CustomCursor = () => {
const cursorRef = useRef(null);
Expand All @@ -21,23 +21,23 @@ const CustomCursor = () => {
gsap.to(cursor, {
left: cursorPosition.left,
top: cursorPosition.top,
height: '12px',
width: '12px',
height: "12px",
width: "12px",
duration: 0.2,
});
gsap.to(tail, {
left: cursorPosition.left,
top: cursorPosition.top,
height: '5px',
width: '5px',
height: "5px",
width: "5px",
duration: 0.5,
});
};

document.addEventListener('mousemove', onMouseMove);
document.addEventListener("mousemove", onMouseMove);

return () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener("mousemove", onMouseMove);
};
}, []);

Expand Down
54 changes: 34 additions & 20 deletions src/components/Eyes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState } from "react";

function Eyes() {
const [leftEyeRotate, setLeftEyeRotate] = useState(0);
Expand All @@ -10,12 +10,14 @@ function Eyes() {
let mouseY = e.clientY;

// Get the center coordinates of the left eye
let leftEye = document.getElementById('left-eye').getBoundingClientRect();
let leftEye = document.getElementById("left-eye").getBoundingClientRect();
let leftEyeCenterX = leftEye.left + leftEye.width / 2;
let leftEyeCenterY = leftEye.top + leftEye.height / 2;

// Get the center coordinates of the right eye
let rightEye = document.getElementById('right-eye').getBoundingClientRect();
let rightEye = document
.getElementById("right-eye")
.getBoundingClientRect();
let rightEyeCenterX = rightEye.left + rightEye.width / 2;
let rightEyeCenterY = rightEye.top + rightEye.height / 2;

Expand All @@ -32,42 +34,54 @@ function Eyes() {
setRightEyeRotate(rightAngle - 180);
};

window.addEventListener('mousemove', handleMouseMove);
window.addEventListener("mousemove", handleMouseMove);

return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);

return (
<div className='eyes w-full h-screen overflow-hidden'>
<div data-scroll data-scroll-speed='-.7' className='relative w-full h-full bg-cover bg-center bg- bg-[url("/bgeyess.png")]'>
<div className='absolute flex gap-10 top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] h-60'>

<div className="eyes w-full h-screen overflow-hidden">
<div
data-scroll
data-scroll-speed="-.7"
className='relative w-full h-full bg-cover bg-center bg- bg-[url("/bgeyess.png")]'
>
<div className="absolute flex gap-10 top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] h-60">
{/* Left Eye */}
<div id='left-eye' className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]'>
<div className='relative w-2/3 h-2/3 rounded-full bg-zinc-900'>
<div
id="left-eye"
className="flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]"
>
<div className="relative w-2/3 h-2/3 rounded-full bg-zinc-900">
<div
style={{ transform: `translate(-50%, -50%) rotate(${leftEyeRotate}deg)` }}
className='line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10'
style={{
transform: `translate(-50%, -50%) rotate(${leftEyeRotate}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 className="w-10 h-10 rounded-full bg-zinc-100"></div>
</div>
</div>
</div>

{/* Right Eye */}
<div id='right-eye' className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]'>
<div className='relative w-2/3 h-2/3 rounded-full bg-zinc-900'>
<div
id="right-eye"
className="flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]"
>
<div className="relative w-2/3 h-2/3 rounded-full bg-zinc-900">
<div
style={{ transform: `translate(-50%, -50%) rotate(${rightEyeRotate}deg)` }}
className='line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10'
style={{
transform: `translate(-50%, -50%) rotate(${rightEyeRotate}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 className="w-10 h-10 rounded-full bg-zinc-100"></div>
</div>
</div>
</div>

</div>
</div>
</div>
Expand Down
Loading