feat: add email blog section

Author: gloriababic

apps/contact/email-templates/components/Blog.tsx

@@ -0,0 +1,39 @@
+import { Column, Img, Link, Row, Section, Text } from "@react-email/components";
+
+const baseUrl = "https://www.crocoder.dev";
+
+const Blog = ({
+  blogLinks = [],
+  description,
+}: {
+  blogLinks: Array<{ path: string; title: string; imageUrl: string }>;
+  description: string;
+}) => {
+  return (
+    <Section className="pt-2">
+      <Row>
+        <Column>
+          <Text>{description}</Text>
+        </Column>
+      </Row>
+      <Row className="table-fixed">
+        {blogLinks.map(({ path, title, imageUrl }) => {
+          return (
+            <Column className="pr-4 align-top">
+              <Link href={`${baseUrl}/blog/${path}`} className=" h-full">
+                <Img
+                  src={`${baseUrl}/${imageUrl}`}
+                  width={"100%"}
+                  height={120}
+                  className="rounded-md object-cover aspect-video"
+                />
+                <Text className="text-neutral-700 font-bold">{title}</Text>
+              </Link>
+            </Column>
+          );
+        })}
+      </Row>
+    </Section>
+  );
+};
+export default Blog;

apps/contact/email-templates/contact.tsx

@@ -1,4 +1,5 @@
-import { Text, Section } from "@react-email/components";
+import { Hr, Section, Text } from "@react-email/components";
+import Blog from "./components/Blog";
 import Layout from "./components/Layout";
 
 const ContactTemplate = () => {
@@ -24,6 +25,30 @@ const ContactTemplate = () => {
           Best regards, <br />
           The CroCoder team
         </Text>
+        <Hr />
+        <Blog
+          description="While waiting for an answer look at how we helped other teams"
+          blogLinks={[
+            {
+              path: "migrating-an-enterprise-app-from-angularjs-to-react",
+              imageUrl: "/images/from-angular-to-react.png",
+              title: "Migrating an Enterprise App from AngularJS to React",
+            },
+            {
+              path: "how-we-rebuilt-a-legacy-ui-with-zero-downtime",
+              imageUrl:
+                "/images/how-we-rebuilt-a-legacy-ui-with-zero-downtime.png",
+              title:
+                "How We Rebuilt a Legacy UI With Zero Downtime: A Case Study in Component Libraries and Frontend Guidance",
+            },
+            {
+              path: "using-lago-to-create-a-flexible-billing-system",
+              imageUrl:
+                "/images/using-lago-to-create-a-flexible-billing-system-2.png",
+              title: "Using Lago to Create a Flexible Billing System",
+            },
+          ]}
+        />
       </Section>
     </Layout>
   );