From 9dbf6cdf56dbd0d35a73318c4d3ec5e3aec50e4f Mon Sep 17 00:00:00 2001
From: Abolfazl Jamshidi <abolfazljamshididev@gmail.com>
Date: Tue, 4 Jun 2024 16:35:16 +0330
Subject: [PATCH 1/2] add articles page

---
 .../(articles)/_components/ArticlesList.tsx   |  2 +-
 src/app/(articles)/articles/page.tsx          | 13 +++++++++-
 src/components/ui/Header.tsx                  | 26 ++++++++++---------
 src/components/ui/Section.tsx                 |  8 ++++--
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/app/(articles)/_components/ArticlesList.tsx b/src/app/(articles)/_components/ArticlesList.tsx
index 850673f..9b1285c 100644
--- a/src/app/(articles)/_components/ArticlesList.tsx
+++ b/src/app/(articles)/_components/ArticlesList.tsx
@@ -2,7 +2,7 @@ import ArticleItem from "./ArticleItem";
 
 const ArticlesList = () => {
   return (
-    <div className="mt-8 flex flex-col gap-8 md:mt-12">
+    <div className="mt-8 flex flex-col gap-8 md:mt-12 md:gap-10">
       <ArticleItem />
       <ArticleItem />
       <ArticleItem />
diff --git a/src/app/(articles)/articles/page.tsx b/src/app/(articles)/articles/page.tsx
index e160a2a..de050e9 100644
--- a/src/app/(articles)/articles/page.tsx
+++ b/src/app/(articles)/articles/page.tsx
@@ -1,5 +1,16 @@
+import Header from "@/components/ui/Header";
+import ArticlesList from "../_components/ArticlesList";
+import Section from "@/components/ui/Section";
+
 const Page = () => {
-  return <div>articles ...</div>;
+  return (
+    <main className="min-h-svh">
+      <Section type="common" className="space-y-8">
+        <Header title="my articles" />
+        <ArticlesList />
+      </Section>
+    </main>
+  );
 };
 
 export default Page;
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index ef1ee1f..4a13a61 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -15,8 +15,8 @@ const alexandria = Alexandria({
 
 interface IHeaderProps {
   title: string;
-  linkText: string;
-  href: string;
+  linkText?: string;
+  href?: string;
 }
 
 const Header: React.FC<IHeaderProps> = ({ title, linkText, href }) => {
@@ -29,16 +29,18 @@ const Header: React.FC<IHeaderProps> = ({ title, linkText, href }) => {
         <span className="relative inline-block w-full border border-primary bg-primary before:absolute before:-left-1 before:-top-[4px] before:h-2 before:w-2 before:rounded-full before:bg-primary after:absolute after:-right-1 after:-top-[4px] after:h-2 after:w-2 after:rounded-full after:bg-primary md:border-2 md:before:-top-[6px] md:before:h-3 md:before:w-3 md:after:-top-[6px] md:after:h-3 md:after:w-3"></span>
       </div>
 
-      <Link
-        href={href}
-        className={`flex items-center gap-2 ${alexandria.className} group text-body2 text-primary`}
-      >
-        <span className="">{linkText}</span>
-        <IconArrowRight
-          viewBox="0 0 22 22"
-          className="relative left-0 mt-1 h-6 w-6 transition-all duration-75 ease-linear group-hover:left-1 [&_path]:stroke-primary"
-        />
-      </Link>
+      {linkText && href && (
+        <Link
+          href={href}
+          className={`flex items-center gap-2 ${alexandria.className} group text-body2 text-primary`}
+        >
+          <span className="">{linkText}</span>
+          <IconArrowRight
+            viewBox="0 0 22 22"
+            className="relative left-0 mt-1 h-6 w-6 transition-all duration-75 ease-linear group-hover:left-1 [&_path]:stroke-primary"
+          />
+        </Link>
+      )}
     </header>
   );
 };
diff --git a/src/components/ui/Section.tsx b/src/components/ui/Section.tsx
index 1cd83a0..2fdfd39 100644
--- a/src/components/ui/Section.tsx
+++ b/src/components/ui/Section.tsx
@@ -4,17 +4,19 @@ interface ISectionProps {
   children: ReactNode;
   hasEllipse?: boolean;
   type?: "primary" | "common";
+  className?: string;
 }
 
 const Section: React.FC<ISectionProps> = ({
   children,
   hasEllipse = false,
   type = "common",
+  className,
 }) => {
   if (type === "primary") {
     return (
       <section
-        className={`${hasEllipse ? "ellipse" : ""} relative mt-8 px-4 md:mt-24 md:px-0`}
+        className={`${hasEllipse ? "ellipse" : ""} relative mt-8 px-4 md:mt-24 md:px-0 ${className}`}
       >
         {children}
       </section>
@@ -23,7 +25,9 @@ const Section: React.FC<ISectionProps> = ({
 
   if (type === "common") {
     return (
-      <section className="mt-11 space-y-4 px-4 md:mt-20 md:space-y-10 md:p-0">
+      <section
+        className={`mt-11 space-y-4 px-4 md:mt-20 md:space-y-10 md:p-0 ${className}`}
+      >
         {children}
       </section>
     );

From 2286197940385c40e08ac71bd90649de07f95f70 Mon Sep 17 00:00:00 2001
From: Abolfazl Jamshidi <abolfazljamshididev@gmail.com>
Date: Tue, 4 Jun 2024 17:16:53 +0330
Subject: [PATCH 2/2] feat: add newsletter submit box

---
 src/app/(articles)/articles/page.tsx |  4 ++
 src/app/globals.css                  |  2 +
 src/components/ui/Newsletter.tsx     | 55 ++++++++++++++++++++++++++++
 tailwind.config.ts                   |  2 +
 4 files changed, 63 insertions(+)
 create mode 100644 src/components/ui/Newsletter.tsx

diff --git a/src/app/(articles)/articles/page.tsx b/src/app/(articles)/articles/page.tsx
index de050e9..8690f74 100644
--- a/src/app/(articles)/articles/page.tsx
+++ b/src/app/(articles)/articles/page.tsx
@@ -2,6 +2,8 @@ import Header from "@/components/ui/Header";
 import ArticlesList from "../_components/ArticlesList";
 import Section from "@/components/ui/Section";
 
+import Newsletter from "@/components/ui/Newsletter";
+
 const Page = () => {
   return (
     <main className="min-h-svh">
@@ -9,6 +11,8 @@ const Page = () => {
         <Header title="my articles" />
         <ArticlesList />
       </Section>
+
+      <Newsletter />
     </main>
   );
 };
diff --git a/src/app/globals.css b/src/app/globals.css
index db1afd8..d5db70c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -32,6 +32,7 @@ html {
       rgba(113, 39, 186, 0.5) 0%,
       rgba(113, 39, 186, 0) 100%
     );
+    --bg-tertiary: #fcf9ff;
   }
 
   /* If the user's system preference is dark */
@@ -51,6 +52,7 @@ html {
     --gray-1: white;
     --purple-2: "#4E4458";
     --border-color: "#ABB2BF";
+    --bg-tertiary: #14161a80;
   }
 }
 
diff --git a/src/components/ui/Newsletter.tsx b/src/components/ui/Newsletter.tsx
new file mode 100644
index 0000000..87812cb
--- /dev/null
+++ b/src/components/ui/Newsletter.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable no-irregular-whitespace */
+import { Alexandria, Ubuntu } from "next/font/google";
+
+const alexandria = Alexandria({
+  subsets: ["latin"],
+  weight: ["300", "400", "600", "700"],
+  preload: true,
+});
+
+const ubuntu = Ubuntu({
+  subsets: ["latin"],
+  weight: ["300"],
+  preload: true,
+});
+
+const Newsletter = () => {
+  return (
+    <section className="px-4 md:p-0">
+      <article className="bg-tertiary-bg rounded-10 mt-[72px] flex flex-col items-center justify-center gap-3 border border-[#7127BACC] px-6 pb-4 pt-6 text-center dark:border-none md:mt-25 md:gap-6">
+        <h3
+          className={`${alexandria.className} text-body2 font-semibold text-text-primary md:text-xl md:font-bold`}
+        >
+          Subscribe to my newsletter
+        </h3>
+        <p
+          className={`${alexandria.className} text-caption2 font-light text-text-primary md:${ubuntu.className} leading-6 md:text-caption1`}
+        >
+          Monthly personal reading and updates on topics like tech, design,
+          productivity, programming, and more!
+        </p>
+
+        <div className="flex w-full flex-col gap-4 px-4 sm:flex-row md:px-13">
+          <div className="flex-[4]">
+            <input
+              type="email"
+              className="w-full rounded-80 border border-border-articles bg-transparent px-4 py-2 text-caption2 leading-7 text-text-primary outline-primary"
+              placeholder="your email"
+            />
+          </div>
+          <div className="flex-1">
+            <button className="flex w-full items-center justify-center rounded-80 border border-primary px-4 py-2 text-body2 font-medium text-primary">
+              Sign up
+            </button>
+          </div>
+        </div>
+
+        <span className="mt-3 text-caption2 font-light text-text-primary md:mb-7 md:mt-0">
+          Join the 110 other readers.
+        </span>
+      </article>
+    </section>
+  );
+};
+
+export default Newsletter;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6cfeb1b..28e955b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,7 @@ const config: Config = {
         "purple-2": "var(--purple-2)",
         "border-articles": "var(--border-color)",
         "text-secondary": "var(--text-secondary)",
+        "tertiary-bg": "var(--bg-tertiary)",
         "purple-5": "#553F72",
         "gray-1": "var(--gray-1)",
         "gray-2": "#ABB2BF",
@@ -46,6 +47,7 @@ const config: Config = {
       },
       borderRadius: {
         5: "5px",
+        10: "10px",
         20: "20px",
         40: "40px",
         80: "80px",