From efbc77ff7238e2da2a15bc3386600972672be3f3 Mon Sep 17 00:00:00 2001 From: viet nguyen Date: Fri, 27 Oct 2023 13:32:40 -0700 Subject: [PATCH] feat: add 4 CTAs - missing files --- src/app/components/LandingCTA.tsx | 80 ++++++++++++++++++++++++++++++ src/app/components/LandingHero.tsx | 13 +++++ src/app/components/ShowEmailJS.tsx | 11 ++++ src/assets/icons/heart-hero.tsx | 28 +++++++++++ 4 files changed, 132 insertions(+) create mode 100644 src/app/components/LandingCTA.tsx create mode 100644 src/app/components/LandingHero.tsx create mode 100644 src/app/components/ShowEmailJS.tsx create mode 100644 src/assets/icons/heart-hero.tsx diff --git a/src/app/components/LandingCTA.tsx b/src/app/components/LandingCTA.tsx new file mode 100644 index 000000000..f0d962556 --- /dev/null +++ b/src/app/components/LandingCTA.tsx @@ -0,0 +1,80 @@ +import { ShowEmailJS } from './ShowEmailJS' +export const LandingCTA: React.FC = () => { + return ( +
+
+ + + + +
+
+ ) +} + +const Card4Coders: React.FC = () => { + return ( + + Dev onboarding + GitHub + + } + /> + ) +} + +const Card4All: React.FC = () => { + return ( + Login} + /> + ) +} + +const Leaders: React.FC = () => { + return ( + } + /> + ) +} + +const Donate: React.FC = () => { + return ( + Donate} + /> + ) +} + +interface CTACardProps { + title: string + body: string + action: React.ReactNode +} + +const Card: React.FC = ({ title, body, action }) => { + return ( +
+

{title}

+
+
+

{body}

+
+ {action} +
+
+
+
+ ) +} diff --git a/src/app/components/LandingHero.tsx b/src/app/components/LandingHero.tsx new file mode 100644 index 000000000..70cce7752 --- /dev/null +++ b/src/app/components/LandingHero.tsx @@ -0,0 +1,13 @@ +import Heart from '@/assets/icons/heart-hero' + +export const LandingHero: React.FC = () => { + return ( +
+
+ Knowledge + + + You = +
+
+ ) +} diff --git a/src/app/components/ShowEmailJS.tsx b/src/app/components/ShowEmailJS.tsx new file mode 100644 index 000000000..485cc41a7 --- /dev/null +++ b/src/app/components/ShowEmailJS.tsx @@ -0,0 +1,11 @@ +'use client' +import { useState } from 'react' + +/** + * Show email on click to minimize spam + */ +export const ShowEmailJS: React.FC = () => { + const [email, setEmail] = useState < string | null>() + + return () +} diff --git a/src/assets/icons/heart-hero.tsx b/src/assets/icons/heart-hero.tsx new file mode 100644 index 000000000..1afd35c66 --- /dev/null +++ b/src/assets/icons/heart-hero.tsx @@ -0,0 +1,28 @@ +import * as React from 'react' +const SvgComponent: React.FC<{ className: string }> = (props) => ( + + + + + + + + +) +export default SvgComponent