crocoder-dev · stefanskoricdev · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025
diff --git a/apps/contact/email-templates/components/Layout.tsx b/apps/contact/email-templates/components/Layout.tsx
@@ -0,0 +1,95 @@
+import {
+  Html,
+  Img,
+  Body,
+  Section,
+  Column,
+  Tailwind,
+  pixelBasedPreset,
+  Row,
+  Link,
+  Container,
+  Hr,
+  Text,
+} from "@react-email/components";
+
+const baseUrl =
+  "https://company-website-git-feat-email-layout-crocoder.vercel.app";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Tailwind
+      config={{
+        presets: [pixelBasedPreset],
+      }}
+    >
+      <Html lang="en" dir="ltr">
+        <Body
+          className="m-0 p-0 h-screen font-sans"
+          style={{
+            backgroundImage: `url('${baseUrl}/pattern_light.png')`,
+            backgroundSize: "contain",
+          }}
+        >
+          <Container>
+            <Row className="bg-[#3C3843] pt-3 pb-2 rounded-t-lg">
+              <Column align="left" className="table-cell align-bottom px-4">
+                <Row className="table-cell">
+                  <Column>
+                    <Link href={baseUrl}>
+                      <Img
+                        src={`${baseUrl}/email_light.png`}
+                        alt="Crocoder logo"
+                        width={225}
+                        className="inline"
+                      />
+                    </Link>
+                  </Column>
+                </Row>
+              </Column>
+            </Row>
+            <Container className="py-8 px-4 bg-neutral-50">
+              {children}
+            </Container>
+            <Section className="bg-[#3C3843] px-4 rounded-b-lg">
+              <Row>
+                <Row className="pt-3 pb-2">
+                  <Column align="left" className="table-cell align-bottom">
+                    <Row className="table-cell">
+                      <Column>
+                        <Link href={baseUrl}>
+                          <Img
+                            src={`${baseUrl}/email_light.png`}
+                            alt="Crocoder logo"
+                            width={225}
+                            className="inline"
+                          />
+                        </Link>
+                      </Column>
+                    </Row>
+                  </Column>
+                </Row>
+                <Row>
+                  <Hr className="border-t my-4 !border-neutral-50" />
+                </Row>
+                <Row>
+                  <Text className="text-neutral-50 text-xs mt-0">{`© ${new Date().getFullYear()} CroCoder, Inc. All rights reserved`}</Text>
+                </Row>
+                <Row>
+                  <Text className="text-neutral-50 text-xs mt-0">
+                    This email and its contents are provided for informational
+                    and promotional purposes only. It represents the interests
+                    of both CroCoder, Inc. and Abram d.o.o. The information
+                    shared is intended to highlight the products, services, and
+                    initiatives of these companies.
+                  </Text>
+                </Row>
+              </Row>
+            </Section>
+          </Container>
+        </Body>
+      </Html>
+    </Tailwind>
+  );
+};
+export default Layout;
diff --git a/apps/contact/email-templates/contact.tsx b/apps/contact/email-templates/contact.tsx
@@ -1,10 +1,31 @@
-import { Heading, Html } from "@react-email/components";
+import { Text, Section } from "@react-email/components";
+import Layout from "./components/Layout";
 
 const ContactTemplate = () => {
   return (
-    <Html lang="en">
-      <Heading>Thank you for contacting us!</Heading>
-    </Html>
+    <Layout>
+      <Section>
+        <Text>
+          Hi, <br />
+          Thank you for getting in touch!
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
+          faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
+          pretium tellus duis convallis. Tempus leo eu aenean sed diam urna
+          tempor.
+          <br />
+          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
+          faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
+          pretium tellus duis convallis. Tempus leo eu aenean sed diam urna
+          tempor.
+          <br />
+          <br />
+          Best regards, <br />
+          The CroCoder team
+        </Text>
+      </Section>
+    </Layout>
   );
 };
 

diff --git a/apps/contact/package.json b/apps/contact/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "emails": "email dev --dir app/\\(email-templates\\)"
+    "emails": "email dev --dir email-templates"
   },
   "dependencies": {
     "@aws-sdk/client-sesv2": "^3.888.0",
@@ -29,4 +29,4 @@
     "react-email": "4.2.11",
     "typescript": "^5"
   }
-}
+}
diff --git a/apps/website/public/email_light.png b/apps/website/public/email_light.png
diff --git a/apps/website/public/pattern_light.png b/apps/website/public/pattern_light.png