diff --git a/package-lock.json b/package-lock.json index bed5b5e..9e40a1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "clsx": "^2.0.0", "eslint": "8.49.0", "eslint-config-next": "13.4.19", + "framer-motion": "^10.12.22", "lucide-react": "^0.277.0", "next": "13.5.4", "next-themes": "^0.2.1", @@ -107,6 +108,21 @@ "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz", "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -2870,6 +2886,29 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", + "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", diff --git a/package.json b/package.json index 717425f..b2cd257 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "clsx": "^2.0.0", "eslint": "8.49.0", "eslint-config-next": "13.4.19", + "framer-motion": "^10.12.22", "lucide-react": "^0.277.0", "next": "13.5.4", "next-themes": "^0.2.1", diff --git a/src/components/FeaturesCards.tsx b/src/components/FeaturesCards.tsx new file mode 100644 index 0000000..7ba88b0 --- /dev/null +++ b/src/components/FeaturesCards.tsx @@ -0,0 +1,169 @@ +"use client"; +import Image, { StaticImageData } from "next/image"; + +import Link from "next/link"; +import { + MotionStyle, + MotionValue, + motion, + useMotionTemplate, + useMotionValue, +} from "framer-motion"; +import React, { + CSSProperties, + PropsWithChildren, + useState, + MouseEvent, + useEffect, +} from "react"; +import discussion from "@/public/images/discussions.png"; +import pullRequests from "@/public/images/pull-requests.png"; +import laptop from "@/public/images/FlitchPayLaptop.webp"; +import mobile from "@/public/images/FlitchPayMobile.webp"; +import { useMediaQuery } from "@mantine/hooks"; +import clsx from "clsx"; + +type WrapperStyle = MotionStyle & { + "--x": MotionValue; + "--y": MotionValue; +}; +interface CardProps { + bgClass?: string; + cardWidth: string; +} + +function FeatureCard({ + bgClass, + cardWidth, + children, +}: CardProps & { + children: React.ReactNode; +}) { + const [mounted, setMounted] = useState(false); + const mouseX = useMotionValue(0); + const mouseY = useMotionValue(0); + const isMobile = useMediaQuery("768px"); + + function handleMouseMove({ currentTarget, clientX, clientY }: MouseEvent) { + if (isMobile) return; + const { left, top } = currentTarget.getBoundingClientRect(); + mouseX.set(clientX - left); + mouseY.set(clientY - top); + } + + useEffect(() => { + setMounted(true); + }, []); + + return ( + +
+
{mounted ? children : null}
+
+ + ); +} + +export function Card1() { + return ( + +
+
+

+ Sophisticated Checkoutsl{" "} + + create space to ask questions and have open-ended conversations. + +

+ +
+ Enable GitHub Discussion {"->"} + {/* Right Arrow */} + Enable GitHub Discussion +
+ +
+
+ App +
+
+ + ); +} + +export function Card2() { + return ( + +
+
+

+ On Make products & Sell{" "} + + allow communication and collaboration about code changes. + +

+ +
+ Check out pull requests {"->"} + {/* Right Arrow */} + Check out pull requests +
+ +
+
+ App +
+
+ + ); +} +export function Card3() { + return ( + +
+
+

+ On premise Messaging & Real-time Payments{" "} + + lets you support your favorite open source maintainers and + projects. + +

+ +
+ Invest with GitHub Sponsors {"->"} + {/* Right Arrow */} + Invest with GitHub Sponsors +
+ +
+
+
+ laptop +
+
+ mobile +
+
+
+ + ); +} diff --git a/src/components/WhatsFlitchPay.tsx b/src/components/WhatsFlitchPay.tsx index b21332f..3463bec 100644 --- a/src/components/WhatsFlitchPay.tsx +++ b/src/components/WhatsFlitchPay.tsx @@ -1,13 +1,7 @@ -"use client"; import { FeaturesStar } from "@/public/svgs/FeaturesStar"; import { InView, useInView } from "react-intersection-observer"; -import Link from "next/link"; -import discussion from "@/public/images/discussions.png"; -import pullRequests from "@/public/images/pull-requests.png"; -import laptop from "@/public/images/FlitchPayLaptop.webp"; -import mobile from "@/public/images/FlitchPayMobile.webp"; import React, { CSSProperties } from "react"; -import Image from "next/image"; +import { Card1, Card2, Card3 } from "./FeaturesCards"; import clsx from "clsx"; import { useActivePage } from "../app/_context"; @@ -25,79 +19,12 @@ export function WhatsFlitchPay() {
{/* card1 */} -
-
-
- Sophisticated Checkouts - - {" "} - create space to ask questions and have open-ended - conversations. - -
- -
- Enable GitHub Discussion {"->"} - {/* Right Arrow */} - Enable Github Discussions -
- -
-
- App -
-
+ {/* card2 */} -
-
-
- On Make products & Sell - - {" "} - allow communication and collaboration about code changes. - -
- -
- Check out pull requests {"->"} - {/* Right Arrow */} - Check out pull requests -
- -
-
- App -
-
+
{/* card3 */} -
-
-
- On premise Messaging & Real-time Payments - - {" "} - lets you support your favorite open source maintainers and - projects. - - -
- Invest with GitHub Sponsors {"->"} - {/* Right Arrow */} - Invest with GitHub Sponsors -
- -
-
-
- laptop -
-
- mobile -
-
-
-
+
diff --git a/src/styles/globals.css b/src/styles/globals.css index 41e463b..d8fd2df 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -282,6 +282,20 @@ --gradient-color-4: #000000; z-index: 0; } +.animated-feature-cards::before { + @apply pointer-events-none absolute select-none rounded-3xl opacity-0 transition-opacity duration-300 hover:opacity-100; + background: radial-gradient( + 1000px circle at var(--x) var(--y), + #3aecf8 0, + #5295dc 25%, + rgba(255, 255, 255, 0) 50%, + transparent 80% + ); + z-index: -1; + content: ''; + inset: -1px; +} + .lampcontainer { position: relative;