From d5d1ae3e955c94c84689581179f9c29f03fc8f8a Mon Sep 17 00:00:00 2001 From: charispinto Date: Sat, 5 Oct 2024 15:26:04 +0530 Subject: [PATCH 1/3] Added perfomers stacking card component --- package-lock.json | 47 ++++++++- package.json | 2 + src/components/stacking-cards/performers.json | 26 +++++ src/components/stacking-cards/stacked.css | 98 +++++++++++++++++++ src/components/stacking-cards/stacked.tsx | 90 +++++++++++++++++ 5 files changed, 259 insertions(+), 4 deletions(-) create mode 100644 src/components/stacking-cards/performers.json create mode 100644 src/components/stacking-cards/stacked.css create mode 100644 src/components/stacking-cards/stacked.tsx diff --git a/package-lock.json b/package-lock.json index 85a7ae8..a69b8a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,8 +41,10 @@ "clsx": "^2.1.1", "crypto": "^1.0.1", "framer-motion": "^11.9.0", + "gsap": "^3.12.5", "ioredis": "^5.4.1", "jest": "^29.7.0", + "lenis": "^1.1.13", "lodash.debounce": "^4.0.8", "lucide-react": "^0.441.0", "next": "14.2.6", @@ -720,6 +722,11 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "license": "MIT" }, + "node_modules/@darkroom.engineering/tempus": { + "version": "0.0.46", + "resolved": "https://registry.npmjs.org/@darkroom.engineering/tempus/-/tempus-0.0.46.tgz", + "integrity": "sha512-s5vav3KMHYezvUCl4ee5epg0oimF6M8C9gAaKxFnFaTvX2q3ywFDryIv6XLd0mRFUt3S1uHDJqKaiEcs2ZVSvw==" + }, "node_modules/@effect/platform": { "version": "0.63.2", "resolved": "https://registry.npmjs.org/@effect/platform/-/platform-0.63.2.tgz", @@ -7184,6 +7191,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -9098,6 +9110,30 @@ "url": "https://ko-fi.com/killymxi" } }, + "node_modules/lenis": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.1.13.tgz", + "integrity": "sha512-iny+vWwUHcZGbJz+p2I75H1muLBRZqSG7t04jnhA+CWOQDFL1vt9bsZDwPPtYEmYVVvqAdo5MbXVFzNOlbgUkQ==", + "dependencies": { + "@darkroom.engineering/tempus": "^0.0.46" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/darkroomengineering" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -9549,10 +9585,9 @@ } }, "node_modules/next-auth": { - "version": "4.24.7", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.7.tgz", - "integrity": "sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==", - "license": "ISC", + "version": "4.24.8", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.8.tgz", + "integrity": "sha512-SLt3+8UCtklsotnz2p+nB4aN3IHNmpsQFAZ24VLxGotWGzSxkBh192zxNhm/J5wgkcrDWVp0bwqvW0HksK/Lcw==", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -9565,12 +9600,16 @@ "uuid": "^8.3.2" }, "peerDependencies": { + "@auth/core": "0.34.2", "next": "^12.2.5 || ^13 || ^14", "nodemailer": "^6.6.5", "react": "^17.0.2 || ^18", "react-dom": "^17.0.2 || ^18" }, "peerDependenciesMeta": { + "@auth/core": { + "optional": true + }, "nodemailer": { "optional": true } diff --git a/package.json b/package.json index 748273b..af6bf7b 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,10 @@ "clsx": "^2.1.1", "crypto": "^1.0.1", "framer-motion": "^11.9.0", + "gsap": "^3.12.5", "ioredis": "^5.4.1", "jest": "^29.7.0", + "lenis": "^1.1.13", "lodash.debounce": "^4.0.8", "lucide-react": "^0.441.0", "next": "14.2.6", diff --git a/src/components/stacking-cards/performers.json b/src/components/stacking-cards/performers.json new file mode 100644 index 0000000..b262fda --- /dev/null +++ b/src/components/stacking-cards/performers.json @@ -0,0 +1,26 @@ +[ + { + "id": 1, + "title": "Performer 1", + "description": " ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", + "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" + }, + { + "id": 2, + "title": "Performer 2", + "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", + "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" + }, + { + "id": 3, + "title": "Performer 3", + "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", + "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" + }, + { + "id": 4, + "title": "Performer 4", + "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!", + "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100" + } +] diff --git a/src/components/stacking-cards/stacked.css b/src/components/stacking-cards/stacked.css new file mode 100644 index 0000000..384b73a --- /dev/null +++ b/src/components/stacking-cards/stacked.css @@ -0,0 +1,98 @@ +.sticky-section { + box-sizing: border-box; + position: relative; +} + +.cards__item { + position: sticky; + top: 0; +} + +.cards_el { + will-change: transform; + background: white; + border-radius: 14px; + display: flex; + overflow: hidden; + box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%); + transform-origin: center top; +} + +.cards { + padding: 10px; + box-sizing: border-box; + width: 100%; + max-width: 900px; + margin: 0 auto; + display: grid; + /* grid-template-rows: repeat(var(--cards-count), var(--card-height)); */ + gap: 40px 0; +} + +.card__image-container { + display: flex; + width: 40%; + flex-shrink: 0; +} + +.card__image { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 1; +} + +.card__content { + padding: 40px 30px; + display: flex; + flex-direction: column; +} + +.card__title { + padding: 0; + margin: 0; + font-size: 60px; + font-weight: 600; + color: #16263a; +} + +.card__description { + line-height: 1.4; + font-size: 24px; + color: #16263a; +} + +.space { + height: 90vh; + font-size: 24px; +} + +.space--small { + height: 40vh; +} + +@media (max-width: 600px) { + .card_el { + flex-direction: column; + } + + .card__image-container { + width: 100%; + } + + .card__image { + aspect-ratio: 16 / 9; + } + + .card__title { + font-size: 32px; + } + + .card__description { + font-size: 16px; + } + + .card__content { + padding: 30px 20px; + } +} diff --git a/src/components/stacking-cards/stacked.tsx b/src/components/stacking-cards/stacked.tsx new file mode 100644 index 0000000..fa493a4 --- /dev/null +++ b/src/components/stacking-cards/stacked.tsx @@ -0,0 +1,90 @@ +"use client"; +import { useEffect, useRef } from "react"; +import "@/components/stacking-cards/stacked.css"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import Lenis from "lenis"; +import performersData from "@/components/stacking-cards/performers.json"; + +export default function StackedCards() { + const cardsRef = useRef([]); + useEffect(() => { + gsap.registerPlugin(ScrollTrigger); + + const lenis = new Lenis(); + lenis.on("scroll", ScrollTrigger.update); + + gsap.ticker.add((time) => { + lenis.raf(time * 1000); + }); + + gsap.ticker.lagSmoothing(0); + + const cardsWrapper = gsap.utils.toArray(".cards__item"); + const cardsEl = gsap.utils.toArray(".cards_el"); + + cardsWrapper.forEach((e, i) => { + const card = cardsEl[i] as HTMLDivElement; + let scale = 1, + rotate = 0; + + if (i !== cardsEl.length - 1) { + scale = 0.9 + 0.025 * i; + rotate = -10; + } + // console.log(`Card Index: ${i}, Scale: ${scale}, Rotate: ${rotate}`); + + gsap.to(card, { + scale: scale, + rotationX: rotate, + transformOrigin: "top center", + ease: "none", + scrollTrigger: { + trigger: e, + start: "top " + (50 + 30 * i), + end: "bottom +=650px", + endTrigger: ".end-animation", + pin: e, + pinSpacing: false, + scrub: true, + }, + }); + }); + + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, []); + return ( +
+
+ {performersData.map((card, index) => ( +
{ + if (el) cardsRef.current[index] = el; + }} + > +
+
+ {`Card +
+
+

{card.title}

+

{card.description}

+
+
+
+ ))} +
+
+
+
+ ); +} From cef652863d350ba8bbd1d783fd5224de98d66615 Mon Sep 17 00:00:00 2001 From: charispinto Date: Sat, 5 Oct 2024 16:18:01 +0530 Subject: [PATCH 2/3] Fixed stacking cards mobile view responsiveness --- src/components/stacking-cards/stacked.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/stacking-cards/stacked.css b/src/components/stacking-cards/stacked.css index 384b73a..eb069b6 100644 --- a/src/components/stacking-cards/stacked.css +++ b/src/components/stacking-cards/stacked.css @@ -25,7 +25,7 @@ max-width: 900px; margin: 0 auto; display: grid; - /* grid-template-rows: repeat(var(--cards-count), var(--card-height)); */ + grid-template-rows: repeat(4, var(--card-height)); gap: 40px 0; } @@ -72,7 +72,7 @@ } @media (max-width: 600px) { - .card_el { + .cards_el { flex-direction: column; } From 7f807859a3435fc0a2c9f270107eb87740e7cb24 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Sun, 6 Oct 2024 07:37:43 +0000 Subject: [PATCH 3/3] fixed the footer import build error --- src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 5a23544..5a2ebba 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,7 +4,7 @@ import React from "react"; import HorizontalScroll from "@/components/common/HorizontalScrollCarousel"; import TextReveal from "@/components/ui/text-reveal"; import HeroVideoDialog from "@/components/ui/hero-video-dialog"; -import ParallaxFooter from "@/components/Footer"; +import ParallaxFooter from "@/components/common/Footer"; import StackedCards from "@/components/stacking-cards/stacked"; export default function Home() {