Stage

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 />

src/app/(articles)/articles/page.tsx

@@ -1,5 +1,20 @@
+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 <div>articles ...</div>;
+ return (
+ <main className="min-h-svh">
+ <Section type="common" className="space-y-8">
+ <Header title="my articles" />
+ <ArticlesList />
+ </Section>
+
+ <Newsletter />
+ </main>
+ );
 };
 
 export default Page;

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;
  }
 }
 

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>
  );
 };

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;

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>
  );

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",