diff --git a/public/images/dashboard.png b/public/images/dashboard.png new file mode 100644 index 0000000..85d6b5c Binary files /dev/null and b/public/images/dashboard.png differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9bcdb9c..0b15be9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -45,7 +45,7 @@ export default function RootLayout({ `} - +
diff --git a/src/components/FlitchPayFinal.tsx b/src/components/FlitchPayFinal.tsx index 5dc77e5..5f9d806 100644 --- a/src/components/FlitchPayFinal.tsx +++ b/src/components/FlitchPayFinal.tsx @@ -6,7 +6,7 @@ import Link from "next/link"; export function FlitchPayFinal() { return ( -
+
-
-
+
{isMobile ? ( ) : ( - App Demo + App Demo )}
diff --git a/src/components/WhatsFlitchPay.tsx b/src/components/WhatsFlitchPay.tsx index ed98035..b21332f 100644 --- a/src/components/WhatsFlitchPay.tsx +++ b/src/components/WhatsFlitchPay.tsx @@ -1,98 +1,120 @@ -import { buttonVariants } from "@/components/ui/button"; -import { Icons } from "@/lib/icons"; -import { cn } from "@/lib/utils"; +"use client"; import { FeaturesStar } from "@/public/svgs/FeaturesStar"; -import { VectorRight } from "@/public/svgs/VectorRight"; +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 from "react"; +import React, { CSSProperties } from "react"; import Image from "next/image"; +import clsx from "clsx"; +import { useActivePage } from "../app/_context"; export function WhatsFlitchPay() { + const { activePage } = useActivePage(); + type WrapperStyle = CSSProperties & { + "--bottom": string; + }; + + const { ref } = useInView({}); return ( -
-
- -
- {/* card1 */} -
-
+ <> +
+
+ +
+ {/* card1 */} +
+
+
+ Sophisticated Checkouts + + {" "} + create space to ask questions and have open-ended + conversations. + +
+ +
+ Enable GitHub Discussion {"->"} + {/* Right Arrow */} + Enable Github Discussions +
+ +
- Sophisticated Checkouts - - {" "} - create space to ask questions and have open-ended - conversations. - + App
- -
- 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 +
- {/* card2 */} -
-
-
- On Make products & Sell + {/* card3 */} +
+
+
+ On premise Messaging & Real-time Payments {" "} - allow communication and collaboration about code changes. + lets you support your favorite open source maintainers and + projects. + +
+ Invest with GitHub Sponsors {"->"} + {/* Right Arrow */} + Invest with GitHub Sponsors +
+
- -
- Check out pull requests {"->"} - {/* Right Arrow */} - Check out pull requests +
+
+ laptop
- -
-
- 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 +
+ mobile
- -
-
-
- laptop -
-
- mobile
+
+
+
-
+ ); } diff --git a/src/components/WhatsFlitchPay2.tsx b/src/components/WhatsFlitchPay2.tsx index e7d97b5..fffc885 100644 --- a/src/components/WhatsFlitchPay2.tsx +++ b/src/components/WhatsFlitchPay2.tsx @@ -12,183 +12,205 @@ import { Terminal } from "@/public/svgs/Terminal"; import { useActivePage } from "../app/_context"; export function WhatsFlitchPay2() { - const {activePage} = useActivePage(); - if (activePage=="Personal"){ + const { activePage } = useActivePage(); + if (activePage == "Personal") { return; } return ( -
-
- -
-
-
- Inbound Payments -
-
- - Create Inbound Payments - + <> +
+
+
+ +
+
+
+ Inbound Payments +
+
+ + Create Inbound Payments + +
-
-
- {/* card1 */}
-
- Encrypt or Redact your Data -
-
- Inbound Relay is a proxy that intercepts and encrypts or redacts - selected fields in an HTTPS request before forwarding the - request to its original destination. -
+ {/* card1 */}
-
-

- Create an Inbound Relay with an onboarding tutorial. -

-
- - Get Started - -
+
+ Encrypt or Redact your Data
- -
-
- -
- - - - Get Started -
-
- {">"} -
- - +
-
- - - - Follow a Quickstart +
+

+ Create an Inbound Relay with an onboarding tutorial. +

+
+ + Get Started + +
-
+
+
+ - {">"} -
- -
-
- {/* card2 */} -
- {/* card1 */} -
-
-
+
+ + + + Get Started +
- + {">"}
-
Client
-
- -
+ -  {'"name":"Claude"'}  -
+
+ + + + Follow a Quickstart +
+
+ {">"} +
+
-
{">"}
{/* card2 */} -
-
-
+
+ {/* card1 */} +
+
+
+
+ +
+
Client
+
+
- +  {'"name":"Claude"'} 
-
Inbound Relay
-
-
{">"}
- {/* card3 */} -
-
-
-
- +
{">"}
+ {/* card2 */} +
+
+
+
+ +
+
Inbound Relay
-
Server
+
+
{">"}
+ {/* card3 */} +
+
+
+
+ +
+
Server
+
-
- {'"name":"ev:Tk9D"'} +
+ {'"name":"ev:Tk9D"'} +
-
-
+
+
+ ); } diff --git a/src/styles/globals.css b/src/styles/globals.css index e037c41..41e463b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -283,3 +283,54 @@ z-index: 0; } +.lampcontainer { + position: relative; + margin-top: -330px; + contain: layout; + height: 420px; +} + +.lamp { + width: 100%; + height: 400px; + position: relative; + margin-bottom: -400px; + pointer-events: none; + user-select: none; + --first: conic-gradient( + from 90deg at 80% 50%, + hsl(var(--background)), + hsl(var(--background)), + var(--bottom) + ); + --second: conic-gradient( + from 270deg at 20% 50%, + var(--bottom), + hsl(var(--background)), + hsl(var(--background)) + ); + -webkit-mask-image: radial-gradient(100% 50% at center center, black, transparent); + background-image: var(--first), var(--second); + /* background-attachment:; + background-origin:; + background-clip:; + background-color: ; */ + background-position-x: 1%, 99%; + background-position-y: 0%, 0%; + background-size: + 50% 100%, + 50% 100%; + opacity: 1; + transform-origin: center center; + background-repeat: no-repeat; +} + +.lamp::after { + content: ''; + position: absolute; + inset: 0px 0px 50%; + overflow: hidden; + opacity: 0.1; + -webkit-mask-image: radial-gradient(140px 50% at 50% 100%, black, transparent); + mask-image: radial-gradient(140px 50% at 50% 100%, black, transparent); +} \ No newline at end of file