From 074ccb9422c88db56a59c492e2d57f598757f1a9 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Tue, 5 Nov 2024 23:16:41 +0100
Subject: [PATCH] feat: add the about section

---
 app/(root)/page.jsx  |  2 ++
 components/About.jsx | 28 ++++++++++++++++++++++++++++
 components/Icon.jsx  | 25 +++++++++++++++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 components/About.jsx
 create mode 100644 components/Icon.jsx

diff --git a/app/(root)/page.jsx b/app/(root)/page.jsx
index cfd8474..3dcbe61 100644
--- a/app/(root)/page.jsx
+++ b/app/(root)/page.jsx
@@ -1,3 +1,4 @@
+import About from "@/components/About";
 import Features from "@/components/Features";
 import Hero from "@/components/Hero";
 
@@ -38,6 +39,7 @@ function Home() {
     <>
       <Hero />
       <Features />
+      <About />
       Some other sections, of course!
     </>
   );
diff --git a/components/About.jsx b/components/About.jsx
new file mode 100644
index 0000000..581d364
--- /dev/null
+++ b/components/About.jsx
@@ -0,0 +1,28 @@
+import Icon from "@/components/Icon";
+
+function About() {
+  return (
+    <div className="mx-auto px-7 py-12 max-w-screen-xl">
+      <div className="w-full bg-card text-card-foreground border-border border rounded-lg px-4 py-2 flex flex-col-reverse md:flex-row">
+        <Icon
+          width={160}
+          height={160}
+          className="self-center p-6 w-full max-w-64 h-auto md:w-36 md:p-0 md:pl-6 shrink-0"
+        />
+        <div className="grow md:self-center px-4 md:px-8 py-2">
+          <h2 className="text-3xl md:text-5xl font-bold my-4">
+            About <span className="text-primary">MERNMail</span>
+          </h2>
+          <p className="text-lg text-muted-foreground my-4">
+            MERNMail is a simple, open-source webmail application designed to
+            make managing your emails a breeze. Built using the powerful MERN
+            stack (MongoDB, Express, React, Node.JS), our application ensures a
+            smooth, responsive, and real-time user experience.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default About;
diff --git a/components/Icon.jsx b/components/Icon.jsx
new file mode 100644
index 0000000..501a671
--- /dev/null
+++ b/components/Icon.jsx
@@ -0,0 +1,25 @@
+const Icon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={75.59}
+    height={87.284}
+    viewBox="0 0 20 23.094"
+    {...props}
+  >
+    <path
+      d="m20 17.32-9.999 5.774-10-5.772L0 5.775 9.999 0l10 5.772Z"
+      style={{
+        fill: "#ff7f00",
+        strokeWidth: 0.55943
+      }}
+    />
+    <path
+      d="M5.695 6.784a1.386 1.394 0 0 0-1.382 1.341l5.601 2.477 5.622-2.486a1.386 1.394 0 0 0-1.384-1.332Zm9.843 1.977-5.624 2.6L4.31 8.77v5.741a1.386 1.394 0 0 0 1.386 1.395h8.457a1.386 1.394 0 0 0 1.386-1.395z"
+      style={{
+        fill: "#fff",
+        strokeWidth: 4.37786
+      }}
+    />
+  </svg>
+);
+export default Icon;