Fixes to pages

src/components/Header.astro

@@ -4,8 +4,10 @@ import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 import type Store from "../interfaces/Store";
 
+export type activeNav = "posts" | "tags" | "about" | "search" | "pages";
+
 export interface Props {
-  activeNav?: "posts" | "tags" | "about" | "search" | "pages";
+  activeNav?: activeNav;
   store?: Store;
 }
 

src/components/Subscribe.tsx

@@ -0,0 +1,62 @@
+// src/components/Subscribe.tsx
+import { markketplace } from "@config";
+
+interface Props {
+  storeId: string;
+  storeName: string;
+}
+
+export default function Subscribe({ storeId, storeName }: Props) {
+  return (
+    <div className="">
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          const form = e.target as HTMLFormElement;
+          const email = (form.elements.namedItem('email') as HTMLInputElement).value;
+
+          try {
+            const response = await fetch(`${markketplace.STRAPI_URL}/api/subscribers`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                data: {
+                  Email: email,
+                  stores: [storeId],
+                }
+              })
+            });
+
+            if (!response.ok) throw new Error();
+            form.reset();
+            alert('Thanks for subscribing!');
+          } catch (error) {
+            alert('Something went wrong. Please try again.');
+          }
+        }}
+      >
+        <div className="space-y-4">
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Subscribe to {storeName}'s newsletter
+          </label>
+          <div className="flex gap-2">
+            <input
+              type="email"
+              name="email"
+              required
+              className="flex-1 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 shadow-sm focus:border-accent-500 focus:ring-accent-500"
+              placeholder="[email protected]"
+            />
+            <button
+              style={{ background: markketplace.colors.primary, color: 'black' }}
+              type="submit"
+              className="px-4 py-2 bg-accent-600 text-white rounded-md hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500"
+            >
+              Subscribe
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

src/config.ts

@@ -3,6 +3,10 @@ import type { Site, SocialObjects } from "./types";
 export const markketplace = {
   STRAPI_URL: (import.meta.env.STRAPI_URL || '').replace(/\/$/, '') || 'https://api.morirsoniando.com',
   STORE_SLUG: import.meta.env.STORE_SLUG as string || 'markket',
+  colors: {
+    primary: import.meta.env.COLOR_PRIMARY as string || '#fbda0c',
+    accent: import.meta.env.COLOR_ACCENT as string || '#38b2ac',
+  }
 };
 
 export const SITE: Site = {

src/layouts/TagPosts.astro

@@ -53,6 +53,7 @@ const {
               pubDatetime: new Date(data.createdAt),
               modDatetime: new Date(data.updatedAt),
               description: data.SEO?.metaDescription || "",
+              SEO: { ...data.SEO },
             }}
           />
         ))

src/pages/[slug].astro

@@ -7,7 +7,7 @@ import {
   type BlocksContent,
 } from "@strapi/blocks-react-renderer";
 import Layout from "@layouts/Layout.astro";
-import Header from "@components/Header.astro";
+import Header, { type activeNav } from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Breadcrumbs from "@components/Breadcrumbs.astro";
 import Hr from "@components/Hr.astro";
@@ -29,12 +29,10 @@ const stores = await getCollection("stores");
 const store = stores?.[0]?.data as unknown as Store;
 
 const { page } = Astro.props;
-console.log({ x: page });
-// const { SEO } = page.data;
 ---
 
 <Layout>
-  <Header store={store} activeNav={page?.slug} />
+  <Header store={store} activeNav={page?.data?.slug as activeNav} />
   <Breadcrumbs />
   <main id="main-content">
     <section id="about" class="mb-10 max-w-3xl prose-img:border-0">

src/pages/newsletter.astro

@@ -0,0 +1,75 @@
+---
+// src/components/newsletter.astro
+import Subscribe from "@components/Subscribe";
+import { getCollection } from "astro:content";
+import { markketplace } from "@config";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Layout from "@layouts/Layout.astro";
+import Breadcrumbs from "@components/Breadcrumbs.astro";
+import { BlocksRenderer } from "@strapi/blocks-react-renderer";
+import Hr from "@components/Hr.astro";
+import HeroImage from "@components/HeroImage.astro";
+
+const pages = await getCollection("pages");
+const page = pages.find(page => page.data.slug === "newsletter")?.data;
+const stores = await getCollection("stores");
+const store = stores?.find(
+  store => store.data.slug === markketplace.STORE_SLUG
+)?.data;
+console.log(page);
+---
+
+<Layout
+  title={page?.SEO?.metaTitle || "Newsletter"}
+  description={page?.SEO?.metaDescription || ""}
+>
+  <Header store={store} />
+  <Breadcrumbs />
+  <main id="main-content" class="relative overflow-hidden px-4 py-16">
+    {/* Background decoration */}
+    <div
+      class="from-accent-50/50 absolute inset-0 bg-gradient-to-br to-transparent dark:from-accent-900/20"
+      aria-hidden="true"
+    >
+      <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
+    </div>
+
+    <div class="relative mx-auto max-w-4xl">
+      {
+        page?.SEO?.socialImage && (
+          <HeroImage image={page?.SEO?.socialImage} title={page?.Title} />
+        )
+      }
+      <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+        <h1 class="mb-6 text-3xl font-bold tracking-wider sm:text-4xl">
+          {page?.Title}
+        </h1>
+        <BlocksRenderer content={page?.Content || ([] as BlocksContent[])} />
+      </section>
+
+      <section
+        class="rounded-2xl bg-white bg-opacity-90 p-8 shadow-xl backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-90"
+      >
+        <Subscribe storeId={store?.id} storeName={store?.name} client:load />
+        <p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
+          Join our newsletter to get the latest updates and exclusive offers.
+        </p>
+      </section>
+    </div>
+  </main>
+  <Hr />
+  <Footer />
+</Layout>
+
+<style>
+  .bg-grid-pattern {
+    background-image: linear-gradient(
+        to right,
+        rgba(128, 128, 128, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
+    background-size: 24px 24px;
+  }
+</style>