feat(marketing): create all email components

libs/marketing/email-banner-background-text.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmailBannerBackgroundText from './email-banner-background-text'
+
+const meta: Meta<typeof EmailBannerBackgroundText > = {
+  title: 'Marketing/Email Banner Background Text ',
+  component: EmailBannerBackgroundText,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Default story to render the CUHackingEmail as it is
+export const Default: Story = {}
+
+// You can customize the email content or its sections in additional stories if needed.

libs/marketing/email-banner-background-text.tsx

@@ -0,0 +1,75 @@
+import logoIconWordmarkGradientGreen from '@cuhacking/shared/assets/logos/cuHacking/logo-icon-wordmark-gradient-green.png'
+import bgKeyCap from '@website/assets/ui/introduction/bg-keycap-2.webp'
+
+export default function EmailBannerBackgroundText() {
+  return (
+    <div
+      style={{
+        fontFamily: 'monospace',
+        lineHeight: 1.5,
+        backgroundColor: '#000',
+        color: '#fff',
+        maxWidth: '600px',
+        margin: '0 auto',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Floating Key Caps Background */}
+      <img
+        src={bgKeyCap.src}
+        alt=""
+        style={{
+          width: '100%',
+          marginLeft: '23px',
+          height: '125%',
+          objectFit: 'cover',
+          marginTop: '-36px',
+          zIndex: -1,
+        }}
+      />
+
+      {/* Main Content */}
+      <div style={{ position: 'relative', zIndex: 1, padding: '20px' }}>
+        {/* Header */}
+        <div
+          style={{
+            textAlign: 'center',
+            paddingTop: '40px',
+            paddingBottom: '20px',
+            position: 'relative',
+          }}
+        >
+          <h1
+            style={{
+              fontSize: '24px',
+              margin: '20px 0',
+              fontFamily: 'monospace',
+              fontWeight: 'normal',
+              textAlign: 'center',
+            }}
+          >
+            We hope to
+          </h1>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '0 20px',
+            }}
+          >
+            <img
+              src={logoIconWordmarkGradientGreen.src}
+              alt="cuHacking Logo"
+              style={{
+                maxWidth: '250px',
+                margin: '0 auto',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

libs/marketing/email-banner-background.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmailBannerBackground from './email-banner-background'
+
+const meta: Meta<typeof EmailBannerBackground> = {
+  title: 'Marketing/Email Banner Background',
+  component: EmailBannerBackground,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const DefaultEmailBannerBackground: Story = {
+  render: () => <EmailBannerBackground />,
+}

libs/marketing/email-banner-background.tsx

@@ -0,0 +1,31 @@
+import bgKeyCap from 'libs/website/assets/ui/introduction/bg-keycap-2.webp'
+
+export default function EmailBackground() {
+  return (
+    <div style={{
+      fontFamily: 'monospace',
+      lineHeight: 1.5,
+      backgroundColor: '#000',
+      color: '#fff',
+      maxWidth: '600px',
+      margin: '0 auto',
+      position: 'relative',
+      overflow: 'hidden',
+    }}
+    >
+
+      {/* Floating Keycaps */}
+      <div style={{ margin: '40px 0' }}>
+        <img
+          src={bgKeyCap.src}
+          alt=""
+          style={{
+            width: '100%',
+            borderRadius: '8px',
+          }}
+        />
+      </div>
+
+    </div>
+  )
+}

libs/marketing/email-content-rejection.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmailContentRejection from './email-content-rejection'
+
+const meta: Meta<typeof EmailContentRejection> = {
+  title: 'Marketing/Email Content Rejection',
+  component: EmailContentRejection,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Default story to render the EmailContentRejection as it is
+export const Default: Story = {}

libs/marketing/email-content-rejection.tsx

@@ -0,0 +1,47 @@
+export default function EmailContentRejection() {
+  return (
+    <div
+      style={{
+        fontFamily: 'monospace',
+        lineHeight: 1.5,
+        backgroundColor: '#000',
+        color: '#fff',
+        maxWidth: '600px',
+        margin: '0 auto',
+        position: 'relative',
+        overflow: 'hidden',
+        padding: '20px',
+      }}
+    >
+      {/* Rejection Content */}
+      <div
+        style={{
+          backgroundColor: 'rgba(25, 25, 25, 0.9)',
+          padding: '20px',
+          borderRadius: '8px',
+          textAlign: 'left',
+          border: '1px solid #333',
+        }}
+      >
+        <p style={{ marginBottom: '20px' }}>
+          Dear
+          {' '}
+          <strong>John Doe</strong>
+          ,
+        </p>
+        <p style={{ marginBottom: '20px' }}>
+          Thank you so much for applying to cuHacking 6. Unfortunately, with the small amount of
+          people we...
+        </p>
+        <p style={{ marginBottom: '20px' }}>Signed,</p>
+        <p>
+          <strong>First Last</strong>
+          <br />
+          Position
+          <br />
+          cuHacking
+        </p>
+      </div>
+    </div>
+  )
+}

libs/marketing/email-content.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmailContent from './email-content'
+
+const meta: Meta<typeof EmailContent> = {
+  title: 'Marketing/Email Content',
+  component: EmailContent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// Default story to render the EmailContent as it is
+export const Default: Story = {}

libs/marketing/email-content.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@cuhacking/shared/ui/button'
+
+export default function EmailContent() {
+  return (
+    <div style={{
+      fontFamily: 'monospace',
+      lineHeight: 1.5,
+      backgroundColor: '#000',
+      color: '#fff',
+      maxWidth: '600px',
+      margin: '0 auto',
+      position: 'relative',
+      overflow: 'hidden',
+    }}
+    >
+
+      {/* Congratulations Section */}
+      <div style={{
+        backgroundColor: 'rgba(25, 25, 25, 0.9)',
+        padding: '20px',
+        borderRadius: '8px',
+        marginBottom: '20px',
+        textAlign: 'center',
+        border: '1px solid #333',
+        marginTop: '43px',
+      }}
+      >
+        <h2 style={{
+          color: '#00ff00',
+          fontSize: '20px',
+          margin: '10px 0',
+          fontFamily: 'monospace',
+        }}
+        >
+          Congratulations, Name
+        </h2>
+        <p style={{
+          fontSize: '14px',
+          marginBottom: '20px',
+          color: '#e6e6e6',
+          fontFamily: 'monospace',
+        }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        <Button
+          variant="secondary"
+          style={{
+            backgroundColor: '#00ff00',
+            color: '#000',
+            border: 'none',
+            padding: '8px 24px',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontFamily: 'monospace',
+          }}
+        >
+          RSVP
+        </Button>
+      </div>
+    </div>
+  )
+}

libs/marketing/email-footer.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmailFooter from './email-footer'
+
+const meta: Meta<typeof EmailFooter> = {
+  title: 'Marketing/Email Footer',
+  component: EmailFooter,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <EmailFooter />,
+}