Skip to content
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

Jump to bottom

major changes in scrolling and responsiveness #1

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

major changes in scrolling and responsiveness #1

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
35 changes: 23 additions & 12 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useEffect, useRef } from "react";

import Navbar from "./components/navbar";
import About from "./components/about";
import Contact from "./components/contact";
import Home from "./components/home";
import Team from "./components/team";
import Navbar from "./components/Navbar";
import Timeline from "./components/Timeline";
import Contact from "./components/Contact";
import Home from "./components/HomeHero";
import Teams from "./components/Teams";
import ResponsiveNavbar from "./components/ResponsiveNavbar";

import './index.css';

Expand Down Expand Up @@ -39,25 +40,35 @@ function App() {


return (
<div className="App">
<>
<div className="App sm:block hidden bg-[#202020]">
<Navbar />


<div id="panels">
<div id="panels-container" ref={panelsContainer} style={{width:"500%"}}>
<div className="home panel full-screen" ref={(e) => createPanelsRefs(e, 0)}>
<div id="panels snap-x snap-mandatory">
<div id="panels-container" ref={panelsContainer} style={{width:"800%"}}>
<div className="home panel snap-center full-screen" ref={(e) => createPanelsRefs(e, 0)}>
<Home />
</div>

<div className="about panel full-screen" ref={(e) => createPanelsRefs(e, 1)}>
<About />
<div className="about panel full-screen snap-center snap-always" ref={(e) => createPanelsRefs(e, 1)}>
<Timeline />
</div>
</div>
</div>

<Team />
<Teams />
<Contact />
</div>
{/* for mobile */}
<div className="sm:hidden block bg-[#202020]">
<ResponsiveNavbar/>
<Home/>
<Timeline/>
<Teams/>
<Contact/>
</div>
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/circles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Create svg circles, passed (x,y) coordinates and radius
function Circle(props){
return (
<svg className="circle absolute z-10 w-full h-full">
<svg className="circle hidden absolute z-30 w-full h-full">
<circle cx={props.x} cy={props.y} r={props.r} fill="none" stroke="#949494"/>
</svg>
);
Expand Down
152 changes: 152 additions & 0 deletions src/components/HomeHero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
import React from "react";
import { motion } from "framer-motion";
const HomeHero = () => {
return (
<>
<div className="grid sm:h-auto overflow-x-hidden bg-[#202020]">
<div className="mx-auto sm:mx-32 flex flex-col pt-32">
<motion.h1 initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:0.5,duration:1.5,bounce:2}} className="font-['Epilogue'] antialiased text-white text-4xl font-[500] w-96 leading-[5rem] tracking-wide">
Hey! Welcome to our club{" "}
<span className="bg-gradient-to-r from-[#2F2A7B] text-7xl to-[#39B54A] text-transparent bg-clip-text pl-2 font-[900] tracking-wide">
FLiC.
</span>
</motion.h1>
<motion.p initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:0.9,duration:1.5,bounce:2}} className="font-['Epilogue'] font-[200] antialiased text-[#949494] my-4 pb-4">
The official financial literacy club of IET-DAVV.
</motion.p>

<div className="flex space-x-10">
<motion.button initial={{opacity:0,x:-100}} animate={{opacity:1,x:0}} transition={{delay:1.2,duration:1.5,bounce:2}}
type="button"
className="px-8 py-1 active:rounded font-['Epilogue'] font-[600] antialiased rounded-full bg-[#338D3F] hover:bg-green-600 text-white"
>
Sample
</motion.button>
<motion.button initial={{opacity:0,x:100}} animate={{opacity:1,x:0}} transition={{delay:1.2,duration:1.5,bounce:2}}
type="button"
className="px-8 py-3 active:rounded bg-[#262262] font-['Epilogue'] hover:bg-[#453FA6] font-semibold rounded-full text-white"
>
Sample
</motion.button>
</div>
</div>
<div className="pl-12 grid grid-cols-1 sm:flex w-[100vw] space-y-8 mt-2 sm:space-y-0 sm:pt-20">
<div className="mx-auto sm:mx-16">
<div className="flex">
<motion.svg initial={{opacity:0,scale:0.5}} animate={{opacity:1, scale:1}} transition={{delay:1.5,duration:0.7}}
width="40"
height="40"
className="mx-4"
viewBox="0 0 69 69"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="34.5"
cy="34.5"
r="32.5"
stroke="#646464"
stroke-width="4"
/>
<line
x1="10.567"
y1="31.8495"
x2="16.3979"
y2="21.75"
stroke="#969696"
/>
<line
x1="51.433"
y1="21.75"
x2="57.264"
y2="31.8495"
stroke="#969696"
/>
<line x1="17" y1="21.5" x2="51" y2="21.5" stroke="#969696" />
<line
x1="10.3536"
y1="31.6464"
x2="33.3536"
y2="54.6464"
stroke="#969696"
/>
<line
x1="33.8596"
y1="55.6464"
x2="57.8596"
y2="31.6464"
stroke="#969696"
/>
<line x1="13" y1="29.5" x2="54" y2="29.5" stroke="#969696" />
</motion.svg>
<motion.h2 initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:1,duration:1.1,bounce:2}} className="text-white font-semibold text-lg">Features</motion.h2>
</div>
<motion.p initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:1.2,duration:1.1,bounce:2}} className="w-60 ml-[4.2rem] text-sm text-[#828282]">
Lorem ipsum dolor sit amet coctetur adipishhgging elit. Ratione
quae odio perferendis fugiat possimus. Corporis aliquam ipsum
debitis possimus similique molestias
</motion.p>
</div>
<div className="mx-auto sm:mx-4 pb-10">
<div className="flex">
<motion.svg initial={{opacity:0,scale:0.5}} animate={{opacity:1, scale:1}} transition={{delay:1.5,duration:0.7}}
width="40"
height="40"
className="mx-4"
viewBox="0 0 69 69"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="34.5"
cy="34.5"
r="32.5"
stroke="#646464"
stroke-width="4"
/>
<line
x1="10.567"
y1="31.8495"
x2="16.3979"
y2="21.75"
stroke="#969696"
/>
<line
x1="51.433"
y1="21.75"
x2="57.264"
y2="31.8495"
stroke="#969696"
/>
<line x1="17" y1="21.5" x2="51" y2="21.5" stroke="#969696" />
<line
x1="10.3536"
y1="31.6464"
x2="33.3536"
y2="54.6464"
stroke="#969696"
/>
<line
x1="33.8596"
y1="55.6464"
x2="57.8596"
y2="31.6464"
stroke="#969696"
/>
<line x1="13" y1="29.5" x2="54" y2="29.5" stroke="#969696" />
</motion.svg>
<motion.h2 initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:1,duration:1.1,bounce:2}} className="text-white font-semibold text-lg">Features</motion.h2>
</div>
<motion.p initial={{opacity:0,y:100}} animate={{opacity:1,y:0}} transition={{delay:1.2,duration:1.1,bounce:2}} className="w-60 ml-[4.2rem] text-sm text-[#828282]">
Lorem ipsum dolor sit amet coctetur adipishhgging elit. Ratione
quae odio perferendis fugiat possimus. Corporis aliquam ipsum
debitis possimus similique molestias
</motion.p>
</div>
</div>
</div>
</>
);
};

