Skip to content

Commit

Permalink
gfsd
Browse files Browse the repository at this point in the history
  • Loading branch information
neerajrekwar committed Aug 7, 2024
1 parent bc0d917 commit 831cfa5
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 131 deletions.
103 changes: 102 additions & 1 deletion app/components/ImageSlides.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,102 @@
Leveraging modern JavaScript features
'use client'
import * as React from "react";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { wrap } from "popmotion";


const images = [
"https://d33wubrfki0l68.cloudfront.net/dd23708ebc4053551bb33e18b7174e73b6e1710b/dea24/static/images/wallpapers/[email protected]",
"https://d33wubrfki0l68.cloudfront.net/49de349d12db851952c5556f3c637ca772745316/cfc56/static/images/wallpapers/[email protected]",
"https://d33wubrfki0l68.cloudfront.net/594de66469079c21fc54c14db0591305a1198dd6/3f4b1/static/images/wallpapers/[email protected]"
];

const variants = {
enter: (direction: number) => {
return {
x: direction > 0 ? 1000 : -1000,
opacity: 0
};
},
center: {
zIndex: 1,
x: 0,
opacity: 1
},
exit: (direction: number) => {
return {
zIndex: 0,
x: direction < 0 ? 1000 : -1000,
opacity: 0
};
}
};

/**
* Experimenting with distilling swipe offset and velocity into a single variable, so the
* less distance a user has swiped, the more velocity they need to register as a swipe.
* Should accomodate longer swipes and short flicks without having binary checks on
* just distance thresholds and velocity > 0.
*/
const swipeConfidenceThreshold = 10000;
const swipePower = (offset: number, velocity: number) => {
return Math.abs(offset) * velocity;
};

export const ImageSlides = () => {
const [[page, direction], setPage] = useState([0, 0]);

// We only have 3 images, but we paginate them absolutely (ie 1, 2, 3, 4, 5...) and
// then wrap that within 0-2 to find our image ID in the array below. By passing an
// absolute page index as the `motion` component's `key` prop, `AnimatePresence` will
// detect it as an entirely new image. So you can infinitely paginate as few as 1 images.
const imageIndex = wrap(0, images.length, page);

const paginate = (newDirection: number) => {
setPage([page + newDirection, newDirection]);
};

return (
<>

<AnimatePresence initial={false} custom={direction} >
<motion.div
className=" justify-center items-center flex border-black overflow-x-hidden overflow-y-hidden"
>
<motion.img
key={page}
src={images[imageIndex]}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
transition={{
x: { type: "spring", stiffness: 300, damping: 30 },
opacity: { duration: .7 }
}}
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={1}
onDragEnd={(e, { offset, velocity }) => {
const swipe = swipePower(offset.x, velocity.x);

if (swipe < -swipeConfidenceThreshold) {
paginate(1);
} else if (swipe > swipeConfidenceThreshold) {
paginate(-1);
}
}}
/>
</motion.div>
</AnimatePresence>
<div className="next z-40 h-8 w-8 rounded-full absolute bg-white justify-center items-center flex top-20 left-2" onClick={() => paginate(1)}>
&#9666;
</div>
<div className="prev z-40 h-8 w-8 rounded-full absolute bg-white justify-center items-center flex top-20 right-2 " onClick={() => paginate(-1)}>
&#9656;
</div>

</>
);
};
186 changes: 56 additions & 130 deletions app/components/heroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { motion } from "framer-motion";
import Link from "next/link";
import { ShootingStarsAndStarsBackgroundDemo } from "./ShootingVsStarts";
import AgeCalculator from "./AgeCalculator";
import CountAnimation from "./CountAnimation";
import { ImageSlides } from "./ImageSlides";

export function HeroSection() {
return (
Expand Down Expand Up @@ -308,7 +310,7 @@ export function HeroSection() {
<motion.li
initial={{ opacity: 0, x: 40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 0.6 }}
transition={{ delay: 0.6 }}
className="m-2 rounded-lg text-six bg-four"
>
<svg
Expand Down Expand Up @@ -380,9 +382,31 @@ export function HeroSection() {
transition={{ delay: 1 }}
className="m-2 rounded-lg text-six bg-four"
>

<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon icon-tabler icons-tabler-outline icon-tabler-world-www"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" />
<path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" />
<path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" />
<path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" />
<path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" />
<path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" />
<path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" />
</svg>
<h4 className="px-2 text-xl font-semibold">
Efficient algorithms and data structures
How to Grow Online
</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expand Down Expand Up @@ -695,37 +719,29 @@ export function HeroSection() {
initial={{ opacity: 0, x: -40, y: -40 }}
animate={{ opacity: 1, x: 0, y: 0 }}
transition={{ duration: 1.2, delay: 0.4 }}
className="container flex flex-wrap md:grid md:grid-flow-row-dense md:grid-cols-2 md:grid-rows "
className="container flex flex-wrap md:grid md:grid-flow-row-dense md:grid-cols-3 md:grid-rows "
>
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 0.6 }}
className="m-2 rounded-lg text-six bg-four"
>
<h4 className="px-2 text-4xl font-semibold">
<h4 className="px-2 text-3xl font-semibold">
Optimized libraries and frameworks
</h4>
<div className="m-2">
<motion.div
drag
dragConstraints={{
top: -50,
left: -50,
right: 50,
bottom: 50,
}}
/>

</div>
</motion.li>
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 0.8 }}
className="m-2 rounded-lg text-six bg-four"
transition={{ delay: 0.7 }}
className="m-2 col-span-2 rounded-lg text-six bg-four"
>

<h4 className="px-2 text-xl font-semibold">
<h4 className="px-2 text-4xl font-semibold">
{" "}
Leveraging modern JavaScript features
</h4>
Expand All @@ -739,67 +755,25 @@ export function HeroSection() {
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 1 }}
className="m-2 rounded-lg text-six bg-four"
transition={{ delay: 0.8 }}
className="m-2 col-span-2 rounded-lg text-six bg-four"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon icon-tabler icons-tabler-outline icon-tabler-world-www"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" />
<path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" />
<path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" />
<path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" />
<path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" />
<path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" />
<path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" />
</svg>

