Skip to content

Commit

Permalink
dashboard image changes in gradient platform, blur effect added in wh…
Browse files Browse the repository at this point in the history 
…atsflitchpay2
  • Loading branch information
@me-imfhd
me-imfhd committed Nov 9, 2023
1 parent 650cec8 commit 25ec1bd
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 151 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/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
302 changes: 162 additions & 140 deletions src/components/WhatsFlitchPay2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<section className="flex items-center bg-white py-12 text-black md:py-24 lg:pt-32 ">
<div className="container mx-auto flex flex-col items-center gap-16 md:gap-28 md:px-48 ">
<HeadComponent />
<div className="w-full">
<div className="flex items-center justify-between text-xs">
<div className="text-base font-semibold md:text-xl">
Inbound Payments
</div>
<div>
<Link
href="/"
className="items-center rounded-full bg-violet-600 px-4 py-2 text-[0.6rem] text-white backdrop-filter-none hover:bg-violet-700 md:text-base "
>
Create Inbound Payments
</Link>
<>
<section className="relative flex items-center bg-white md:my-20 my-10 py-12 text-black md:py-24 lg:pt-32 ">
<div
style={{
position: "absolute",
top: "-10px",
left: "0",
width: "100%",
height: "40px",
backdropFilter: "blur(5px)",
}}
></div>
<div className="container mx-auto flex flex-col items-center gap-16 md:gap-28 md:px-48 ">
<HeadComponent />
<div className="w-full">
<div className="flex items-center justify-between text-xs">
<div className="text-base font-semibold md:text-xl">
Inbound Payments
</div>
<div>
<Link
href="/"
className="items-center rounded-full bg-violet-600 px-4 py-2 text-[0.6rem] text-white backdrop-filter-none hover:bg-violet-700 md:text-base "
>
Create Inbound Payments
</Link>
</div>
</div>
</div>
<div
className="mt-4 flex flex-wrap justify-between overflow-hidden rounded-[4rem] md:mt-14 md:flex-nowrap"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
{/* card1 */}
<div
className="flex flex-col gap-4 p-6 pt-8 md:w-1/2 md:p-9"
className="mt-4 flex flex-wrap justify-between overflow-hidden rounded-[4rem] md:mt-14 md:flex-nowrap"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
<div className="text-lg font-medium">
Encrypt or Redact your Data
</div>
<div
className="text-sm "
style={{ color: "hsla(236, 16%, 20%, 1)" }}
>
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.
</div>
{/* card1 */}
<div
className="flex flex-wrap gap-4 rounded-[2rem] p-6 md:flex-nowrap"
className="flex flex-col gap-4 p-6 pt-8 md:w-1/2 md:p-9"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
<div className="text-[0.84rem] md:mt-8 md:w-1/2">
<p style={{ color: "hsla(236, 16%, 20%, 1)" }}>
Create an Inbound Relay with an onboarding tutorial.
</p>
<div className="mt-2">
<Link
href="/"
className="items-center rounded-full bg-violet-600 px-2.5 py-1.5 text-[0.775rem] text-white hover:bg-violet-700"
>
Get Started
</Link>
</div>
<div className="text-lg font-medium">
Encrypt or Redact your Data
</div>
<Image className="md:w-1/2" src={inboundRelay} alt="" />
</div>
<div className="flex flex-wrap gap-2 md:flex-nowrap md:gap-4">
<Link
href="/"
className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
<div
className="text-sm "
style={{ color: "hsla(236, 16%, 20%, 1)" }}
>
<div className="flex items-center gap-2 ">
<span>
<Book />
</span>
Get Started
</div>
<div
className="font-semibold"
style={{ color: "hsla(236, 16%, 20%, 1)" }}
>
{">"}
</div>
</Link>
<Link
href="/"
className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
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.
</div>
<div
className="flex flex-wrap gap-4 rounded-[2rem] p-6 md:flex-nowrap"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
<div className="flex items-center gap-2 ">
<span>
<Rocket />
</span>
Follow a Quickstart
<div className="text-[0.84rem] md:mt-8 md:w-1/2">
<p style={{ color: "hsla(236, 16%, 20%, 1)" }}>
Create an Inbound Relay with an onboarding tutorial.
</p>
<div className="mt-2">
<Link
href="/"
className="items-center rounded-full bg-violet-600 px-2.5 py-1.5 text-[0.775rem] text-white hover:bg-violet-700"
>
Get Started
</Link>
</div>
</div>
<div
className="font-semibold"
style={{ color: "hsla(236, 16%, 20%, 1)" }}
<Image className="md:w-1/2" src={inboundRelay} alt="" />
</div>
<div className="flex flex-wrap gap-2 md:flex-nowrap md:gap-4">
<Link
href="/"
className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
{">"}
</div>
</Link>
</div>
</div>
{/* card2 */}
<div
className="flex w-full text-xs justify-between flex-col flex-wrap items-center gap-4 p-6 md:w-1/2 md:flex-row md:flex-nowrap md:p-10"
style={{
border: "1px solid hsla(234, 49%, 92%, 1)",
backgroundColor: "hsla(234, 49%, 92%, 1)",
}}
>
{/* card1 */}
<div className=" flex flex-wrap items-center md:flex-nowrap">
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
<div className="flex items-center">
<div className="flex items-center gap-2 ">
<span>
<Book />
</span>
Get Started
</div>
<div
className="p-1.5"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
className="font-semibold"
style={{ color: "hsla(236, 16%, 20%, 1)" }}
>
<Send />
{">"}
</div>
<div className="p-1.5">Client</div>
</div>

