commit 2a84dc81c40f4c895fe0cff253a1e19bacb7ba2c
parent 19836d909d68cb2578a4e19e252f6b59f451b6a8
Author: Daniel D’Aquino <daniel@daquino.me>
Date: Tue, 30 Jan 2024 21:32:07 +0000
purple: add call to action to the home pages
We need this to increase visibility to Purple on the main website page
which is linked in the app.
Testing: Checked that it does not look broken in small or big screens,
and on the japanese home page (although it is not translated yet)
Signed-off-by: Daniel D’Aquino <daniel@daquino.me>
Link: 20240130213200.49704-1-daniel@daquino.me
Signed-off-by: William Casarin <jb55@jb55.com>
Diffstat:
3 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/src/components/pages/home.tsx b/src/components/pages/home.tsx
@@ -12,6 +12,7 @@ import { DamusLiveEvents } from '@/components/sections/DamusLiveEvents';
import { Contribute } from '@/components/sections/Contribute';
import { FinalCTA } from '@/components/sections/FinalCTA';
import { Benefits } from '@/components/sections/Benefits';
+import { PurpleBanner } from '../sections/PurpleBanner';
const inter = Inter({ subsets: ['latin'] })
@@ -27,6 +28,7 @@ export function Home() {
<main style={{ scrollBehavior: "smooth" }}>
<Hero/>
<Benefits/>
+ <PurpleBanner/>
<BannedInChina/>
<div id="events">
<DamusLiveEvents/>
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
@@ -21,19 +21,18 @@ export function Hero() {
<TopMenu className="w-full"/>
<div className="flex flex-col lg:flex-row items-center justify-center mt-32 lg:mt-16">
<div className="w-full z-20 mb-12">
- {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && (<>
- <Link href="https://damus.io/npub18m76awca3y37hkvuneavuw6pjj4525fw90necxmadrvjg0sdy6qsngq955" target="_blank">
- <motion.div
- className="inline-flex items-center text-sm md:text-normal rounded-full bg-white/10 backdrop-blur-sm p-1 px-4 md:p-2 md:px-6 text-white border border-white/30 active:scale-95 transition cursor-pointer"
- style={{ opacity: 0 }}
- animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }}
- >
- <NostrIcon className="h-6 mr-2 text-damuspink-600" aria-hidden="true"/>
- <FormattedMessage defaultMessage="Follow us on Nostr" id="home.hero.follow-us-on-nostr"/>
- <ChevronRight className="ml-2"/>
- </motion.div>
- </Link>
- </>)}
+ <Link href="/purple">
+ <motion.div
+ className="inline-flex items-center text-sm md:text-normal rounded-full bg-gradient-to-r from-damuspink-500/10 to-damuspink-600/10 backdrop-blur-sm shadow-lg shadow-damuspink-500/10 p-1 px-4 md:p-2 md:px-6 text-white border border-damuspink-500/30 active:scale-95 transition cursor-pointer"
+ style={{ opacity: 0 }}
+ animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }}
+ >
+ <NostrIcon className="h-6 mr-2 text-damuspink-600" aria-hidden="true"/>
+ {/* TODO: Add proper internationalized string */}
+ Get more from Damus with Purple
+ <ChevronRight className="ml-2"/>
+ </motion.div>
+ </Link>
<motion.h1
className="my-6 text-4xl sm:text-5xl md:text-7xl text-transparent bg-clip-text pb-6 font-semibold whitespace-pre-line max-w-2xl"
style={{
diff --git a/src/components/sections/PurpleBanner.tsx b/src/components/sections/PurpleBanner.tsx
@@ -0,0 +1,62 @@
+import { ArrowUpRight, ChevronRight, Globe2, LucideZapOff, Zap, ZapIcon, ZapOff } from "lucide-react";
+import { MeshGradient1 } from "../effects/MeshGradient.1";
+import { TopMenu } from "./TopMenu";
+import { Button } from "../ui/Button";
+import { FormattedMessage, useIntl } from "react-intl";
+import Link from "next/link";
+import { DAMUS_APP_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { PurpleIcon } from "../icons/PurpleIcon";
+
+export function PurpleBanner() {
+ const intl = useIntl()
+
+ return (<>
+ <div
+ className="bg-black overflow-hidden relative"
+ >
+ <div className="absolute z-0 w-full h-full pointer-events-none">
+ <Image src="/stars-bg.webp" fill className="absolute top-0 left-0 object-cover lg:object-contain object-center w-full h-full" alt="" aria-hidden="true" />
+ </div>
+ <div className="container z-10 mx-auto px-6 pt-12 h-full min-h-screen flex flex-col justify-center">
+ <div className="flex flex-col items-center justify-center h-full grow">
+ <div className="inline-flex items-center mb-24 text-sm md:text-sm rounded-full bg-gradient-to-r from-damuspink-500/10 to-damuspink-600/10 backdrop-blur-sm shadow-lg shadow-damuspink-500/10 p-1 px-4 md:p-1 md:px-4 text-pink-100 border border-damuspink-500/30 active:scale-95 transition cursor-pointer">
+ {/* TODO: Localize */}
+ Want more?
+ </div>
+ <div className="text-damuspink-500/90 text-lg md:text-xl text-center max-w-2xl mb-4 md:mb-8 break-keep capitalize tracking-widest font-semibold">
+ {/* TODO: Localize */}
+ INTRODUCING
+ </div>
+ <div className="flex gap-x-4 items-center mb-12 md:mb-6">
+ <PurpleIcon className="w-16 h-16 md:w-24 md:h-24" />
+ <motion.h2 className="text-6xl 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>
+ </div>
+ <div className="text-purple-200/70 text-md md:text-lg text-center max-w-2xl mb-2 break-keep">
+ {/* TODO: Localize */}
+ Help us stay independent in our mission for Freedom tech with our Purple subscription, get exclusive benefits, and look cool doing it!
+ </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 w-full md:w-auto"
+ style={{ opacity: 0 }}
+ animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }}
+ >
+ <Link href="/purple/checkout" className="w-full md:w-auto">
+ <Button variant="default" className="w-full">
+ {intl.formatMessage({ id: "purple.hero.subscribe", defaultMessage: "Subscribe" })}
+ </Button>
+ </Link>
+ <Link href="/purple" className="w-full md:w-auto">
+ <Button variant="link" className="w-full">
+ {intl.formatMessage({ id: "purple.hero.learn-more", defaultMessage: "Learn more" })}
+ </Button>
+ </Link>
+ </motion.div>
+ </div>
+ </div>
+ </div>
+ </>)
+}