<h4 className="px-2 text-xl font-semibold">
How to Grow Online
Efficient algorithms and data structures
</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusamus error alias unde optio deleniti. Deserunt vero,
ad a.
</p>
<div className="">
<ImageSlides />
</div>
</motion.li>
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 1.2 }}
transition={{ delay: 0.9 }}
className="m-2 rounded-lg text-six bg-four"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon icon-tabler icons-tabler-outline icon-tabler-building-store"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 21l18 0" />
<path d="M3 7v1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1h-18l2 -4h14l2 4" />
<path d="M5 21l0 -10.15" />
<path d="M19 21l0 -10.15" />
<path d="M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4" />
</svg>
<h4 className="px-2 text-xl font-semibold">Localization</h4>

<h4 className="px-2 text-xl font-semibold">Improved User Experience</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusamus error alias unde optio deleniti. Deserunt vero,
Expand All @@ -809,28 +783,12 @@ export function HeroSection() {
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 1.4 }}
transition={{ delay: 1 }}
className="m-2 rounded-lg text-six bg-four"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon icon-tabler icons-tabler-outline icon-tabler-brand-google-analytics"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 9m0 1.105a1.105 1.105 0 0 1 1.105 -1.105h1.79a1.105 1.105 0 0 1 1.105 1.105v9.79a1.105 1.105 0 0 1 -1.105 1.105h-1.79a1.105 1.105 0 0 1 -1.105 -1.105z" />
<path d="M17 3m0 1.105a1.105 1.105 0 0 1 1.105 -1.105h1.79a1.105 1.105 0 0 1 1.105 1.105v15.79a1.105 1.105 0 0 1 -1.105 1.105h-1.79a1.105 1.105 0 0 1 -1.105 -1.105z" />
<path d="M5 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
</svg>

<h4 className="px-2 text-xl font-semibold">
Google Analytics
versions to access the latest performance optimizations
</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expand All @@ -841,58 +799,26 @@ export function HeroSection() {
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 1.6 }}
className="m-2 rounded-lg text-six bg-four"
transition={{ delay: 1.1 }}
className="m-2 col-span-2 rounded-lg text-six bg-four"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon-tabler icons-tabler-outline icon-tabler-mailbox"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5" />
<path d="M12 11v-8h4l2 2l-2 2h-4" />
<path d="M6 15h1" />
</svg>
<h4 className="px-2 text-xl font-semibold">Ads Word</h4>

<h4 className="px-2 text-xl font-semibold">Balance innovation and stability</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusamus error alias unde optio deleniti. Deserunt vero,
ad a.
</p>
</motion.li>
<motion.li
initial={{ opacity: 0, x: -40, y: 40 }}
whileInView={{ opacity: 1, x: 0, y: 0 }}
transition={{ delay: 1.8 }}
className="m-2 rounded-lg text-six bg-four"
initial={{ opacity: 0, scale: 0.5, x: -40, y: 40 }}
whileInView={{ opacity: 1, scale: 1, x: 0, y: 0 }}
transition={{ delay: 1.2 }}
className="m-2 col-span-3 rounded-lg text-six bg-four"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={44}
height={44}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="m-2 icon-tabler icons-tabler-outline icon-tabler-mailbox"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5" />
<path d="M12 11v-8h4l2 2l-2 2h-4" />
<path d="M6 15h1" />
</svg>

<h4 className="px-2 text-xl font-semibold">
Email Marketing
Rigorously test your application
</h4>
<p className="m-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Expand Down
4 changes: 4 additions & 0 deletions app/demo/page.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import CountAnimation from "../components/CountAnimation";
import { ImageSlides } from "../components/ImageSlides";

export default function Demo(){
return(
<>
<div className="example-container">
<ImageSlides />
</div>
<section className="min-h-screen justify-center flex items-center text-white bg-secondary">
<CountAnimation />
</section>
Expand Down
Loading

0 comments on commit 831cfa5

Please sign in to comment.