add about page and change home and trend page

Author: AliNikseresht

src/data/about.tsx

@@ -0,0 +1,33 @@
+import { TAboutData } from "../types/about";
+
+export const aboutData: TAboutData = {
+  title: "About Blogify",
+  description:
+    "Blogify is a modern and responsive blogging application built with React, TypeScript, Tailwind CSS, and Firebase. It provides users with the ability to read blogs, create accounts, and publish their own blogs in a seamless and user-friendly interface.",
+  features: {
+    title: "Key Features",
+    featureItems: [
+      "Responsive design for a seamless experience on mobile, tablet, and desktop devices.",
+      "User authentication and account creation via Firebase.",
+      "Ability to create, edit, and publish blogs in real-time.",
+      "Modern UI/UX with Tailwind CSS.",
+      "Built with TypeScript for better maintainability and scalability.",
+    ],
+  },
+  developerInfo: {
+    title: "About the Developer",
+    subTitle: "Hi! I'm",
+    developerName: "Ali Nikseresht",
+    developerInfoDescription:
+      "a passionate frontend developer with expertise in modern web technologies.",
+  },
+  contact: {
+    title: "Connect with me on:",
+    links: [
+      {
+        title: "GitHub",
+        link: "https://github.com/AliNikseresht",
+      },
+    ],
+  },
+};

src/pages/About/AboutPage.tsx

@@ -1,8 +1,44 @@
+import { aboutData } from "../../data/about";
+import { FiGithub } from "react-icons/fi";
 
 const AboutPage = () => {
   return (
-    <div>Comming soon</div>
-  )
-}
+    <div className="flex flex-col p-[0em] md:p-[3em] gap-[6em] min-h-screen">
+      <div className="flex flex-col items-center md:w-32">
+        <div className="w-14 mb-0.5 h-0.5 bc-green"></div>
+        <h1 className="text-lg md:text-xl">{aboutData.title}</h1>
+      </div>
 
-export default AboutPage
+      <div className="flex flex-col gap-3">
+        <p className="text-lg leading-relaxed">{aboutData.description}</p>
+        <h2 className="text-2xl font-semibold c-green">
+          {aboutData.features.title}
+        </h2>
+        <ul className="list-disc pl-6 space-y-2">
+          {aboutData.features.featureItems.map((feature, index) => (
+            <li key={index}>{feature}</li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="flex justify-center items-center gap-1.5 w-full text-xl c-green">
+        <h1 className="font-bold">
+          {aboutData.developerInfo.developerName}
+        </h1>
+        {aboutData.contact.links.map((item) => (
+          <a
+            href={item.link}
+            className="flex items-center font-bold gap-2"
+          >
+            {item.title}
+          </a>
+        ))}
+        <span>
+          <FiGithub />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default AboutPage;

src/pages/Home/Home.tsx

@@ -33,8 +33,8 @@ const Home = () => {
   return (
     <div className="flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen">
       <div className="flex flex-col items-center md:w-10">
-        <div className="w-4 h-0.5 bc-green"></div>
-        <h1 className="text-lg md:text-base">{homeData.title}</h1>
+        <div className="w-6 h-0.5 bc-green"></div>
+        <h1 className="text-lg md:text-xl">{homeData.title}</h1>
       </div>
       {blogs.length === 0 ? (
         <EmptyState />

src/pages/Trend/_components/TrendingBlogs.tsx

@@ -21,9 +21,9 @@ const TrendingBlogs: React.FC<TrendingBlogsProps> = ({
 
   return (
     <div className="flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen">
-      <div className="flex flex-col items-center md:w-[7rem]">
+      <div className="flex flex-col items-center md:w-[8.5rem]">
         <div className="w-20 mb-0.5 h-0.5 bc-green"></div>
-        <h1 className="text-lg md:text-base">{trendData.title}</h1>
+        <h1 className="text-lg md:text-xl">{trendData.title}</h1>
       </div>
       {blogs.length === 0 ? (
         <EmptyState />

src/types/about.ts

@@ -0,0 +1,21 @@
+export type TAboutData = {
+  title: string;
+  description: string;
+  features: {
+    title: string;
+    featureItems: string[];
+  };
+  developerInfo: {
+    title: string;
+    subTitle: string;
+    developerName: string;
+    developerInfoDescription: string;
+  };
+  contact: {
+    title: string;
+    links: {
+      title: string;
+      link: string;
+    }[];
+  };
+};