<div
className="p-1.5 text-xs"
style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
</Link>
<Link
href="/"
className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
>
&nbsp;{'"name":"Claude"'}&nbsp;
</div>
<div className="flex items-center gap-2 ">
<span>
<Rocket />
</span>
Follow a Quickstart
</div>
<div
className="font-semibold"
style={{ color: "hsla(236, 16%, 20%, 1)" }}
>
{">"}
</div>
</Link>
</div>
</div>
<div className="rotate-90 md:rotate-0">{">"}</div>
{/* card2 */}
<div>
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex">
<div className="flex items-center">
<div
className="flex w-full flex-col flex-wrap items-center justify-between gap-4 p-6 text-xs md:w-1/2 md:flex-row md:flex-nowrap md:p-10"
style={{
border: "1px solid hsla(234, 49%, 92%, 1)",
backgroundColor: "hsla(234, 49%, 92%, 1)",
}}
>
{/* card1 */}
<div className=" flex flex-wrap items-center md:flex-nowrap">
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
<div className="flex items-center">
<div
className="p-1.5"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
>
<Send />
</div>
<div className="p-1.5">Client</div>
</div>

<div
className="p-2"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
className="p-1.5 text-xs"
style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
>
<InboundRelay />
&nbsp;{'"name":"Claude"'}&nbsp;
</div>
<div className="p-2">Inbound Relay</div>
</div>
</div>
</div>
<div className="rotate-90 md:rotate-0 ">{">"}</div>
{/* card3 */}
<div>
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
<div className="flex items-center">
<div
className="p-1.5"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
>
<Terminal />
<div className="rotate-90 md:rotate-0">{">"}</div>
{/* card2 */}
<div>
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex">
<div className="flex items-center">
<div
className="p-2"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
>
<InboundRelay />
</div>
<div className="p-2">Inbound Relay</div>
</div>
<div className="p-1.5">Server</div>
</div>
</div>
<div className="rotate-90 md:rotate-0 ">{">"}</div>
{/* card3 */}
<div>
<div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
<div className="flex items-center">
<div
className="p-1.5"
style={{
borderRight: "2px solid hsla(234, 49%, 92%, 1)",
}}
>
<Terminal />
</div>
<div className="p-1.5">Server</div>
</div>

<div
className="p-1.5 text-xs"
style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
>
{'"name":"ev:Tk9D"'}
<div
className="p-1.5 text-xs"
style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
>
{'"name":"ev:Tk9D"'}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div
style={{
position: "absolute",
bottom: "-10px",
left: "0",
width: "100%",
height: "40px",
backdropFilter: "blur(5px)",
}}
></div>
</section>
</>
);
}

Expand Down

0 comments on commit 25ec1bd

Please sign in to comment.