Blog v1 (#144)

* feat: blog

* feat: cleanup touches

* fix: build issues relating to urlObj

* fix: remove hover effect from blog cards

site/pages/blog/index.tsx

@@ -1,76 +1,97 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { getSortedPostsData } from '../../utils/posts';
-import Navbar from "@/pages/components/Navbar";
+import Image from "next/image";
+import Link from "next/link";
+import { getSortedPostsData } from "../../utils/posts";
+
 import Footer from "@/pages/components/Footer";
-import { PostsPageProps } from '../../utils/types';
+import { PostsPageProps } from "../../utils/types";
+import CTACard from "../components/CTACard";
+import Header from "../components/BlogHeader";
+import { Fragment } from "react";
+import SEOConfig from "../components/SEOConfig";
+import Container from "../components/Container";
+import BlogCard1 from "../components/BlogCard1";
+import BlogCard2 from "../components/BlogCard2";
 
 export async function getStaticProps() {
-    const allPostsData = await getSortedPostsData();
-    return {
-      props: {
-        allPostsData
-      }
-    };
+  const allPostsData = await getSortedPostsData();
+  return {
+    props: {
+      allPostsData,
+    },
+  };
 }
 
 export default function PostsPage({ allPostsData }: PostsPageProps) {
-  const blogPostStyle = {
-    width: '100%', // On mobile, the blog post takes full width
-    marginBottom: '20px',
-    textAlign: 'center',
-    border: '1px solid #ddd',
-    boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    backgroundColor: '#fff',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    padding: '15px',
-    // Use a media query for larger screens
-    '@media (min-width: 768px)': {
-      width: 'calc(33.333% - 20px)', // Adjust width on larger screens
-    }
-  };
-
   return (
-    <main className="min-h-screen overflow-hidden p-6 sm:px-16 md:px-20 lg:px-24">
-      <Navbar />
-      <h2 className="text-2xl font-bold mb-4 text-center">aixplora.app - Blog</h2>
-      <div style={{
-        border: '1px solid #ddd',
-        boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',
-        borderRadius: '8px',
-        padding: '20px',
-        marginBottom: '20px',
-        backgroundColor: '#fff',
-        color: 'black',
-      }}>
-        <h3>Generative AI and the power of embeddings are changing how we find and use information in exciting ways. Imagine having a super-smart assistant that can sift through mountains of data to find exactly what you need, or even create new, useful information on the spot. That's what we're working on! We're here to make these cutting-edge technologies understandable and accessible to everyone. Join us as we explore how these tools are opening up new possibilities and making our digital world smarter and more connected.</h3>
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
-        {allPostsData.map(({ id, date, title, thumbnail, author, intro }) => (
-            <div key={id} className="blogPost">
-            <Link href={`/posts/${id}`} passHref>
-                <div style={{ width: '100%', height: '300px', position: 'relative' }}>
-                <Image
-                    src={thumbnail}
-                    alt={`Thumbnail image ${title}`}
-                    layout='fill'
-                    objectFit='cover'
-                />
-                </div>
-                <h3 className="font-semibold text-lg" style={{ marginTop: '10px', color: 'black' }}>{title}</h3>
-                <p className="text-sm" style={{ color: 'black' }}>{intro}</p>
-                <br/>
-                <p className="text-sm" style={{ color: 'black' }}>by {author}</p>
-                <p className="text-sm" style={{ color: 'black' }}>{date}</p>
-            </Link>
-            </div>
-        ))}
-      </div>
-      <Footer />
-    </main>
+    <Fragment>
+      <SEOConfig name="Blog" />
+      <main className="min-h-screen overflow-hidden p-6 sm:px-16 md:px-20 lg:px-24">
+        <Header />
+
+        <Container className="mt-12 lg:mt-20">
+          <h1 className="text-[#182336] mb-10">Blog</h1>
+
+          <ul className="relative z-[4]">
+            {allPostsData
+              .filter((_, idx) => idx === 0)
+              .map(
+                (
+                  { id, date, title, thumbnail, author, intro, authorImage },
+                  idx
+                ) => {
+                  const href = `/posts/${id}`;
+                  return (
+                    <li key={id}>
+                      <BlogCard1
+                        {...{
+                          id,
+                          date,
+                          href,
+                          title,
+                          thumbnail,
+                          author,
+                          authorImage,
+                          intro,
+                        }}
+                      />
+                    </li>
+                  );
+                }
+              )}
+          </ul>
+          <ul className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 relative z-[4]">
+            {allPostsData
+              .filter((_, idx) => idx > 0)
+              .map(
+                (
+                  { id, date, title, thumbnail, author, intro, authorImage },
+                  idx
+                ) => {
+                  const href = `/posts/${id}`;
+
+                  return (
+                    <li key={id}>
+                      <BlogCard2
+                        {...{
+                          id,
+                          date,
+                          href,
+                          title,
+                          thumbnail,
+                          author,
+                          authorImage,
+                        }}
+                      />
+                    </li>
+                  );
+                }
+              )}
+          </ul>
+        </Container>
+
+        <CTACard />
+        <Footer />
+      </main>
+    </Fragment>
   );
 }

site/pages/components/BlogCard1.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+export type BlogCardProps = {
+  id: string;
+
+  href: string;
+
+  title: string;
+
+  thumbnail: string;
+
+  authorImage: string;
+
+  author: string;
+
+  date: string;
+
+  intro?: string;
+};
+
+export default function BlogCard1({
+  author,
+  authorImage,
+  date,
+  href,
+  id,
+  thumbnail,
+  title,
+  intro,
+}: BlogCardProps) {
+  return (
+    <Link href={href ?? ""} passHref>
+      <article className="group flex flex-col items-center gap-10 my-7 lg:flex-row">
+        <span className="relative w-[100%]  h-[300px]">
+          <Image
+            src={thumbnail}
+            layout="fill"
+            objectFit="cover"
+            alt={`Thumbnail image ${title}`}
+            className="rounded-2xl transition-all"
+          />
+        </span>
+
+        <aside className="flex flex-col gap-5">
+          <h3 className="text-[#182336]">{title}</h3>
+          <p className="text-[#182336]">{intro}</p>
+
+          <span className="flex items-center gap-2">
+            <span className="relative w-12 h-12 rounded-full overflow-hidden ">
+              <Image
+                src={authorImage}
+                layout="fill"
+                objectFit="cover"
+                alt={`${author} image`}
+              />
+            </span>
+            <h5>{author}</h5>
+            <small className="text-[#031400]">{date}</small>
+          </span>
+        </aside>
+      </article>
+    </Link>
+  );
+}

site/pages/components/BlogCard2.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { BlogCardProps } from "./BlogCard1";
+
+export default function BlogCard2({
+  author,
+  authorImage,
+  date,
+  href,
+  id,
+  thumbnail,
+  title,
+}: BlogCardProps) {
+  return (
+    <Link href={href ?? ""} passHref>
+      <article className="group w-[100%] flex flex-col items-start gap-10 my-7  lg:max-w-[24rem]">
+        <span className="relative w-full h-[21em]">
+          <Image
+            src={thumbnail}
+            layout="fill"
+            objectFit="cover"
+            alt={`Thumbnail image ${title}`}
+            className="rounded-2xl transition-all"
+          />
+        </span>
+
+        <aside className="flex flex-col gap-3">
+          <h4 className="text-[#182336] text-lg font-bold lg:text-xl">
+            {title}
+          </h4>
+
+          <span className="flex items-center gap-2">
+            <span className="relative w-12 h-12 rounded-full overflow-hidden ">
+              <Image
+                src={authorImage}
+                layout="fill"
+                objectFit="cover"
+                alt={`${author} image`}
+              />
+            </span>
+            <h5>{author}</h5>
+            <small className="text-[#031400]">{date}</small>
+          </span>
+        </aside>
+      </article>
+    </Link>
+  );
+}

site/pages/components/BlogHeader.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { AiFillYoutube } from "react-icons/ai";
+import { FaDiscord } from "react-icons/fa";
+import logo from "../../public/logo.svg";
+import bg from "../../public/static/header-bg.svg";
+import Container from "./Container";
+
+function BlogHeader() {
+  return (
+    <header
+      id="header"
+      className="navbar flex flex-row w-full justify-between items-center pt-4"
+    >
+      <Image
+        src={bg}
+        width={0}
+        height={0}
+        alt=""
+        className="absolute top-0 left-0 z-0"
+      />
+      <Container className="flex flex-row w-full justify-between items-center pt-4">
+        <div className="flex items-center z-10">
+          <Link href="/">
+            <Image src={logo} alt="logo" width={50} height={50} />
+          </Link>
+        </div>
+        <div className="socials_callto_action flex flex-row items-center gap-x-6 z-10">
+          <Link href={"/register"} className="font-bold ">
+            Register
+          </Link>
+          <Link
+            href={"/login"}
+            passHref
+            className="buttons btn_3 flex justify-evenly gap-x-1 items-center"
+          >
+            Login
+          </Link>
+        </div>
+      </Container>
+    </header>
+  );
+}
+
+export default BlogHeader;