feat: sgf devs sponsored email (#6)

* chore: add BaseLayout and default tailwind config * feat: wip startup weekend email * feat: finish out sponsored email
sgfdevs · Aug 25, 2024 · 51acd8e · 51acd8e
1 parent ef849ff
commit 51acd8e
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,11 +20,13 @@
     "date-fns-tz": "^3.1.3",
     "dotenv": "^16.4.5",
     "lorem-ipsum": "^2.0.8",
+    "react": "^18.3.1",
     "react-email": "^3.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.5.0",
     "@types/eslint__js": "^8.42.3",
+    "@types/react": "^18.3.4",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {
+    Body,
+    Head,
+    Html,
+    Preview,
+    Tailwind,
+    TailwindConfig,
+} from '@react-email/components';
+import { defaultTailwindConfig } from '@/components/defaultTailwindConfig';
+
+export interface BaseLayoutProps {
+    tailwindConfig: TailwindConfig;
+    previewText?: string;
+    children: React.ReactNode;
+}
+
+export const BaseLayout = ({
+    tailwindConfig,
+    previewText,
+    children,
+}: BaseLayoutProps) => {
+    const { theme: customTheme = {}, ...customConfig } = tailwindConfig;
+
+    const updatedTailwindConfig = {
+        ...customConfig,
+        theme: {
+            fontFamily: defaultTailwindConfig.theme.fontFamily,
+            ...customTheme,
+            fontSize: defaultTailwindConfig.theme.fontSize,
+            spacing: defaultTailwindConfig.theme.spacing,
+        },
+    } satisfies TailwindConfig;
+
+    return (
+        <Html>
+            <Tailwind config={updatedTailwindConfig}>
+                <Head />
+                {previewText ? <Preview>{previewText}</Preview> : null}
+                <Body className="m-0 p-0 font-default">{children}</Body>
+            </Tailwind>
+        </Html>
+    );
+};
diff --git a/src/components/defaultTailwindConfig.ts b/src/components/defaultTailwindConfig.ts
@@ -0,0 +1,69 @@
+export const defaultTailwindConfig = {
+    theme: {
+        fontFamily: {
+            default: [
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Segoe UI',
+                'Roboto',
+                'Oxygen-Sans',
+                'Ubuntu',
+                'Cantarell',
+                'Helvetica Neue',
+                'sans-serif',
+            ],
+        },
+        fontSize: {
+            xs: ['12px', { lineHeight: '16px' }],
+            sm: ['14px', { lineHeight: '20px' }],
+            base: ['16px', { lineHeight: '24px' }],
+            lg: ['18px', { lineHeight: '28px' }],
+            xl: ['20px', { lineHeight: '28px' }],
+            '2xl': ['24px', { lineHeight: '32px' }],
+            '3xl': ['30px', { lineHeight: '36px' }],
+            '4xl': ['36px', { lineHeight: '36px' }],
+            '5xl': ['48px', { lineHeight: '1' }],
+            '6xl': ['60px', { lineHeight: '1' }],
+            '7xl': ['72px', { lineHeight: '1' }],
+            '8xl': ['96px', { lineHeight: '1' }],
+            '9xl': ['144px', { lineHeight: '1' }],
+        },
+        spacing: {
+            px: '1px',
+            0: '0',
+            0.5: '2px',
+            1: '4px',
+            1.5: '6px',
+            2: '8px',
+            2.5: '10px',
+            3: '12px',
+            3.5: '14px',
+            4: '16px',
+            5: '20px',
+            6: '24px',
+            7: '28px',
+            8: '32px',
+            9: '36px',
+            10: '40px',
+            11: '44px',
+            12: '48px',
+            14: '56px',
+            16: '64px',
+            20: '80px',
+            24: '96px',
+            28: '112px',
+            32: '128px',
+            36: '144px',
+            40: '160px',
+            44: '176px',
+            48: '192px',
+            52: '208px',
+            56: '224px',
+            60: '240px',
+            64: '256px',
+            72: '288px',
+            80: '320px',
+            96: '384px',
+        },
+    },
+} as const;
diff --git a/src/emails/sgfdevs/sponsored/CodefiStartupWeekend.tsx b/src/emails/sgfdevs/sponsored/CodefiStartupWeekend.tsx
@@ -0,0 +1,133 @@
+import {
+    Container,
+    Img,
+    Section,
+    Text,
+    TailwindConfig,
+    Link,
+} from '@react-email/components';
+import { BaseLayout } from '@/components/BaseLayout';
+import { ASSET_BASE_URL } from '@/config';
+
+const config = {
+    theme: {
+        extend: {
+            colors: {
+                primary: '#153557',
+                'primary-light': '#619ECE',
+            },
+        },
+    },
+} as TailwindConfig;
+
+const CodefiStartupWeekend = () => {
+    return (
+        <BaseLayout tailwindConfig={config}>
+            <Section className="bg-primary-light text-white">
+                <Container className="p-6">
+                    <div className="sm:float-left w-full sm:w-1/2">
+                        <Img
+                            className="w-full max-w-[300px] mx-auto"
+                            src={`${ASSET_BASE_URL}/sgfdevs-codefi-startup-weekend-2024.png`}
+                        />
+                    </div>
+                    <div className="sm:float-right w-full sm:w-1/2 sm:mt-[37px] mt-6">
+                        <Text className="text-center text-xl m-0 mb-4">
+                            <strong>Presented By:</strong>
+                        </Text>
+                        <Img
+                            className="w-full max-w-[200px] mx-auto"
+                            src={`${ASSET_BASE_URL}/sgfdevs-codefi-startup-weekend-2024-2.png`}
+                        />
+                    </div>
+                    <div className="clear-both"></div>
+                </Container>
+            </Section>
+            <Section>
+                <Container className="px-6">
+                    <Text>
+                        <strong>Ozarks Startup Weekend</strong>
+                        is coming to Springfield, MO,{' '}
+                        <strong>September 13-15</strong>, and it's your chance
+                        to transform your business idea into a viable startup in
+                        just one weekend!
+                    </Text>
+                    <Text>
+                        <strong>What to expect:</strong>
+                        <ul>
+                            <li>
+                                54 hours of intense creativity and collaboration
+                            </li>
+                            <li>
+                                Work with talented designers, developers, and
+                                business experts
+                            </li>
+                            <li>
+                                Build a working prototype of your idea Pitch to
+                                experienced judges for a chance to win big
+                            </li>
+                        </ul>
+                    </Text>
+                    <Text>
+                        <strong>Why participate:</strong>
+                        <ul>
+                            <li>$15,000 in cash prizes up for grabs</li>
+                            <li>Invaluable networking opportunities</li>
+                            <li>
+                                Expert mentorship from successful tech founders
+                            </li>
+                            <li>
+                                Potential for capital investment Fast-track
+                                eligibility for Codefi's Startup Programs
+                            </li>
+                        </ul>
+                    </Text>
+
+                    <Text>
+                        Whether you're a tech whiz, a creative genius, or a
+                        business mastermind, there's a place for you at Ozarks
+                        Startup Weekend. No startup experience necessary – just
+                        bring your enthusiasm and ideas!
+                    </Text>
+                    <Text>
+                        Space is limited! Register now at{' '}
+                        <Link href="https://www.codefiworks.com/startupweekend@TrackLink">
+                            codefiworks.com/startupweekend
+                        </Link>
+                        .
+                    </Text>
+                    <Text>
+                        For more information, check out the FAQ on Ozarks
+                        Startup Weekend website or contact{' '}
+                        <Link href="mailto:[email protected]">
+                            [email protected]
+                        </Link>
+                        .
+                    </Text>
+                </Container>
+            </Section>
+            <Section className="bg-primary text-white">
+                <Container className="p-6">
+                    <Img
+                        className="w-full max-w-[158px] mx-auto"
+                        src={`${ASSET_BASE_URL}/sgfdevs-footer-logo.png`}
+                    />
+                    <Text className="text-white text-center m-0">
+                        <Link href="{{ MessageURL }}" className="text-white">
+                            View in Browser
+                        </Link>
+                        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+                        <Link
+                            href="{{ UnsubscribeURL }}"
+                            className="text-white"
+                        >
+                            Unsubscribe
+                        </Link>
+                    </Text>
+                </Container>
+            </Section>
+        </BaseLayout>
+    );
+};
+
+export default CodefiStartupWeekend;
diff --git a/src/emails/static/sgfdevs-codefi-startup-weekend-2024-2.png b/src/emails/static/sgfdevs-codefi-startup-weekend-2024-2.png
diff --git a/src/emails/static/sgfdevs-codefi-startup-weekend-2024.png b/src/emails/static/sgfdevs-codefi-startup-weekend-2024.png
diff --git a/src/emails/static/sgfdevs-footer-logo.png b/src/emails/static/sgfdevs-footer-logo.png