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 (
-
+
diff --git a/src/app/(articles)/articles/page.tsx b/src/app/(articles)/articles/page.tsx
index e160a2a..8690f74 100644
--- a/src/app/(articles)/articles/page.tsx
+++ b/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
articles ...
;
+ return (
+
+
+
+
+
+ );
};
export default Page;
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/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
= ({ title, linkText, href }) => {
@@ -29,16 +29,18 @@ const Header: React.FC = ({ title, linkText, href }) => {
-
-
{linkText}
-
-
+ {linkText && href && (
+
+
{linkText}
+
+
+ )}
);
};
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 (
+
+
+
+ Subscribe to my newsletter
+
+
+ Monthly personal reading and updates on topics like tech, design,
+ productivity, programming, and more!
+
+
+
+
+
+
+
+
+
+
+
+
+ Join the 110 other readers.
+
+
+
+ );
+};
+
+export default Newsletter;
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
= ({
children,
hasEllipse = false,
type = "common",
+ className,
}) => {
if (type === "primary") {
return (
@@ -23,7 +25,9 @@ const Section: React.FC = ({
if (type === "common") {
return (
-
+
);
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",