Skip to content

Commit

Permalink
Merge pull request #20 from me-imfhd/branch
Browse files Browse the repository at this point in the history 
Final work
  • Loading branch information
@moonlightnexus
moonlightnexus authored Nov 9, 2023
2 parents accf33b + 25ec1bd commit 553a131
Show file tree
Hide file tree
Showing 7 changed files with 309 additions and 221 deletions.
Binary file added public/images/dashboard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function RootLayout({
`}
</Script>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<ThemeProvider attribute="class" defaultTheme="dark">
<ActivePageProvider>
<div className="flex min-h-screen flex-col ">
<Navbar />
Expand Down
2 changes: 1 addition & 1 deletion src/components/FlitchPayFinal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Link from "next/link";

export function FlitchPayFinal() {
return (
<section className="flex items-center">
<section className="flex md:pt-10 items-center">
<div className="items-center md:mx-auto md:min-w-[768px] md:max-w-[1600px]">
<div
style={{
Expand Down
13 changes: 3 additions & 10 deletions src/components/GradientPlatform.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import ArrowIcon from "./ArrowIcon";
import AnimatedGradient from "./gradients/AnimatedGradient";
import React from "react";
import dashboard from "@/public/images/dashboard.png";
import { useMediaQuery } from "@mantine/hooks";
import MobileAppDemo from "../../public/images/MobileAppDemo.webp";
import AppDemo from "../../public/page3.png";
Expand All @@ -13,7 +14,6 @@ export default function GradientPlatform() {

return (
<div className="w-full bg-background py-8 ">

<div className="relative">
<div className="flex items-center justify-center px-4">
<div
Expand All @@ -22,22 +22,15 @@ export default function GradientPlatform() {
boxShadow: "0px 0px 9.5px 1px #ffffff33 inset",
}}
>
<div
style={{
borderRadius: "0.90906rem",
background: "linear-gradient(180deg, #EBEBEB 0%, #E1E1E1 100%)",
boxShadow:
"0px 1.18388px 37.88403px -7.27255px #000, 0px 24.24183px 37.88403px -6.06046px rgba(0, 0, 0, 0.10)",
}}
>
<div>
{isMobile ? (
<Image
src={MobileAppDemo}
alt="App Demo"
className="p-2 md:p-4"
/>
) : (
<Image src={AppDemo} alt="App Demo" className="p-2 md:p-4" />
<Image src={dashboard} alt="App Demo" className="" />
)}
</div>
</div>
Expand Down
160 changes: 91 additions & 69 deletions src/components/WhatsFlitchPay.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<section className="flex items-center bg-background py-14 md:py-24 lg:pt-32 ">
<div className="container mx-auto flex flex-col items-center gap-4 md:px-48 ">
<HeadComponent />
<div className="mt-14 flex flex-wrap gap-4 md:flex-nowrap md:text-lg">
{/* card1 */}
<div className="flex flex-col justify-between gap-8 rounded-md bg-secondary font-semibold md:w-1/2 ">
<div className="flex flex-col justify-between gap-6 px-6 pt-6 md:px-14 md:pt-14">
<>
<section className="flex items-center bg-transparent pt-14 md:py-20 ">
<div className="container mx-auto flex flex-col items-center gap-4 md:px-48 ">
<HeadComponent />
<div className="mt-14 flex flex-wrap gap-4 md:flex-nowrap md:text-lg">
{/* card1 */}
<div className="flex flex-col justify-between gap-8 rounded-md bg-secondary font-semibold md:w-1/2 ">
<div className="flex flex-col justify-between gap-6 px-6 pt-6 md:px-14 md:pt-14">
<div>
Sophisticated Checkouts
<span className="font-normal text-muted-foreground">
{" "}
create space to ask questions and have open-ended
conversations.
</span>
</div>
<Link href={""}>
<div className="flex text-base transition-colors hover:text-muted-foreground">
Enable GitHub Discussion {"->"}
{/* Right Arrow */}
<span className="sr-only">Enable Github Discussions</span>
</div>
</Link>
</div>
<div>
Sophisticated Checkouts
<span className="font-normal text-muted-foreground">
{" "}
create space to ask questions and have open-ended
conversations.
</span>
<Image src={discussion} alt="App" className="" />
</div>
<Link href={""}>
<div className="flex text-base transition-colors hover:text-muted-foreground">
Enable GitHub Discussion {"->"}
{/* Right Arrow */}
<span className="sr-only">Enable Github Discussions</span>
</div>
</Link>
</div>
<div>
<Image src={discussion} alt="App" className="" />
{/* card2 */}
<div className="flex flex-col gap-12 rounded-md bg-secondary font-semibold md:w-1/2 md:gap-16 ">
<div className="flex flex-col justify-between gap-8 px-6 pt-6 md:px-14 md:pt-14">
<div>
On Make products & Sell
<span className="font-normal text-muted-foreground">
{" "}
allow communication and collaboration about code changes.
</span>
</div>
<Link href={""}>
<div className="flex text-base transition-colors hover:text-muted-foreground">
Check out pull requests {"->"}
{/* Right Arrow */}
<span className="sr-only">Check out pull requests</span>
</div>
</Link>
</div>
<div>
<Image src={pullRequests} alt="App" className="" />
</div>
</div>
</div>
{/* card2 */}
<div className="flex flex-col gap-12 rounded-md bg-secondary font-semibold md:w-1/2 md:gap-16 ">
<div className="flex flex-col justify-between gap-8 px-6 pt-6 md:px-14 md:pt-14">
<div>
On Make products & Sell
{/* card3 */}
<div className="flex w-full gap-12 rounded-md bg-secondary font-semibold md:gap-16 md:text-lg ">
<div className="flex w-full flex-wrap md:flex-nowrap">
<div className="pl-6 pt-6 md:w-5/12 md:pl-14 md:pt-14">
On premise Messaging & Real-time Payments
<span className="font-normal text-muted-foreground">
{" "}
allow communication and collaboration about code changes.
lets you support your favorite open source maintainers and
projects.
</span>
<Link href={""}>
<div className="mt-6 flex text-base transition-colors hover:text-muted-foreground">
Invest with GitHub Sponsors {"->"}
{/* Right Arrow */}
<span className="sr-only">Invest with GitHub Sponsors</span>
</div>
</Link>
</div>
<Link href={""}>
<div className="flex text-base transition-colors hover:text-muted-foreground">
Check out pull requests {"->"}
{/* Right Arrow */}
<span className="sr-only">Check out pull requests</span>
<div className="mt-8 flex overflow-hidden md:mt-0">
<div className="-me-20 md:-me-52">
<Image src={laptop} alt="laptop"></Image>
</div>
</Link>
</div>
<div>
<Image src={pullRequests} alt="App" className="" />
</div>
</div>
</div>
{/* card3 */}
<div className="flex w-full gap-12 rounded-md bg-secondary font-semibold md:gap-16 md:text-lg ">
<div className="flex w-full flex-wrap md:flex-nowrap">
<div className="pl-6 pt-6 md:w-5/12 md:pl-14 md:pt-14">
On premise Messaging & Real-time Payments
<span className="font-normal text-muted-foreground">
{" "}
lets you support your favorite open source maintainers and
projects.
</span>
<Link href={""}>
<div className="mt-6 flex text-base transition-colors hover:text-muted-foreground">
Invest with GitHub Sponsors {"->"}
{/* Right Arrow */}
<span className="sr-only">Invest with GitHub Sponsors</span>
<div className="md:-me-14 ">
<Image src={mobile} alt="mobile"></Image>
</div>
</Link>
</div>
<div className="mt-8 flex overflow-hidden md:mt-0">
<div className="-me-20 md:-me-52">
<Image src={laptop} alt="laptop"></Image>
</div>
<div className="md:-me-14 ">
<Image src={mobile} alt="mobile"></Image>
</div>
</div>
</div>
</div>
</section>
<div className="lampcontainer -z-10 flex rotate-180 opacity-50 dark:opacity-100">
<div
className={clsx(
{ "scale-[3] md:scale-[2] 2xl:scale-[1.55]": InView },
"lamp translate-z-0 translate-y-[-180px] rotate-180 scale-50 animate-none duration-1000",
)}
ref={ref}
style={
{
"--bottom": `${activePage == "Business" ? "#ff9500" : "#FFB800"}`,
} as WrapperStyle
}
/>
</div>
</section>
</>
);
}

Expand Down
Loading

0 comments on commit 553a131

Please sign in to comment.