commit bcd15c47592acf98c20e92fcb1ea4fed716e7f90
parent e1a1739eac9d8810fc764090390767a165d682b4
Author: Daniel D’Aquino <daniel@daquino.me>
Date: Wed, 3 Jan 2024 15:35:12 -0800
Add Purple Final CTA draft on the page
Diffstat:
5 files changed, 92 insertions(+), 6 deletions(-)
diff --git a/src/components/effects/MeshGradient.5.tsx b/src/components/effects/MeshGradient.5.tsx
@@ -0,0 +1,20 @@
+export function MeshGradient5({ className }: { className?: string }) {
+ return (<>
+ <svg xmlns="http://www.w3.org/2000/svg" width="1278" height="699" viewBox="0 0 1278 699" fill="none" className={className}>
+ <g filter="url(#filter0_f_3722_32860)">
+ <path d="M433.091 498.432L263.647 452.234L200.084 412.914L239.519 230.156L1024.27 200.788L1077.83 279.182L947.942 286.691L962.025 412.846L746.403 315.839L693.586 452.196L610.407 323.701L466.6 375.009L433.091 498.432Z" fill="url(#paint0_linear_3722_32860)" fillOpacity="0.5" />
+ </g>
+ <defs>
+ <filter id="filter0_f_3722_32860" x="0.0843506" y="0.78833" width="1277.74" height="697.643" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+ <feFlood floodOpacity="0" result="BackgroundImageFix" />
+ <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+ <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_3722_32860" />
+ </filter>
+ <linearGradient id="paint0_linear_3722_32860" x1="189.686" y1="233.037" x2="786.179" y2="786.298" gradientUnits="userSpaceOnUse">
+ <stop stopColor="#D34CD9" />
+ <stop offset="1" stopColor="#BF25ED" />
+ </linearGradient>
+ </defs>
+ </svg>
+ </>)
+}
diff --git a/src/components/icons/PurpleIcon.tsx b/src/components/icons/PurpleIcon.tsx
@@ -0,0 +1,10 @@
+import { RoundedContainerWithColorGradientBorder } from "../ui/RoundedContainerWithGradientBorder";
+import Image from "next/image";
+
+export const PurpleIcon = () => {
+ return (
+ <RoundedContainerWithColorGradientBorder className="w-24 h-24 p-[1px]">
+ <Image src="logo-icon-dark.png" fill className="overflow-hidden w-full h-full object-fill shadow-xl rounded-2xl" alt="Damus Purple logo" />
+ </RoundedContainerWithColorGradientBorder>
+ )
+};
diff --git a/src/components/pages/purple.tsx b/src/components/pages/purple.tsx
@@ -14,6 +14,7 @@ import { FinalCTA } from '@/components/sections/FinalCTA';
import { Benefits } from '@/components/sections/Benefits';
import { PurpleBenefits } from '../sections/PurpleBenefits';
import { PurpleFAQ } from '../sections/PurpleFAQ';
+import { PurpleFinalCTA } from '../sections/PurpleFinalCTA';
const inter = Inter({ subsets: ['latin'] })
@@ -28,9 +29,9 @@ export function Purple() {
</Head>
<main style={{ scrollBehavior: "smooth" }}>
<PurpleHero />
- <PurpleBenefits/>
- <PurpleFAQ/>
- <FinalCTA />
+ <PurpleBenefits />
+ <PurpleFAQ />
+ <PurpleFinalCTA />
<Footer />
</main>
</>)
diff --git a/src/components/sections/PurpleFinalCTA.tsx b/src/components/sections/PurpleFinalCTA.tsx
@@ -0,0 +1,56 @@
+import { Button } from "../ui/Button";
+import { useIntl } from "react-intl";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { ArrowUpRight, MessageCircleIcon, GitBranch, Github } from "lucide-react";
+import { DAMUS_APP_STORE_URL, DAMUS_MERCH_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants";
+import { PurpleIcon } from "../icons/PurpleIcon";
+import { MeshGradient5 } from "../effects/MeshGradient.5";
+
+export function PurpleFinalCTA({ className }: { className?: string }) {
+ const intl = useIntl()
+
+ return (<>
+ <div className={cn("bg-black overflow-hidden relative", className)}>
+ <div className="container mx-auto px-6 pb-24 pt-24">
+ <div className="flex flex-col items-center justify-center mt-32 lg:mt-16">
+ <div className="relative mb-24 flex flex-col items-center justify-center">
+ <div className="absolute pointer-events-none">
+ <MeshGradient5 />
+ </div>
+ <div className="relative w-24 h-24 mb-8 rounded-xl overflow-hidden shadow-xl">
+ <PurpleIcon />
+ </div>
+ <motion.h2 className="mb-8 text-4xl md:text-5xl lg:text-6xl text-center text-transparent bg-clip-text bg-gradient-to-r from-white from-5% to-[#E0A4D3] to-100% font-semibold pb-4 whitespace-pre-line leading-relaxed">
+ {intl.formatMessage({ id: "purple.final_cta.headline", defaultMessage: "Get Purple today!" })}
+ </motion.h2>
+ <motion.div className="text-xl text-center max-w-2xl mb-12 text-transparent bg-clip-text bg-gradient-to-br from-white from-5% to-damuspink-500 to-100% whitespace-pre-line leading-loose">
+ {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && (<>
+ {intl.formatMessage({ id: "purple.final_cta.subheadline", defaultMessage: "Contribute to the future of the free internet, and look cool doing it." })}
+ </>)}
+ </motion.div>
+ <motion.div
+ className="mt-10 md:mt-6 flex flex-col md:flex-row items-center md:items-center gap-y-4 gap-x-6"
+ style={{ opacity: 0 }}
+ animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }}
+ >
+ <Link href="#">
+ <Button variant="default" className="w-full md:w-auto">
+ {intl.formatMessage({ id: "purple.final_cta.subscribe", defaultMessage: "Subscribe" })}
+ </Button>
+ </Link>
+ <Link href="#" target="_blank">
+ <Button variant="link" className="w-full md:w-auto">
+ {intl.formatMessage({ id: "purple.final_cta.open_app", defaultMessage: "Open in Damus" })}
+ <ArrowUpRight className="text-damuspink-600 ml-2" />
+ </Button>
+ </Link>
+ </motion.div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </>)
+}
diff --git a/src/components/sections/PurpleHero.tsx b/src/components/sections/PurpleHero.tsx
@@ -8,6 +8,7 @@ import { DAMUS_APP_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants";
import { motion } from "framer-motion";
import Image from "next/image";
import { RoundedContainerWithColorGradientBorder } from "../ui/RoundedContainerWithGradientBorder";
+import { PurpleIcon } from "../icons/PurpleIcon";
export function PurpleHero() {
const intl = useIntl()
@@ -24,9 +25,7 @@ export function PurpleHero() {
<TopMenu className="w-full" />
<div className="relative mb-32 flex flex-col items-center justify-center min-h-screen">
<div className="flex gap-x-4 items-center mb-6">
- <RoundedContainerWithColorGradientBorder className="w-24 h-24 p-[1px]">
- <Image src="logo-icon-dark.png" fill className="overflow-hidden w-full h-full object-fill shadow-xl rounded-2xl" alt="Damus Purple logo" />
- </RoundedContainerWithColorGradientBorder>
+ <PurpleIcon />
<motion.h2 className="text-4xl md:text-8xl text-center text-transparent bg-clip-text bg-gradient-to-r from-damuspink-500 from-30% to-damuspink-600 to-100% font-semibold break-keep tracking-tight">
Purple
</motion.h2>