export default HomeHero;
140 changes: 140 additions & 0 deletions src/components/ResponsiveNavbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React, { useState } from "react";

const ResponsiveNavbar = () => {
const [show, setShow] = useState(false);
// data
const nav = [
{
name: "About Us",
add: "#",
},
{
name: "Our Team",
add: "#",
},
{
name: "Contact Us",
add: "#",
},
];
return (
<>
{/* a navbar start */}
<nav className="border-gray-200 py-5 px-2">
<div className="container mx-auto flex flex-wrap items-center justify-between">
{/* a logo with ability to come back home */}

<svg
id="svg"
width={30}
height={30}
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="157.71 288.18 764.59 503.63"
shapeRendering="geometricPrecision"
textRendering="geometricPrecision"
>
<defs>
<linearGradient
id="gradient"
gradientUnits="userSpaceOnUse"
fy="90%"
gradientTransform="rotate(-11)"
>
<stop offset={0} style={{ stopColor: "#2F2A7B" }} />
<stop offset={1} style={{ stopColor: "#39B54A" }} />
</linearGradient>
<mask
id="svg-mask"
maskUnits="userSpaceOnUse"
x={0}
y={0}
width={1080}
height={1080}
>
<path
id="pathsvg"
d="M169,786.34Q363.359996,175.978707,899.999998,336.45q-179.120002,587.259106-529.72,350.82q69.719998-251.25,299.72-209.26"
fill="none"
strokeWidth={50}
strokeLinecap="round"
strokeLinejoin="miter"
/>
</mask>
</defs>

<g mask="url(#svg-mask)">
<rect x={0} y={0} width={1080} height={1080} fill="white" />
<rect
id="svg-gradient"
x={0}
y={0}
width={1080}
height={1080}
fill="url(#gradient)"
/>
</g>
</svg>

<div className="flex lg:order-2">
<div className="relative mr-3 lg:mr-0 hidden lg:block"></div>
{/* button for mobile view */}
<button
onClick={() => setShow(!show)}
type="button"
className="lg:hidden text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center"
>
<span className="sr-only">Open main menu</span>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
<svg
className="hidden w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
{/* a link and button style and function control from here */}
<div
className={
show
? "lg:flex justify-between items-center w-full lg:w-auto lg:order-1"
: "hidden lg:flex justify-between items-center w-full lg:w-auto lg:order-1"
}
id="mobile-menu-3"
>
<div className="flex-col lg:flex-row flex lg:space-x-8 mt-5 lg:mt-0 lg:text-sm lg:font-medium">
{/* a loop or fetch the link data from the array */}
{nav.map((value, idx) => {
return (
<div key={idx}>
<a
className="bg-[#202020] lg:my-6 font-semibold text-center focus:rounded-3xl lg:bg-transparent text-white block pl-3 pr-4 py-2 lg:text-black lg:p-0 rounded"
aria-current="page"
href={value.add}
>
{value.name}
</a>
</div>
);
})}
<div className="lg:mt-[1rem] ml-[43vw] lg:ml-0 lg:space-x-2 flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-[90vw] lg:absolute lg:right-4 lg:w-auto"></div>
</div>
</div>
</div>
</nav>
</>
);
};

export default ResponsiveNavbar;
Loading