From 7ae1591661a8842b68e8ba0e1ad098a7ced76322 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 04:19:02 -0400
Subject: [PATCH 1/6] creating /about page

---
 src/layouts/BaseLayout.astro    | 102 ++++---
 src/layouts/LandingLayout.astro | 173 +++++++-----
 src/pages/about/index.astro     | 464 ++++++++++++++++++++++++++++++++
 src/pages/index.astro           |  44 +--
 4 files changed, 669 insertions(+), 114 deletions(-)
 create mode 100644 src/pages/about/index.astro

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index a82ff27..fb1760d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,6 +1,6 @@
 ---
 import "../styles/base.css";
-import Posthog from '../components/posthog.astro';
+import Posthog from "../components/posthog.astro";
 
 export interface Props {
   title?: string;
@@ -8,7 +8,7 @@ export interface Props {
   image?: string;
   canonical?: string;
   noindex?: boolean;
-  type?: 'website' | 'article' | 'product';
+  type?: "website" | "article" | "product";
   publishedTime?: string;
   modifiedTime?: string;
   author?: string;
@@ -26,7 +26,7 @@ const {
   image = "/favicon.svg",
   canonical,
   noindex = false,
-  type = 'website',
+  type = "website",
   publishedTime,
   modifiedTime,
   author,
@@ -35,29 +35,30 @@ const {
   alternateLocales = [],
   structuredData,
   className = "",
-  favicon = '/favicon.png'
+  favicon = "/favicon.png",
 } = Astro.props;
 
 // Get the canonical URL - use provided canonical or current URL
 const canonicalURL = canonical || new URL(Astro.url.pathname, Astro.site);
 
 // Ensure image is absolute URL
-const absoluteImage = image?.startsWith('http')
+const absoluteImage = image?.startsWith("http")
   ? image
   : new URL(image, Astro.site);
 
 // Generate structured data for SEO
 const defaultStructuredData = {
   "@context": "https://schema.org",
-  "@type": type === 'article' ? "Article" : type === 'product' ? "Product" : "WebSite",
-  "name": title,
-  "description": description,
-  "url": canonicalURL,
-  ...(image && { "image": absoluteImage }),
-  ...(author && { "author": { "@type": "Person", "name": author } }),
-  ...(publishedTime && { "datePublished": publishedTime }),
-  ...(modifiedTime && { "dateModified": modifiedTime }),
-  ...(siteName && { "publisher": { "@type": "Organization", "name": siteName } })
+  "@type":
+    type === "article" ? "Article" : type === "product" ? "Product" : "WebSite",
+  name: title,
+  description: description,
+  url: canonicalURL,
+  ...(image && { image: absoluteImage }),
+  ...(author && { author: { "@type": "Person", name: author } }),
+  ...(publishedTime && { datePublished: publishedTime }),
+  ...(modifiedTime && { dateModified: modifiedTime }),
+  ...(siteName && { publisher: { "@type": "Organization", name: siteName } }),
 };
 
 const finalStructuredData = structuredData || defaultStructuredData;
@@ -86,11 +87,21 @@ const finalStructuredData = structuredData || defaultStructuredData;
     <meta property="og:image" content={absoluteImage} />
     <meta property="og:site_name" content={siteName} />
     <meta property="og:locale" content={locale} />
-    {alternateLocales.map(({ locale: altLocale, url }) => (
-      <meta property="og:locale:alternate" content={altLocale} />
-    ))}
-    {publishedTime && <meta property="article:published_time" content={publishedTime} />}
-    {modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
+    {
+      alternateLocales.map(({ locale: altLocale, url }) => (
+        <meta property="og:locale:alternate" content={altLocale} />
+      ))
+    }
+    {
+      publishedTime && (
+        <meta property="article:published_time" content={publishedTime} />
+      )
+    }
+    {
+      modifiedTime && (
+        <meta property="article:modified_time" content={modifiedTime} />
+      )
+    }
     {author && <meta property="article:author" content={author} />}
 
     <!-- Twitter -->
@@ -113,12 +124,17 @@ const finalStructuredData = structuredData || defaultStructuredData;
     />
 
     <!-- Alternate Language Links -->
-    {alternateLocales.map(({ locale: altLocale, url }) => (
-      <link rel="alternate" hreflang={altLocale} href={url} />
-    ))}
+    {
+      alternateLocales.map(({ locale: altLocale, url }) => (
+        <link rel="alternate" hreflang={altLocale} href={url} />
+      ))
+    }
 
     <!-- Structured Data -->
-    <script type="application/ld+json" set:html={JSON.stringify(finalStructuredData)} />
+    <script
+      type="application/ld+json"
+      set:html={JSON.stringify(finalStructuredData)}
+    />
 
     <!-- Additional head content from pages -->
     <slot name="head" />
@@ -162,22 +178,46 @@ const finalStructuredData = structuredData || defaultStructuredData;
         <div class="container">
           <div class="footer-content">
             <div class="footer-section">
-            <h3 class="">{siteName}</h3>
-              <p>A cool, easy ecommerce platform built by artists, for artists</p>
+              <h3 class="">{siteName}</h3>
+              <p>
+                A cool, easy ecommerce platform built by artists, for artists
+              </p>
             </div>
             <div class="footer-section">
               <h4>Quick Links</h4>
               <ul>
                 <li><a href="/">Home</a></li>
-                <li><a href="https://github.com/calimania/markket-space" target="_blank">GitHub</a></li>
+                <li>
+                  <a
+                    href="https://github.com/calimania/markket-space"
+                    target="_blank"
+                  >
+                    GitHub
+                  </a>
+                </li>
               </ul>
             </div>
             <div class="footer-section">
               <h4>Get Started</h4>
               <ul>
-                <li><a href="https://de.markket.place/auth/magic" target="_blank">Register / login</a></li>
-                <li><a href="https://de.markket.place/store/next/showcase" target="_blank">Templates</a></li>
-                <li><a href="https://de.markket.place/store/dev" target="_blank">Dev store</a></li>
+                <li>
+                  <a href="https://de.markket.place/auth/magic" target="_blank">
+                    Register / login
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://de.markket.place/store/next/showcase"
+                    target="_blank"
+                  >
+                    Templates
+                  </a>
+                </li>
+                <li>
+                  <a href="https://de.markket.place/store/dev" target="_blank">
+                    Dev store
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
@@ -193,7 +233,6 @@ const finalStructuredData = structuredData || defaultStructuredData;
 </html>
 
 <style>
-  /* Accessibility */
   .skip-link {
     position: absolute;
     top: -40px;
@@ -254,6 +293,7 @@ const finalStructuredData = structuredData || defaultStructuredData;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     transition: all 0.2s;
+    margin-right: 16px;
   }
 
   .nav-link:hover {
@@ -383,4 +423,4 @@ const finalStructuredData = structuredData || defaultStructuredData;
       background: rgba(17, 24, 39, 0.95);
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
index 0e1b4ca..4ab1207 100644
--- a/src/layouts/LandingLayout.astro
+++ b/src/layouts/LandingLayout.astro
@@ -1,8 +1,8 @@
 ---
-import BaseLayout from './BaseLayout.astro';
+import BaseLayout from "./BaseLayout.astro";
 import { getCollection } from "astro:content";
-import { IconInfinity, IconPalette, IconSparkles } from '@tabler/icons-react';
-import { marked } from 'marked';
+import { IconInfinity, IconPalette, IconSparkles } from "@tabler/icons-react";
+import { marked } from "marked";
 
 export interface Props {
   title?: string;
@@ -20,13 +20,16 @@ export interface Props {
 const storeData = await getCollection("store");
 const store = storeData[0]?.data || {};
 const storeName = store.title || "Markkët Space";
-const storeDescription = store.Description || "The hub to launch, grow, and thrive";
+const storeDescription =
+  store.Description || "The hub to launch, grow, and thrive";
 const parsedDescription = marked.parse(storeDescription);
 
 const {
   title = store.SEO?.metaTitle || `${storeName} - Create Your Store`,
   description = store.SEO?.metaDescription || storeDescription,
-  image = store.SEO?.socialImage?.formats?.large?.url || store.SEO?.socialImage?.url || "/favicon.svg",
+  image = store.SEO?.socialImage?.formats?.large?.url ||
+    store.SEO?.socialImage?.url ||
+    "/favicon.svg",
   heroTitle = storeName,
   heroCtaText = "Featured Stores",
   heroCtaUrl = "https://de.markket.place/stores",
@@ -45,25 +48,25 @@ const {
   structuredData={{
     "@context": "https://schema.org",
     "@type": "WebSite",
-    "name": storeName,
-    "description": storeDescription,
-    "url": Astro.site,
-    "publisher": {
+    name: storeName,
+    description: storeDescription,
+    url: Astro.site,
+    publisher: {
       "@type": "Organization",
-      "name": "Markkët Space",
-      "logo": {
+      name: "Markkët Space",
+      logo: {
         "@type": "ImageObject",
-        "url": new URL("/favicon.svg", Astro.site)
-      }
+        url: new URL("/favicon.svg", Astro.site),
+      },
     },
-    "potentialAction": {
+    potentialAction: {
       "@type": "SearchAction",
-      "target": {
+      target: {
         "@type": "EntryPoint",
-        "urlTemplate": `${heroCtaUrl}?q={search_term_string}`
+        urlTemplate: `${heroCtaUrl}?q={search_term_string}`,
       },
-      "query-input": "required name=search_term_string"
-    }
+      "query-input": "required name=search_term_string",
+    },
   }}
 >
   <!-- Custom header for landing pages -->
@@ -74,14 +77,13 @@ const {
           {storeName}
         </a>
         <div class="nav-links">
-          <a href="/blocks-demo" class="nav-link">Demo</a>
-          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
+          <a href="/about" class="nav-link">About</a>
           <a
             href="https://de.markket.place/auth/magic"
             class="nav-button"
             target="_blank"
           >
-            Start Selling
+            Get Started
           </a>
         </div>
       </nav>
@@ -92,30 +94,36 @@ const {
   <section class="hero-section">
     <div class="container">
       <div class="hero-content">
-        <div class="hero-badge">keep the internet yours</div>
-        <h1 class="hero-title">{heroTitle}</h1>
-        <p>Simple Ecommerce
-          <br>Add content, products, set prices, and connect Stripe for fast, secure payouts
+        <div class="hero-badge">✨ Made by creators, for creators</div>
+        <h1 class="hero-title">Turn your passion into profit</h1>
+        <p class="hero-subtitle">
+          Launch your professional online store in minutes. Sell digital
+          downloads, physical products, subscriptions, and services with our
+          creator-focused ecommerce platform.
         </p>
         <div class="hero-stats">
           <div class="stat">
             <div class="stat-number">Free</div>
-            <div class="stat-label">To get started</div>
+            <div class="stat-label">to start selling</div>
           </div>
           <div class="stat">
-            <div class="stat-number">Quick</div>
-            <div class="stat-label">Setup time</div>
+            <div class="stat-number">5min</div>
+            <div class="stat-label">setup time</div>
           </div>
           <div class="stat">
             <div class="stat-number">
               <IconInfinity size={48} client:load />
             </div>
-            <div class="stat-label">Possibilities</div>
+            <div class="stat-label">possibilities</div>
           </div>
         </div>
         <div class="hero-actions">
-          <a href="https://de.markket.place/auth/magic" class="cta-primary" target="_blank">
-            Register
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="cta-primary"
+            target="_blank"
+          >
+            Start Your Store Free →
           </a>
           <a href={heroCtaUrl} class="cta-secondary" target="_blank">
             {heroCtaText}
@@ -123,20 +131,22 @@ const {
         </div>
         <div class="hero-community">
           <p>
-            <IconPalette size={16} client:load /> Join a creative community • Built for flexibility
-            <IconSparkles size={16} client:load /> Sell art, digital downloads, subscriptions, or services
+            <IconPalette size={16} client:load /> Join 100+ creators •
+            <IconSparkles size={16} client:load /> Shape the future together
           </p>
         </div>
       </div>
-      {store.Cover && (
-        <div class="hero-image">
-          <img
-            src={(store.Cover as any).formats?.large?.url || store.Cover.url}
-            alt={store.Cover.alternativeText || "Store showcase"}
-            loading="eager"
-          />
-        </div>
-      )}
+      {
+        store.Cover && (
+          <div class="hero-image">
+            <img
+              src={(store.Cover as any).formats?.large?.url || store.Cover.url}
+              alt={store.Cover.alternativeText || "Store showcase"}
+              loading="eager"
+            />
+          </div>
+        )
+      }
     </div>
   </section>
 
@@ -144,26 +154,30 @@ const {
   <slot />
 
   <!-- Store Info Section (optional) -->
-  {showStoreInfo && (
-    <section class="store-info-section">
-      <div class="container">
-        <div class="store-content">
-          <div class="store-details">
-            <h2>About {storeName}</h2>
-            <div set:html={parsedDescription} />
-          </div>
-          {store.Logo && (
-            <div class="store-logo">
-              <img
-                src={(store.Logo as any).formats?.medium?.url || store.Logo.url}
-                alt={store.Logo.alternativeText || "Store logo"}
-              />
+  {
+    showStoreInfo && (
+      <section class="store-info-section">
+        <div class="container">
+          <div class="store-content">
+            <div class="store-details">
+              <h2>About {storeName}</h2>
+              <div set:html={parsedDescription} />
             </div>
-          )}
+            {store.Logo && (
+              <div class="store-logo">
+                <img
+                  src={
+                    (store.Logo as any).formats?.medium?.url || store.Logo.url
+                  }
+                  alt={store.Logo.alternativeText || "Store logo"}
+                />
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </section>
-  )}
+      </section>
+    )
+  }
 
   <!-- CTA Section -->
   <section class="final-cta-section">
@@ -235,8 +249,8 @@ const {
     gap: 2rem;
   }
 
-  .nav-link {
-    color: var(--text);
+  .nav-link:link {
+    color: black;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
@@ -277,13 +291,17 @@ const {
   }
 
   .hero-section::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
+    background: radial-gradient(
+      circle at 30% 20%,
+      rgba(255, 255, 255, 0.3) 0%,
+      transparent 50%
+    );
     pointer-events: none;
   }
 
@@ -296,6 +314,18 @@ const {
     z-index: 1;
     max-width: 900px;
     margin: 0 auto;
+    animation: fadeInUp 1s ease-out;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .hero-badge {
@@ -379,6 +409,18 @@ const {
     border-radius: 1.5rem;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
+    animation: fadeInScale 1.2s ease-out 0.3s both;
+  }
+
+  @keyframes fadeInScale {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 
   .hero-image img:hover {
@@ -479,7 +521,6 @@ const {
     line-height: 1.7;
   }
 
-
   .store-logo {
     text-align: center;
   }
@@ -578,4 +619,4 @@ const {
       justify-content: center;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro
new file mode 100644
index 0000000..30a61e7
--- /dev/null
+++ b/src/pages/about/index.astro
@@ -0,0 +1,464 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import BlocksContent from "../../components/BlocksContent.astro";
+
+const pages = await getCollection("pages");
+const page = pages.find((p) => p.data.slug == "about")?.data;
+
+const storeData = await getCollection("store");
+const store = storeData[0]?.data || {};
+const storeName = store.title || "Markkët Space";
+const storeCover = store.Cover;
+---
+
+<BaseLayout
+  title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
+  description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
+  image={page?.SEO?.socialImage?.formats?.large?.url ||
+    page?.SEO?.socialImage?.url ||
+    storeCover?.url}
+>
+  <header class="page-header" slot="header">
+    <div class="container">
+      <nav class="main-nav">
+        <a href="/" class="logo">{storeName}</a>
+        <div class="nav-links">
+          <a href="/" class="nav-link">Home</a>
+          <a href="/about" class="nav-link active">About</a>
+          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="nav-button"
+            target="_blank"
+          >
+            Get Started
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+    <!-- About Hero Section -->
+  <section class="about-hero">
+    <div class="container">
+      <div class="about-hero-content">
+        <div class="hero-text">
+          <h1>{page?.Title || "About Markkët Space"}</h1>
+          <p class="about-subtitle">
+            {page?.SEO?.metaDescription || "We're building the future of creator commerce - a platform that puts artists, designers, and content creators first."}
+          </p>
+        </div>
+        {page?.SEO?.socialImage?.url && (
+          <div class="hero-image">
+            <img
+              src={page.SEO.socialImage.url}
+              alt={page.Title || "About Markkët Space"}
+              loading="eager"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  </section>
+
+  <!-- Page Content from Strapi -->
+  {
+    page?.Content && page.Content.length > 0 && (
+      <section class="page-content-section">
+        <div class="container">
+          <BlocksContent content={page.Content} className="page-content" />
+        </div>
+      </section>
+    )
+  }
+</BaseLayout>
+
+<style>
+  /* Page Header */
+  .page-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary);
+  }
+
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary);
+    border-radius: 1px;
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  /* About Hero Section */
+  .about-hero {
+    padding: 6rem 0 4rem;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .about-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  .about-hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .hero-text h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: white;
+    line-height: 1.1;
+  }
+
+  .about-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    opacity: 0.9;
+    margin-bottom: 0;
+  }
+
+  .hero-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero-image img {
+    width: 100%;
+    max-width: 400px;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 1.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+  }
+
+  .hero-image img:hover {
+    transform: translateY(-5px) scale(1.02);
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  :global(.page-content) {
+    padding: 2rem;
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  :global(.page-content p) {
+    margin-bottom: 1.5rem;
+    line-height: 1.7;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .about-hero-content {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      text-align: center;
+    }
+
+    .hero-text h1 {
+      font-size: 2.5rem;
+    }
+
+    .about-subtitle {
+      font-size: 1.125rem;
+    }
+
+    .hero-image img {
+      max-width: 300px;
+      height: 225px;
+    }
+
+    .nav-links {
+      gap: 1rem;
+    }
+
+    .nav-link {
+      font-size: 0.9rem;
+    }
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  .page-content-section .container {
+    max-width: 900px;
+  }
+
+  .nav-link {
+    margin-right: 16px;
+  }
+
+  :global(.page-content) {
+    background: var(--bg);
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-light);
+    color: var(--text);
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content p) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content a) {
+    color: var(--primary) !important;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .features-section {
+      padding: 4rem 0;
+    }
+
+    .features-grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+
+    .feature-card {
+      padding: 2rem 1.5rem;
+    }
+
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+    }
+
+    .creator-types {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+
+    .creator-type {
+      padding: 1rem;
+    }
+
+    .creator-type .creator-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    :global(.page-content) {
+      padding: 2rem;
+    }
+
+  /* Page Header */
+  .page-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary);
+  }
+
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary);
+    border-radius: 1px;
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  /* About Hero Section */
+  .about-hero {
+    padding: 6rem 0 4rem;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    text-align: center;
+  }
+
+  .about-hero-content h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: white;
+  }
+
+  .about-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    max-width: 600px;
+    margin: 0 auto;
+    opacity: 0.9;
+  }
+
+    .social-proof-cta .cta-primary,
+    .social-proof-cta .cta-secondary {
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .creator-types {
+      grid-template-columns: 1fr;
+    }
+
+    .social-proof-section {
+      padding: 3rem 0;
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e347167..4509f38 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -47,10 +47,11 @@ const storeCover = store.Cover;
   <section class="features-section">
     <div class="container">
       <div class="section-header">
-        <h2>Built for creators, by creators</h2>
+        <h2>Everything you need to succeed</h2>
         <p>
-          Everything you need to turn your art into income, built with love by a
-          friendly community
+          Professional tools designed specifically for creators. From digital
+          artists to course creators, we've built the platform that understands
+          your unique needs.
         </p>
       </div>
       <div class="features-grid">
@@ -58,46 +59,53 @@ const storeCover = store.Cover;
           <div class="feature-icon">
             <IconPalette size={32} client:load />
           </div>
-          <h3>Dynamic Design</h3>
-          <p>Growing set of templates designed specifically for creators</p>
+          <h3>Creator-Focused Templates</h3>
+          <p>
+            Beautiful, customizable designs built specifically for artists,
+            designers, and content creators
+          </p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">
             <IconCoin size={32} client:load />
           </div>
-          <h3>Free to Start</h3>
+          <h3>Zero Startup Costs</h3>
           <p>
-            No upfront costs, no mandatory monthly fees, reasonable commisions
+            Start selling immediately with no upfront fees. Only pay when you
+            make sales.
           </p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">
             <IconUsers size={32} client:load />
           </div>
-          <h3>Early Community</h3>
-          <p>Friendly developers and creators shaping our future</p>
+          <h3>Growing Community</h3>
+          <p>
+            Join a supportive community of creators helping each other succeed
+          </p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">
             <IconKey size={32} client:load />
           </div>
-          <h3>Magic Link Login</h3>
-          <p>Easy login with magic links - safe and convenient</p>
+          <h3>Secure Authentication</h3>
+          <p>Magic link login - no passwords needed, just your email</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">
             <IconDeviceMobile size={32} client:load />
           </div>
-          <h3>Mobile Capable</h3>
-          <p>Seller dashboard in mobile web and upcoming ios app</p>
+          <h3>Mobile Optimized</h3>
+          <p>Manage your store on the go with our mobile-friendly dashboard</p>
         </div>
         <div class="feature-card">
           <div class="feature-icon">
             <IconCode size={32} client:load />
           </div>
-          <h3>Basic HTML</h3>
+          <h3>Flexible Content</h3>
           <p>
-            Easy to customize and deploy blogs, pages, products and collections
+            Create blogs, product pages, collections, and custom content with
+            ease
           </p>
         </div>
       </div>
@@ -108,7 +116,7 @@ const storeCover = store.Cover;
   <section class="social-proof-section">
     <div class="container">
       <div class="social-proof-content">
-        <h3>Perfect for all types of creators</h3>
+        <h3>Perfect for every type of creator</h3>
         <div class="creator-types">
           <div class="creator-type">
             <div class="creator-icon">
@@ -148,7 +156,9 @@ const storeCover = store.Cover;
           </div>
         </div>
         <div class="social-proof-cta">
-          <p>Ready to be an early user?</p>
+          <p>
+            Join hundreds of creators already building their online presence
+          </p>
           <a
             href="https://de.markket.place/auth/magic"
             class="cta-primary"

From fd6b22b250ee8447dd1134c7e210eacf15423745 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 04:21:04 -0400
Subject: [PATCH 2/6] /blog index page

---
 src/pages/blog/index.astro | 460 +++++++++++++++++++++++++++++++++++++
 1 file changed, 460 insertions(+)
 create mode 100644 src/pages/blog/index.astro

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..fb06261
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,460 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import BlocksContent from "../../components/BlocksContent.astro";
+
+const pages = await getCollection("pages");
+const page = pages.find((p) => p.data.slug == "blog")?.data;
+
+const storeData = await getCollection("store");
+const store = storeData[0]?.data || {};
+const storeName = store.title || "Markkët Blog";
+const storeCover = store.Cover;
+---
+
+<BaseLayout
+  title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
+  description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
+  image={page?.SEO?.socialImage?.formats?.large?.url ||
+    page?.SEO?.socialImage?.url ||
+    storeCover?.url}
+>
+  <header class="page-header" slot="header">
+    <div class="container">
+      <nav class="main-nav">
+        <a href="/" class="logo">{storeName}</a>
+        <div class="nav-links">
+          <a href="/" class="nav-link">Home</a>
+          <a href="/about" class="nav-link active">About</a>
+          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="nav-button"
+            target="_blank"
+          >
+            Get Started
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <section class="blog-hero">
+    <div class="container">
+      <div class="blog-hero-content">
+        <div class="hero-text">
+          <h1>{page?.Title || "Markkët Space Blog"}</h1>
+          <p class="about-subtitle">
+            {page?.SEO?.metaDescription || "Articles and updates for the seller community."}
+          </p>
+        </div>
+        {page?.SEO?.socialImage?.url && (
+          <div class="hero-image">
+            <img
+              src={page.SEO.socialImage.url}
+              alt={page.Title || "Markkët Space Blog"}
+              loading="eager"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  </section>
+  {
+    page?.Content && page.Content.length > 0 && (
+      <section class="page-content-section">
+        <div class="container">
+          <BlocksContent content={page.Content} className="page-content" />
+        </div>
+      </section>
+    )
+  }
+</BaseLayout>
+<style>
+  /* Page Header */
+  .page-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary);
+  }
+
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary);
+    border-radius: 1px;
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  /* About Hero Section */
+  .blog-hero {
+    padding: 6rem 0 4rem;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .blog-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  .blog-hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .hero-text h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: white;
+    line-height: 1.1;
+  }
+
+  .about-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    opacity: 0.9;
+    margin-bottom: 0;
+  }
+
+  .hero-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero-image img {
+    width: 100%;
+    max-width: 400px;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 1.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+  }
+
+  .hero-image img:hover {
+    transform: translateY(-5px) scale(1.02);
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  :global(.page-content) {
+    padding: 2rem;
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  :global(.page-content p) {
+    margin-bottom: 1.5rem;
+    line-height: 1.7;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .blog-hero-content {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      text-align: center;
+    }
+
+    .hero-text h1 {
+      font-size: 2.5rem;
+    }
+
+    .about-subtitle {
+      font-size: 1.125rem;
+    }
+
+    .hero-image img {
+      max-width: 300px;
+      height: 225px;
+    }
+
+    .nav-links {
+      gap: 1rem;
+    }
+
+    .nav-link {
+      font-size: 0.9rem;
+    }
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  .page-content-section .container {
+    max-width: 900px;
+  }
+
+  .nav-link {
+    margin-right: 16px;
+  }
+
+  :global(.page-content) {
+    background: var(--bg);
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-light);
+    color: var(--text);
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content p) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content a) {
+    color: var(--primary) !important;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .features-section {
+      padding: 4rem 0;
+    }
+
+    .features-grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+
+    .feature-card {
+      padding: 2rem 1.5rem;
+    }
+
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+    }
+
+    .creator-types {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+
+    .creator-type {
+      padding: 1rem;
+    }
+
+    .creator-type .creator-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    :global(.page-content) {
+      padding: 2rem;
+    }
+
+  /* Page Header */
+  .page-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary);
+  }
+
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary);
+    border-radius: 1px;
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  /* About Hero Section */
+  .blog-hero {
+    padding: 6rem 0 4rem;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    text-align: center;
+  }
+
+  .blog-hero-content h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: white;
+  }
+
+  .about-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    max-width: 600px;
+    margin: 0 auto;
+    opacity: 0.9;
+  }
+
+    .social-proof-cta .cta-primary,
+    .social-proof-cta .cta-secondary {
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .creator-types {
+      grid-template-columns: 1fr;
+    }
+
+    .social-proof-section {
+      padding: 3rem 0;
+    }
+  }
+</style>

From 4b7d450527dd16b35368bad48214394ddbbe3242 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 04:23:32 -0400
Subject: [PATCH 3/6] Created a /products index page

---
 src/pages/products/index.astro | 483 +++++++++++++++++++++++++++++++++
 1 file changed, 483 insertions(+)
 create mode 100644 src/pages/products/index.astro

diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
new file mode 100644
index 0000000..e824c59
--- /dev/null
+++ b/src/pages/products/index.astro
@@ -0,0 +1,483 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import BlocksContent from "../../components/BlocksContent.astro";
+
+const pages = await getCollection("pages");
+const page = pages.find((p) => p.data.slug == "products")?.data;
+
+const storeData = await getCollection("store");
+const store = storeData[0]?.data || {};
+const storeName = store.title || "Markkët Products";
+const storeCover = store.Cover;
+---
+
+<BaseLayout
+  title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
+  description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
+  image={page?.SEO?.socialImage?.formats?.large?.url ||
+    page?.SEO?.socialImage?.url ||
+    storeCover?.url}
+>
+  <header class="page-header" slot="header">
+    <div class="container">
+      <nav class="main-nav">
+        <a href="/" class="logo">{storeName}</a>
+        <div class="nav-links">
+          <a href="/" class="nav-link">Home</a>
+          <a href="/about" class="nav-link active">About</a>
+          <a
+            href="https://github.com/calimania/markket-space"
+            class="nav-link"
+            target="_blank"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://de.markket.place/auth/magic"
+            class="nav-button"
+            target="_blank"
+          >
+            Get Started
+          </a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <section class="products-hero">
+    <div class="container">
+      <div class="products-hero-content">
+        <div class="hero-text">
+          <h1>{page?.Title || "Markkët Space Blog"}</h1>
+          <p class="about-subtitle">
+            {
+              page?.SEO?.metaDescription ||
+                "Articles and updates for the seller community."
+            }
+          </p>
+        </div>
+        {
+          page?.SEO?.socialImage?.url && (
+            <div class="hero-image">
+              <img
+                src={page.SEO.socialImage.url}
+                alt={page.Title || "Markkët Space Products"}
+                loading="eager"
+              />
+            </div>
+          )
+        }
+      </div>
+    </div>
+  </section>
+  {
+    page?.Content && page.Content.length > 0 && (
+      <section class="page-content-section">
+        <div class="container">
+          <BlocksContent content={page.Content} className="page-content" />
+        </div>
+      </section>
+    )
+  }
+</BaseLayout>
+<style>
+  /* Page Header */
+  .page-header {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: var(--primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-link {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary);
+  }
+
+  .nav-link.active::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary);
+    border-radius: 1px;
+  }
+
+  .nav-button {
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.3s ease;
+  }
+
+  .nav-button:hover {
+    background: var(--primary-dark);
+  }
+
+  /* About Hero Section */
+  .products-hero {
+    padding: 6rem 0 4rem;
+    background: linear-gradient(
+      135deg,
+      var(--primary) 0%,
+      var(--secondary) 100%
+    );
+    color: white;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .products-hero::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+      circle at 70% 30%,
+      rgba(255, 255, 255, 0.1) 0%,
+      transparent 50%
+    );
+    pointer-events: none;
+  }
+
+  .products-hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .hero-text h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: white;
+    line-height: 1.1;
+  }
+
+  .about-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    opacity: 0.9;
+    margin-bottom: 0;
+  }
+
+  .hero-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero-image img {
+    width: 100%;
+    max-width: 400px;
+    height: 300px;
+    object-fit: cover;
+    border-radius: 1.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+  }
+
+  .hero-image img:hover {
+    transform: translateY(-5px) scale(1.02);
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  :global(.page-content) {
+    padding: 2rem;
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  :global(.page-content p) {
+    margin-bottom: 1.5rem;
+    line-height: 1.7;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .products-hero-content {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      text-align: center;
+    }
+
+    .hero-text h1 {
+      font-size: 2.5rem;
+    }
+
+    .about-subtitle {
+      font-size: 1.125rem;
+    }
+
+    .hero-image img {
+      max-width: 300px;
+      height: 225px;
+    }
+
+    .nav-links {
+      gap: 1rem;
+    }
+
+    .nav-link {
+      font-size: 0.9rem;
+    }
+  }
+
+  /* Page Content Section */
+  .page-content-section {
+    padding: 4rem 0;
+    background: var(--bg);
+  }
+
+  .page-content-section .container {
+    max-width: 800px;
+  }
+
+  .page-content-section .container {
+    max-width: 900px;
+  }
+
+  .nav-link {
+    margin-right: 16px;
+  }
+
+  :global(.page-content) {
+    background: var(--bg);
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-light);
+    color: var(--text);
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content p) {
+    color: var(--text) !important;
+  }
+
+  :global(.page-content a) {
+    color: var(--primary) !important;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .features-section {
+      padding: 4rem 0;
+    }
+
+    .features-grid {
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+    }
+
+    .feature-card {
+      padding: 2rem 1.5rem;
+    }
+
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+    }
+
+    .creator-types {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+
+    .creator-type {
+      padding: 1rem;
+    }
+
+    .creator-type .creator-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    :global(.page-content) {
+      padding: 2rem;
+    }
+
+    /* Page Header */
+    .page-header {
+      background: rgba(255, 255, 255, 0.98);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .main-nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 0;
+    }
+
+    .logo {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text);
+      text-decoration: none;
+      transition: color 0.3s ease;
+    }
+
+    .logo:hover {
+      color: var(--primary);
+    }
+
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+
+    .nav-link {
+      color: var(--text);
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.3s ease;
+      position: relative;
+    }
+
+    .nav-link:hover,
+    .nav-link.active {
+      color: var(--primary);
+    }
+
+    .nav-link.active::after {
+      content: "";
+      position: absolute;
+      bottom: -5px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: var(--primary);
+      border-radius: 1px;
+    }
+
+    .nav-button {
+      background: var(--primary);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.5rem;
+      text-decoration: none;
+      font-weight: 500;
+      transition: background 0.3s ease;
+    }
+
+    .nav-button:hover {
+      background: var(--primary-dark);
+    }
+
+    /* About Hero Section */
+    .products-hero {
+      padding: 6rem 0 4rem;
+      background: linear-gradient(
+        135deg,
+        var(--primary) 0%,
+        var(--secondary) 100%
+      );
+      color: white;
+      text-align: center;
+    }
+
+    .products-hero-content h1 {
+      font-size: 3rem;
+      font-weight: 800;
+      margin-bottom: 1.5rem;
+      color: white;
+    }
+
+    .about-subtitle {
+      font-size: 1.25rem;
+      line-height: 1.6;
+      max-width: 600px;
+      margin: 0 auto;
+      opacity: 0.9;
+    }
+
+    .social-proof-cta .cta-primary,
+    .social-proof-cta .cta-secondary {
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .creator-types {
+      grid-template-columns: 1fr;
+    }
+
+    .social-proof-section {
+      padding: 3rem 0;
+    }
+  }
+</style>

From e32c44fb46c5563f115b12f148e68c01bd678906 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 05:03:18 -0400
Subject: [PATCH 4/6] PageLayout and index pages using it

---
 src/layouts/BaseLayout.astro    |  24 +-
 src/layouts/LandingLayout.astro |  27 +-
 src/layouts/PageLayout.astro    | 346 ++++++++++++++++++
 src/pages/about/index.astro     | 449 +-----------------------
 src/pages/blog/index.astro      | 443 +-----------------------
 src/pages/newsletter.astro      |  37 ++
 src/pages/products/index.astro  | 466 +------------------------
 src/styles/base.css             | 597 +++++++++++++++++---------------
 8 files changed, 764 insertions(+), 1625 deletions(-)
 create mode 100644 src/layouts/PageLayout.astro
 create mode 100644 src/pages/newsletter.astro

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fb1760d..923f646 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -152,7 +152,18 @@ const finalStructuredData = structuredData || defaultStructuredData;
           <nav class="main-nav">
             <a href="/" class="logo">{siteName}</a>
             <div class="nav-links">
-              <!-- <a href="/blocks-demo" class="nav-link">Demo</a> -->
+              {
+                ["about", "blog", "products"].map((link) => {
+                  return (
+                    <a
+                      href={`/${link}`}
+                      class={`nav-link ${Astro.url.pathname?.includes(link) ? "current" : ""}`}
+                    >
+                      {link.charAt(0).toUpperCase() + link.slice(1)}
+                    </a>
+                  );
+                })
+              }
               <a
                 href="https://de.markket.place/auth/magic"
                 class="nav-button"
@@ -188,12 +199,7 @@ const finalStructuredData = structuredData || defaultStructuredData;
               <ul>
                 <li><a href="/">Home</a></li>
                 <li>
-                  <a
-                    href="https://github.com/calimania/markket-space"
-                    target="_blank"
-                  >
-                    GitHub
-                  </a>
+                  <a href="/newsletter">Newsletter</a>
                 </li>
               </ul>
             </div>
@@ -296,6 +302,10 @@ const finalStructuredData = structuredData || defaultStructuredData;
     margin-right: 16px;
   }
 
+  .nav-link.current {
+    color: var(--primary);
+  }
+
   .nav-link:hover {
     background: var(--bg-alt);
     color: var(--primary);
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
index 4ab1207..ab2cc6e 100644
--- a/src/layouts/LandingLayout.astro
+++ b/src/layouts/LandingLayout.astro
@@ -77,7 +77,18 @@ const {
           {storeName}
         </a>
         <div class="nav-links">
-          <a href="/about" class="nav-link">About</a>
+          {
+            ["about", "blog", "products"].map((link) => {
+              return (
+                <a
+                  href={`/${link}`}
+                  class={`nav-link ${Astro.url.pathname?.includes(link) ? "current" : ""}`}
+                >
+                  {link.charAt(0).toUpperCase() + link.slice(1)}
+                </a>
+              );
+            })
+          }
           <a
             href="https://de.markket.place/auth/magic"
             class="nav-button"
@@ -139,11 +150,15 @@ const {
       {
         store.Cover && (
           <div class="hero-image">
-            <img
-              src={(store.Cover as any).formats?.large?.url || store.Cover.url}
-              alt={store.Cover.alternativeText || "Store showcase"}
-              loading="eager"
-            />
+            <div class="img-frame">
+              <img
+                src={
+                  (store.Cover as any).formats?.large?.url || store.Cover.url
+                }
+                alt={store.Cover.alternativeText || "Store showcase"}
+                loading="eager"
+              />
+            </div>
           </div>
         )
       }
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
new file mode 100644
index 0000000..eead197
--- /dev/null
+++ b/src/layouts/PageLayout.astro
@@ -0,0 +1,346 @@
+---
+import "../styles/base.css";
+import BaseLayout from "./BaseLayout.astro";
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  heroTitle?: string;
+  heroSubtitle?: string;
+  heroImage?: string;
+  heroLqip?: string;
+  heroAspect?: string; // CSS aspect like "4/5" or "16/9"
+  heroVariant?: "spacious" | "compact";
+  heroCtaText?: string;
+  heroCtaUrl?: string;
+}
+
+// Use a single props object and local bindings to avoid literal type-narrowing in the
+// template (which can trigger the TS "no overlap" comparison diagnostic).
+const props = Astro.props as Props;
+const title = props.title ?? "";
+const description = props.description ?? "";
+const image = props.image ?? "";
+const heroTitle = props.heroTitle ?? title ?? "";
+const heroSubtitle = props.heroSubtitle ?? "";
+const heroImage = props.heroImage ?? image ?? "";
+const heroLqip = props.heroLqip ?? undefined;
+const heroAspect = props.heroAspect ?? "4/5";
+const heroVariant = (props.heroVariant ?? "spacious") as "spacious" | "compact";
+const heroCtaText = props.heroCtaText ?? undefined;
+const heroCtaUrl = props.heroCtaUrl ?? undefined;
+
+// Helper at runtime to pick the variant class (keeps TS happy)
+const isCompact = heroVariant === "compact";
+---
+
+<BaseLayout title={title} description={description} image={image}>
+  <main>
+    <!-- Named slot 'hero' allows pages to fully override the hero markup if needed -->
+    <slot name="hero">
+      {
+        heroTitle || heroSubtitle || heroImage ? (
+          <section
+            class={`page-hero ${isCompact ? "hero-compact" : "hero-spacious"}`}
+            aria-labelledby="page-hero-title"
+          >
+            <div class="page-hero-content">
+              <div class="hero-copy">
+                {heroTitle ? <h1 id="page-hero-title">{heroTitle}</h1> : null}
+                {heroSubtitle ? (
+                  <p class="about-subtitle">{heroSubtitle}</p>
+                ) : null}
+                {heroCtaText ? (
+                  <p class="hero-cta">
+                    <a class="cta-primary" href={heroCtaUrl || "#"}>
+                      {heroCtaText}
+                    </a>
+                  </p>
+                ) : null}
+              </div>
+
+              {heroImage ? (
+                <div class="hero-image">
+                  <div
+                    class="img-frame"
+                    style={`--aspect: ${heroAspect}; --lqip: ${heroLqip ? `url('${heroLqip}')` : "none"}`}
+                  >
+                    <img
+                      src={heroImage}
+                      alt={heroTitle || "Hero image"}
+                      onload="this.parentElement.classList.add('is-loaded')"
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </section>
+        ) : null
+      }
+    </slot>
+
+    <section class="slot-section">
+      <slot />
+    </section>
+  </main>
+</BaseLayout>
+
+<style>
+  /* Page layout + hero styles (uses theme vars from base.css) */
+  .page-hero {
+    padding: 3rem 0 1.75rem;
+    background: var(--bg-alt);
+    color: var(--text);
+  }
+
+  .page-hero-content {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 420px;
+    gap: 2rem;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .hero-copy h1 {
+    margin: 0 0 0.5rem 0;
+    line-height: 1.05;
+  }
+  .about-subtitle {
+    margin: 0.25rem 0 1rem 0;
+    color: var(--text-muted, rgba(0, 0, 0, 0.7));
+  }
+
+  .hero-cta .cta-primary {
+    display: inline-block;
+  }
+
+  /* framed image with blur-up (LQIP) support */
+  .hero-image .img-frame {
+    width: 100%;
+    aspect-ratio: var(--aspect, 4/5);
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-card, #f7f7f7);
+    background-image: var(--lqip, none);
+    background-size: cover;
+    background-position: center;
+    filter: blur(12px) saturate(0.95);
+    transition:
+      filter 320ms ease,
+      transform 320ms ease,
+      box-shadow 320ms ease;
+    transform-origin: center center;
+  }
+
+  .hero-image .img-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    opacity: 0;
+    transform: translateY(6px) scale(1.02);
+    transition:
+      opacity 320ms ease,
+      transform 320ms ease;
+  }
+
+  .hero-image .img-frame:hover {
+    transform: translateY(-6px) scale(1.01);
+    box-shadow:
+      0 28px 60px rgba(12, 22, 43, 0.12),
+      0 6px 20px rgba(0, 0, 0, 0.06);
+  }
+
+  /* when image loads, reveal the real image and remove the blur-up */
+  .hero-image .img-frame.is-loaded {
+    filter: none;
+    background-image: none;
+  }
+  .hero-image .img-frame.is-loaded img {
+    opacity: 1;
+    transform: none;
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text);
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+  }
+  :global(.page-content p) {
+    margin-bottom: 1.25rem;
+  }
+
+  /* Buttons */
+
+  .page-hero {
+    padding: 3rem 0 1.75rem;
+    background: var(--bg-alt);
+    color: var(--text);
+  }
+
+  .page-hero-content {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 420px;
+    gap: 2rem;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .hero-copy h1 {
+    margin: 0 0 0.5rem 0;
+    line-height: 1.05;
+  }
+  .about-subtitle {
+    margin: 0.25rem 0 1rem 0;
+    color: var(--text-muted, rgba(0, 0, 0, 0.7));
+  }
+
+  .hero-cta .cta-primary {
+    display: inline-block;
+  }
+
+  /* framed image with blur-up (LQIP) support */
+  .hero-image .img-frame {
+    width: 100%;
+    aspect-ratio: var(--aspect, 4/5);
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-card, #f7f7f7);
+    background-image: var(--lqip, none);
+    background-size: cover;
+    background-position: center;
+    filter: blur(12px) saturate(0.95);
+    transition:
+      filter 320ms ease,
+      transform 320ms ease,
+      box-shadow 320ms ease;
+    transform-origin: center center;
+  }
+
+  .hero-image .img-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    opacity: 0;
+    transform: translateY(6px) scale(1.02);
+    transition:
+      opacity 320ms ease,
+      transform 320ms ease;
+  }
+
+  .hero-image .img-frame:hover {
+    transform: translateY(-6px) scale(1.01);
+    box-shadow:
+      0 28px 60px rgba(12, 22, 43, 0.12),
+      0 6px 20px rgba(0, 0, 0, 0.06);
+  }
+
+  /* when image loads, reveal the real image and remove the blur-up */
+  .hero-image .img-frame.is-loaded {
+    filter: none;
+    background-image: none;
+  }
+  .hero-image .img-frame.is-loaded img {
+    opacity: 1;
+    transform: none;
+  }
+
+  .slot-section {
+    padding: 2.25rem 0 3.5rem;
+    background: var(--bg);
+  }
+
+  :global(.page-content) {
+    max-width: 900px;
+    margin: 0 auto;
+    background: var(--bg);
+    padding: 1.25rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border-light);
+    color: var(--text);
+    line-height: 1.7;
+  }
+
+  :global(.page-content h1),
+  :global(.page-content h2),
+  :global(.page-content h3) {
+    color: var(--text);
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+  }
+  :global(.page-content p) {
+    margin-bottom: 1.25rem;
+  }
+
+  /* Buttons */
+  .cta-primary {
+    background: var(--primary);
+    color: var(--text-on-primary);
+    padding: 0.6rem 1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 700;
+  }
+  .cta-secondary {
+    background: transparent;
+    color: var(--primary);
+    padding: 0.5rem 0.9rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-light);
+  }
+
+  /* Responsive tweaks */
+  @media (max-width: 900px) {
+    .page-hero .page-hero-content {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+    .hero-image img {
+      max-width: 100%;
+    }
+    :global(.page-content) {
+      padding: 1rem;
+    }
+  }
+
+  /* Hero layout variants */
+  .page-hero.hero-spacious {
+    padding: 3.5rem 0 2.25rem;
+  }
+  .page-hero.hero-compact {
+    padding: 1.5rem 0 1rem;
+  }
+  .page-hero.hero-spacious .page-hero-content {
+    gap: 1.5rem;
+  }
+  .page-hero.hero-compact .page-hero-content {
+    gap: 1rem;
+    align-items: start;
+  }
+  .page-hero.hero-spacious h1 {
+    font-size: clamp(2rem, 4vw, 3rem);
+  }
+  .page-hero.hero-compact h1 {
+    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+  }
+  .page-hero.hero-spacious .about-subtitle {
+    font-size: 1.125rem;
+  }
+  .page-hero.hero-compact .about-subtitle {
+    font-size: 1rem;
+    opacity: 0.95;
+  }
+  .page-hero.hero-compact .hero-cta .cta-primary {
+    padding: 0.5rem 0.85rem;
+    font-size: 0.95rem;
+  }
+</style>
diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro
index 30a61e7..92a6d96 100644
--- a/src/pages/about/index.astro
+++ b/src/pages/about/index.astro
@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import PageLayout from "../../layouts/PageLayout.astro";
 import BlocksContent from "../../components/BlocksContent.astro";
 
 const pages = await getCollection("pages");
@@ -8,60 +8,25 @@ const page = pages.find((p) => p.data.slug == "about")?.data;
 
 const storeData = await getCollection("store");
 const store = storeData[0]?.data || {};
-const storeName = store.title || "Markkët Space";
 const storeCover = store.Cover;
 ---
 
-<BaseLayout
+<PageLayout
   title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
   description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
   image={page?.SEO?.socialImage?.formats?.large?.url ||
     page?.SEO?.socialImage?.url ||
     storeCover?.url}
+  heroTitle={page?.Title || "About Markkët Space"}
+  heroSubtitle={page?.SEO?.metaDescription ||
+    "We're building the future of creator commerce - a platform that puts artists, designers, and content creators first."}
+  heroImage={page?.SEO?.socialImage?.url || storeCover?.url}
+  heroLqip={page?.SEO?.socialImage?.formats?.small?.url}
+  heroAspect={page?.SEO?.meta?.heroAspect || "4/5"}
+  heroVariant={page?.SEO?.meta?.heroVariant || "spacious"}
+  heroCtaText="Start Your Store Free"
+  heroCtaUrl="https://de.markket.place/auth/magic"
 >
-  <header class="page-header" slot="header">
-    <div class="container">
-      <nav class="main-nav">
-        <a href="/" class="logo">{storeName}</a>
-        <div class="nav-links">
-          <a href="/" class="nav-link">Home</a>
-          <a href="/about" class="nav-link active">About</a>
-          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
-          <a
-            href="https://de.markket.place/auth/magic"
-            class="nav-button"
-            target="_blank"
-          >
-            Get Started
-          </a>
-        </div>
-      </nav>
-    </div>
-  </header>
-    <!-- About Hero Section -->
-  <section class="about-hero">
-    <div class="container">
-      <div class="about-hero-content">
-        <div class="hero-text">
-          <h1>{page?.Title || "About Markkët Space"}</h1>
-          <p class="about-subtitle">
-            {page?.SEO?.metaDescription || "We're building the future of creator commerce - a platform that puts artists, designers, and content creators first."}
-          </p>
-        </div>
-        {page?.SEO?.socialImage?.url && (
-          <div class="hero-image">
-            <img
-              src={page.SEO.socialImage.url}
-              alt={page.Title || "About Markkët Space"}
-              loading="eager"
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  </section>
-
-  <!-- Page Content from Strapi -->
   {
     page?.Content && page.Content.length > 0 && (
       <section class="page-content-section">
@@ -71,394 +36,4 @@ const storeCover = store.Cover;
       </section>
     )
   }
-</BaseLayout>
-
-<style>
-  /* Page Header */
-  .page-header {
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-
-  .logo:hover {
-    color: var(--primary);
-  }
-
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .nav-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-    position: relative;
-  }
-
-  .nav-link:hover,
-  .nav-link.active {
-    color: var(--primary);
-  }
-
-  .nav-link.active::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--primary);
-    border-radius: 1px;
-  }
-
-  .nav-button {
-    background: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-decoration: none;
-    font-weight: 500;
-    transition: background 0.3s ease;
-  }
-
-  .nav-button:hover {
-    background: var(--primary-dark);
-  }
-
-  /* About Hero Section */
-  .about-hero {
-    padding: 6rem 0 4rem;
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    color: white;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .about-hero::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-  }
-
-  .about-hero-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-  }
-
-  .hero-text h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    color: white;
-    line-height: 1.1;
-  }
-
-  .about-subtitle {
-    font-size: 1.25rem;
-    line-height: 1.6;
-    opacity: 0.9;
-    margin-bottom: 0;
-  }
-
-  .hero-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .hero-image img {
-    width: 100%;
-    max-width: 400px;
-    height: 300px;
-    object-fit: cover;
-    border-radius: 1.5rem;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease;
-  }
-
-  .hero-image img:hover {
-    transform: translateY(-5px) scale(1.02);
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  :global(.page-content) {
-    padding: 2rem;
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text);
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-  }
-
-  :global(.page-content p) {
-    margin-bottom: 1.5rem;
-    line-height: 1.7;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .about-hero-content {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-      text-align: center;
-    }
-
-    .hero-text h1 {
-      font-size: 2.5rem;
-    }
-
-    .about-subtitle {
-      font-size: 1.125rem;
-    }
-
-    .hero-image img {
-      max-width: 300px;
-      height: 225px;
-    }
-
-    .nav-links {
-      gap: 1rem;
-    }
-
-    .nav-link {
-      font-size: 0.9rem;
-    }
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  .page-content-section .container {
-    max-width: 900px;
-  }
-
-  .nav-link {
-    margin-right: 16px;
-  }
-
-  :global(.page-content) {
-    background: var(--bg);
-    padding: 3rem;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--border-light);
-    color: var(--text);
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content p) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content a) {
-    color: var(--primary) !important;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .features-section {
-      padding: 4rem 0;
-    }
-
-    .features-grid {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-
-    .feature-card {
-      padding: 2rem 1.5rem;
-    }
-
-    .feature-icon {
-      width: 60px;
-      height: 60px;
-    }
-
-    .creator-types {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .creator-type {
-      padding: 1rem;
-    }
-
-    .creator-type .creator-icon {
-      width: 40px;
-      height: 40px;
-    }
-
-    :global(.page-content) {
-      padding: 2rem;
-    }
-
-  /* Page Header */
-  .page-header {
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-  }
-
-  .logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-
-  .logo:hover {
-    color: var(--primary);
-  }
-
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .nav-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-    position: relative;
-  }
-
-  .nav-link:hover,
-  .nav-link.active {
-    color: var(--primary);
-  }
-
-  .nav-link.active::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--primary);
-    border-radius: 1px;
-  }
-
-  .nav-button {
-    background: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-decoration: none;
-    font-weight: 500;
-    transition: background 0.3s ease;
-  }
-
-  .nav-button:hover {
-    background: var(--primary-dark);
-  }
-
-  /* About Hero Section */
-  .about-hero {
-    padding: 6rem 0 4rem;
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    color: white;
-    text-align: center;
-  }
-
-  .about-hero-content h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    color: white;
-  }
-
-  .about-subtitle {
-    font-size: 1.25rem;
-    line-height: 1.6;
-    max-width: 600px;
-    margin: 0 auto;
-    opacity: 0.9;
-  }
-
-    .social-proof-cta .cta-primary,
-    .social-proof-cta .cta-secondary {
-      justify-content: center;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .creator-types {
-      grid-template-columns: 1fr;
-    }
-
-    .social-proof-section {
-      padding: 3rem 0;
-    }
-  }
-</style>
+</PageLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index fb06261..bf1d60f 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import PageLayout from "../../layouts/PageLayout.astro";
 import BlocksContent from "../../components/BlocksContent.astro";
 
 const pages = await getCollection("pages");
@@ -8,57 +8,23 @@ const page = pages.find((p) => p.data.slug == "blog")?.data;
 
 const storeData = await getCollection("store");
 const store = storeData[0]?.data || {};
-const storeName = store.title || "Markkët Blog";
 const storeCover = store.Cover;
 ---
 
-<BaseLayout
+<PageLayout
   title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
   description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
   image={page?.SEO?.socialImage?.formats?.large?.url ||
     page?.SEO?.socialImage?.url ||
     storeCover?.url}
+  heroTitle={page?.Title || "Markkët Space Blog"}
+  heroSubtitle={page?.SEO?.metaDescription ||
+    "Articles and updates for the seller community."}
+  heroImage={page?.SEO?.socialImage?.url || storeCover?.url}
+  heroLqip={page?.SEO?.socialImage?.formats?.small?.url}
+  heroAspect={page?.SEO?.meta?.heroAspect || "4/5"}
+  heroVariant={page?.SEO?.meta?.heroVariant || "spacious"}
 >
-  <header class="page-header" slot="header">
-    <div class="container">
-      <nav class="main-nav">
-        <a href="/" class="logo">{storeName}</a>
-        <div class="nav-links">
-          <a href="/" class="nav-link">Home</a>
-          <a href="/about" class="nav-link active">About</a>
-          <a href="https://github.com/calimania/markket-space" class="nav-link" target="_blank">GitHub</a>
-          <a
-            href="https://de.markket.place/auth/magic"
-            class="nav-button"
-            target="_blank"
-          >
-            Get Started
-          </a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  <section class="blog-hero">
-    <div class="container">
-      <div class="blog-hero-content">
-        <div class="hero-text">
-          <h1>{page?.Title || "Markkët Space Blog"}</h1>
-          <p class="about-subtitle">
-            {page?.SEO?.metaDescription || "Articles and updates for the seller community."}
-          </p>
-        </div>
-        {page?.SEO?.socialImage?.url && (
-          <div class="hero-image">
-            <img
-              src={page.SEO.socialImage.url}
-              alt={page.Title || "Markkët Space Blog"}
-              loading="eager"
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  </section>
   {
     page?.Content && page.Content.length > 0 && (
       <section class="page-content-section">
@@ -68,393 +34,4 @@ const storeCover = store.Cover;
       </section>
     )
   }
-</BaseLayout>
-<style>
-  /* Page Header */
-  .page-header {
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-
-  .logo:hover {
-    color: var(--primary);
-  }
-
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .nav-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-    position: relative;
-  }
-
-  .nav-link:hover,
-  .nav-link.active {
-    color: var(--primary);
-  }
-
-  .nav-link.active::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--primary);
-    border-radius: 1px;
-  }
-
-  .nav-button {
-    background: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-decoration: none;
-    font-weight: 500;
-    transition: background 0.3s ease;
-  }
-
-  .nav-button:hover {
-    background: var(--primary-dark);
-  }
-
-  /* About Hero Section */
-  .blog-hero {
-    padding: 6rem 0 4rem;
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    color: white;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .blog-hero::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-  }
-
-  .blog-hero-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-  }
-
-  .hero-text h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    color: white;
-    line-height: 1.1;
-  }
-
-  .about-subtitle {
-    font-size: 1.25rem;
-    line-height: 1.6;
-    opacity: 0.9;
-    margin-bottom: 0;
-  }
-
-  .hero-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .hero-image img {
-    width: 100%;
-    max-width: 400px;
-    height: 300px;
-    object-fit: cover;
-    border-radius: 1.5rem;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease;
-  }
-
-  .hero-image img:hover {
-    transform: translateY(-5px) scale(1.02);
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  :global(.page-content) {
-    padding: 2rem;
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text);
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-  }
-
-  :global(.page-content p) {
-    margin-bottom: 1.5rem;
-    line-height: 1.7;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .blog-hero-content {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-      text-align: center;
-    }
-
-    .hero-text h1 {
-      font-size: 2.5rem;
-    }
-
-    .about-subtitle {
-      font-size: 1.125rem;
-    }
-
-    .hero-image img {
-      max-width: 300px;
-      height: 225px;
-    }
-
-    .nav-links {
-      gap: 1rem;
-    }
-
-    .nav-link {
-      font-size: 0.9rem;
-    }
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  .page-content-section .container {
-    max-width: 900px;
-  }
-
-  .nav-link {
-    margin-right: 16px;
-  }
-
-  :global(.page-content) {
-    background: var(--bg);
-    padding: 3rem;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--border-light);
-    color: var(--text);
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content p) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content a) {
-    color: var(--primary) !important;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .features-section {
-      padding: 4rem 0;
-    }
-
-    .features-grid {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-
-    .feature-card {
-      padding: 2rem 1.5rem;
-    }
-
-    .feature-icon {
-      width: 60px;
-      height: 60px;
-    }
-
-    .creator-types {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .creator-type {
-      padding: 1rem;
-    }
-
-    .creator-type .creator-icon {
-      width: 40px;
-      height: 40px;
-    }
-
-    :global(.page-content) {
-      padding: 2rem;
-    }
-
-  /* Page Header */
-  .page-header {
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-  }
-
-  .logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-
-  .logo:hover {
-    color: var(--primary);
-  }
-
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .nav-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-    position: relative;
-  }
-
-  .nav-link:hover,
-  .nav-link.active {
-    color: var(--primary);
-  }
-
-  .nav-link.active::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--primary);
-    border-radius: 1px;
-  }
-
-  .nav-button {
-    background: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-decoration: none;
-    font-weight: 500;
-    transition: background 0.3s ease;
-  }
-
-  .nav-button:hover {
-    background: var(--primary-dark);
-  }
-
-  /* About Hero Section */
-  .blog-hero {
-    padding: 6rem 0 4rem;
-    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    color: white;
-    text-align: center;
-  }
-
-  .blog-hero-content h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    color: white;
-  }
-
-  .about-subtitle {
-    font-size: 1.25rem;
-    line-height: 1.6;
-    max-width: 600px;
-    margin: 0 auto;
-    opacity: 0.9;
-  }
-
-    .social-proof-cta .cta-primary,
-    .social-proof-cta .cta-secondary {
-      justify-content: center;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .creator-types {
-      grid-template-columns: 1fr;
-    }
-
-    .social-proof-section {
-      padding: 3rem 0;
-    }
-  }
-</style>
+</PageLayout>
diff --git a/src/pages/newsletter.astro b/src/pages/newsletter.astro
new file mode 100644
index 0000000..ff93018
--- /dev/null
+++ b/src/pages/newsletter.astro
@@ -0,0 +1,37 @@
+---
+import { getCollection } from "astro:content";
+import PageLayout from "../layouts/PageLayout.astro";
+import BlocksContent from "../components/BlocksContent.astro";
+
+const pages = await getCollection("pages");
+const page = pages.find((p) => p.data.slug == "newsletter")?.data;
+
+const storeData = await getCollection("store");
+const store = storeData[0]?.data || {};
+const storeCover = store.Cover;
+---
+
+<PageLayout
+  title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
+  description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
+  image={page?.SEO?.socialImage?.formats?.large?.url ||
+    page?.SEO?.socialImage?.url ||
+    storeCover?.url}
+  heroTitle={page?.Title || "Space Newsletter"}
+  heroSubtitle={page?.SEO?.metaDescription ||
+    "Sign up for email updates."}
+  heroImage={page?.SEO?.socialImage?.url || storeCover?.url}
+  heroLqip={page?.SEO?.socialImage?.formats?.small?.url}
+  heroAspect={page?.SEO?.meta?.heroAspect || "4/5"}
+  heroVariant={page?.SEO?.meta?.heroVariant || "spacious"}
+>
+  {
+    page?.Content && page.Content.length > 0 && (
+      <section class="page-content-section">
+        <div class="container">
+          <BlocksContent content={page.Content} className="page-content" />
+        </div>
+      </section>
+    )
+  }
+</PageLayout>
diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
index e824c59..c98b7f1 100644
--- a/src/pages/products/index.astro
+++ b/src/pages/products/index.astro
@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import PageLayout from "../../layouts/PageLayout.astro";
 import BlocksContent from "../../components/BlocksContent.astro";
 
 const pages = await getCollection("pages");
@@ -8,68 +8,23 @@ const page = pages.find((p) => p.data.slug == "products")?.data;
 
 const storeData = await getCollection("store");
 const store = storeData[0]?.data || {};
-const storeName = store.title || "Markkët Products";
 const storeCover = store.Cover;
 ---
 
-<BaseLayout
+<PageLayout
   title={page?.SEO?.metaTitle || store.SEO?.metaTitle}
   description={page?.SEO?.metaDescription || store.SEO?.metaDescription}
   image={page?.SEO?.socialImage?.formats?.large?.url ||
     page?.SEO?.socialImage?.url ||
     storeCover?.url}
+  heroTitle={page?.Title || "Products"}
+  heroSubtitle={page?.SEO?.metaDescription ||
+    "Browse products and templates from creators."}
+  heroImage={page?.SEO?.socialImage?.url || storeCover?.url}
+  heroLqip={page?.SEO?.socialImage?.formats?.small?.url}
+  heroAspect={page?.SEO?.meta?.heroAspect || "4/5"}
+  heroVariant={page?.SEO?.meta?.heroVariant || "spacious"}
 >
-  <header class="page-header" slot="header">
-    <div class="container">
-      <nav class="main-nav">
-        <a href="/" class="logo">{storeName}</a>
-        <div class="nav-links">
-          <a href="/" class="nav-link">Home</a>
-          <a href="/about" class="nav-link active">About</a>
-          <a
-            href="https://github.com/calimania/markket-space"
-            class="nav-link"
-            target="_blank"
-          >
-            GitHub
-          </a>
-          <a
-            href="https://de.markket.place/auth/magic"
-            class="nav-button"
-            target="_blank"
-          >
-            Get Started
-          </a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  <section class="products-hero">
-    <div class="container">
-      <div class="products-hero-content">
-        <div class="hero-text">
-          <h1>{page?.Title || "Markkët Space Blog"}</h1>
-          <p class="about-subtitle">
-            {
-              page?.SEO?.metaDescription ||
-                "Articles and updates for the seller community."
-            }
-          </p>
-        </div>
-        {
-          page?.SEO?.socialImage?.url && (
-            <div class="hero-image">
-              <img
-                src={page.SEO.socialImage.url}
-                alt={page.Title || "Markkët Space Products"}
-                loading="eager"
-              />
-            </div>
-          )
-        }
-      </div>
-    </div>
-  </section>
   {
     page?.Content && page.Content.length > 0 && (
       <section class="page-content-section">
@@ -79,405 +34,4 @@ const storeCover = store.Cover;
       </section>
     )
   }
-</BaseLayout>
-<style>
-  /* Page Header */
-  .page-header {
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-
-  .main-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 0;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    transition: color 0.3s ease;
-  }
-
-  .logo:hover {
-    color: var(--primary);
-  }
-
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .nav-link {
-    color: var(--text);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s ease;
-    position: relative;
-  }
-
-  .nav-link:hover,
-  .nav-link.active {
-    color: var(--primary);
-  }
-
-  .nav-link.active::after {
-    content: "";
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: var(--primary);
-    border-radius: 1px;
-  }
-
-  .nav-button {
-    background: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-decoration: none;
-    font-weight: 500;
-    transition: background 0.3s ease;
-  }
-
-  .nav-button:hover {
-    background: var(--primary-dark);
-  }
-
-  /* About Hero Section */
-  .products-hero {
-    padding: 6rem 0 4rem;
-    background: linear-gradient(
-      135deg,
-      var(--primary) 0%,
-      var(--secondary) 100%
-    );
-    color: white;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .products-hero::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(
-      circle at 70% 30%,
-      rgba(255, 255, 255, 0.1) 0%,
-      transparent 50%
-    );
-    pointer-events: none;
-  }
-
-  .products-hero-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-  }
-
-  .hero-text h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    color: white;
-    line-height: 1.1;
-  }
-
-  .about-subtitle {
-    font-size: 1.25rem;
-    line-height: 1.6;
-    opacity: 0.9;
-    margin-bottom: 0;
-  }
-
-  .hero-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .hero-image img {
-    width: 100%;
-    max-width: 400px;
-    height: 300px;
-    object-fit: cover;
-    border-radius: 1.5rem;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease;
-  }
-
-  .hero-image img:hover {
-    transform: translateY(-5px) scale(1.02);
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  :global(.page-content) {
-    padding: 2rem;
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text);
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-  }
-
-  :global(.page-content p) {
-    margin-bottom: 1.5rem;
-    line-height: 1.7;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .products-hero-content {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-      text-align: center;
-    }
-
-    .hero-text h1 {
-      font-size: 2.5rem;
-    }
-
-    .about-subtitle {
-      font-size: 1.125rem;
-    }
-
-    .hero-image img {
-      max-width: 300px;
-      height: 225px;
-    }
-
-    .nav-links {
-      gap: 1rem;
-    }
-
-    .nav-link {
-      font-size: 0.9rem;
-    }
-  }
-
-  /* Page Content Section */
-  .page-content-section {
-    padding: 4rem 0;
-    background: var(--bg);
-  }
-
-  .page-content-section .container {
-    max-width: 800px;
-  }
-
-  .page-content-section .container {
-    max-width: 900px;
-  }
-
-  .nav-link {
-    margin-right: 16px;
-  }
-
-  :global(.page-content) {
-    background: var(--bg);
-    padding: 3rem;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--border-light);
-    color: var(--text);
-  }
-
-  :global(.page-content h1),
-  :global(.page-content h2),
-  :global(.page-content h3) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content p) {
-    color: var(--text) !important;
-  }
-
-  :global(.page-content a) {
-    color: var(--primary) !important;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .features-section {
-      padding: 4rem 0;
-    }
-
-    .features-grid {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-
-    .feature-card {
-      padding: 2rem 1.5rem;
-    }
-
-    .feature-icon {
-      width: 60px;
-      height: 60px;
-    }
-
-    .creator-types {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .creator-type {
-      padding: 1rem;
-    }
-
-    .creator-type .creator-icon {
-      width: 40px;
-      height: 40px;
-    }
-
-    :global(.page-content) {
-      padding: 2rem;
-    }
-
-    /* Page Header */
-    .page-header {
-      background: rgba(255, 255, 255, 0.98);
-      backdrop-filter: blur(20px);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .main-nav {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem 0;
-    }
-
-    .logo {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--text);
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-
-    .logo:hover {
-      color: var(--primary);
-    }
-
-    .nav-links {
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-    }
-
-    .nav-link {
-      color: var(--text);
-      text-decoration: none;
-      font-weight: 500;
-      transition: color 0.3s ease;
-      position: relative;
-    }
-
-    .nav-link:hover,
-    .nav-link.active {
-      color: var(--primary);
-    }
-
-    .nav-link.active::after {
-      content: "";
-      position: absolute;
-      bottom: -5px;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background: var(--primary);
-      border-radius: 1px;
-    }
-
-    .nav-button {
-      background: var(--primary);
-      color: white;
-      padding: 0.75rem 1.5rem;
-      border-radius: 0.5rem;
-      text-decoration: none;
-      font-weight: 500;
-      transition: background 0.3s ease;
-    }
-
-    .nav-button:hover {
-      background: var(--primary-dark);
-    }
-
-    /* About Hero Section */
-    .products-hero {
-      padding: 6rem 0 4rem;
-      background: linear-gradient(
-        135deg,
-        var(--primary) 0%,
-        var(--secondary) 100%
-      );
-      color: white;
-      text-align: center;
-    }
-
-    .products-hero-content h1 {
-      font-size: 3rem;
-      font-weight: 800;
-      margin-bottom: 1.5rem;
-      color: white;
-    }
-
-    .about-subtitle {
-      font-size: 1.25rem;
-      line-height: 1.6;
-      max-width: 600px;
-      margin: 0 auto;
-      opacity: 0.9;
-    }
-
-    .social-proof-cta .cta-primary,
-    .social-proof-cta .cta-secondary {
-      justify-content: center;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .creator-types {
-      grid-template-columns: 1fr;
-    }
-
-    .social-proof-section {
-      padding: 3rem 0;
-    }
-  }
-</style>
+</PageLayout>
diff --git a/src/styles/base.css b/src/styles/base.css
index 34b75e1..40db113 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,288 +1,313 @@
-   @import "tailwindcss";
-
-   /* Reset and Base Styles */
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      :root {
-        /* Brand Colors - Vibrant and artistic */
-          --primary: #E4007C;
-          --primary-dark: #e400d7;
-          --primary-light: #ffb3d1;
-          --secondary: #4f46e5;
-          --secondary-dark: #3730a3;
-          --accent: #06d6a0;
-          --accent-dark: #048a61;
-        
-          /* Text Colors - High contrast for readability */
-          --text: #1a1a1a;
-          --text-light: #ffffff;
-          --text-muted: #64748b;
-          --text-on-primary: #ffffff;
-        
-          /* Background Colors */
-        --bg: #ffffff;
-        --bg-alt: #f8fafc;
-          --bg-dark: #0f172a;
-          --bg-gradient: linear-gradient(135deg, #ff6b9d 0%, #4f46e5 100%);
-        
-          /* UI Elements */
-          --border: #e2e8f0;
-          --border-light: #f1f5f9;
-        --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-          --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-        
-          /* Radius */
-          --radius: 0.75rem;
-          --radius-lg: 1rem;
-      }
-
-      body {
-        font-family:
-          "Inter",
-          -apple-system,
-          BlinkMacSystemFont,
-          sans-serif;
-        line-height: 1.6;
-        color: var(--text);
-        background: var(--bg);
-      }
-
-      .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 1rem;
-      }
-
-      /* Header */
-      header {
-        background: var(--bg);
-        border-bottom: 1px solid var(--border);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-        backdrop-filter: blur(10px);
-      }
-
-      nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 0;
-      }
-
-      .logo {
-        font-size: 1.5rem;
-        font-weight: 800;
-        color: var(--primary);
-        text-decoration: none;
-      }
-
-      .nav-button {
-        background: var(--primary);
-        color: white;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 0.5rem;
-        font-weight: 600;
-        text-decoration: none;
-        transition: background 0.2s;
-        cursor: pointer;
-      }
-
-      .nav-button:hover {
-        background: var(--primary-dark);
-      }
-
-      /* Hero Section */
-      .hero {
-        padding: 4rem 0 6rem;
-        text-align: center;
-        background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
-      }
-
-      .hero h1 {
-        font-size: 3.5rem;
-        font-weight: 800;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, var(--primary), var(--secondary));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-      }
-
-      .hero-subtitle {
-        font-size: 1.25rem;
-        color: var(--text-muted);
-        margin-bottom: 2rem;
-        max-width: 600px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .cta-primary {
-        background: var(--primary);
-        color: white;
-        padding: 1rem 2rem;
-        border-radius: 0.75rem;
-        font-size: 1.125rem;
-        font-weight: 600;
-        text-decoration: none;
-        display: inline-block;
-        transition: all 0.2s;
-        box-shadow: var(--shadow);
-      }
-
-      .cta-primary:hover {
-        background: var(--primary-dark);
-        transform: translateY(-2px);
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* Features Section */
-      .features {
-        padding: 4rem 0;
-        background: var(--bg);
-      }
-
-      .features h2 {
-        text-align: center;
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 3rem;
-      }
-
-      .features-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 2rem;
-      }
-
-      .feature-card {
-        background: var(--bg-alt);
-        padding: 2rem;
-        border-radius: 1rem;
-        text-align: center;
-        border: 1px solid var(--border);
-        transition: transform 0.2s;
-      }
-
-      .feature-card:hover {
-        transform: translateY(-4px);
-      }
-
-      .feature-icon {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-      }
-
-      .feature-card h3 {
-        font-size: 1.5rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-      }
-
-      .feature-card p {
-        color: var(--text-muted);
-      }
-
-      /* Store Info Section */
-      .store-info {
-        padding: 4rem 0;
-        background: var(--bg-alt);
-      }
-
-      .store-content {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 3rem;
-        align-items: center;
-      }
-
-      .store-details h2 {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-      }
-
-      .store-details p {
-        font-size: 1.125rem;
-        color: var(--text-muted);
-        margin-bottom: 2rem;
-      }
-
-      .store-image {
-        text-align: center;
-      }
-
-      .store-image img {
-        width: 100%;
-        max-width: 400px;
-        height: 300px;
-        object-fit: cover;
-        border-radius: 1rem;
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* CTA Section */
-      .cta-section {
-        padding: 4rem 0;
-        background: var(--primary);
-        color: white;
-        text-align: center;
-      }
-
-      .cta-section h2 {
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-      }
-
-      .cta-section p {
-        font-size: 1.25rem;
-        margin-bottom: 2rem;
-        opacity: 0.9;
-      }
-
-      .cta-secondary {
-        background: white;
-        color: var(--primary);
-        padding: 1rem 2rem;
-        border-radius: 0.75rem;
-        font-size: 1.125rem;
-        font-weight: 600;
-        text-decoration: none;
-        display: inline-block;
-        transition: all 0.2s;
-      }
-
-      .cta-secondary:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--shadow-lg);
-      }
-
-      /* Footer */
-      footer {
-        background: var(--text);
-        color: white;
-        padding: 2rem 0;
-        text-align: center;
-      }
-
-      footer p {
-        margin-bottom: 0.5rem;
-        opacity: 0.8;
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        .hero h1 {
-          font-size: 2.5rem;
-        }
+@import "tailwindcss";
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Brand Colors - Vibrant and artistic */
+  --primary: #E4007C;
+  --primary-dark: #e400d7;
+  --primary-light: #ffb3d1;
+  --secondary: #4f46e5;
+  --secondary-dark: #3730a3;
+  --accent: #06d6a0;
+  --accent-dark: #048a61;
+
+  /* Text Colors - High contrast for readability */
+    --text: #1a1a1a;
+    --text-light: #ffffff;
+    --text-muted: #64748b;
+    --text-on-primary: #ffffff;
+
+  /* Background Colors */
+    --bg: #ffffff;
+    --bg-alt: #f8fafc;
+    --bg-dark: #0f172a;
+    --bg-gradient: linear-gradient(135deg, #ff6b9d 0%, #4f46e5 100%);
+
+  /* UI Elements */
+    --border: #e2e8f0;
+    --border-light: #f1f5f9;
+    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Radius */
+    --radius: 0.75rem;
+    --radius-lg: 1rem;
+  }
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.6;
+    color: var(--text);
+    background: var(--bg);
+  }
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Header */
+header {
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+/* Global nav helpers - used by PageLayout and other layouts */
+.main-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.nav-link {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.landing-header .nav-link {
+  color: black;
+}
+
+.nav-link:hover {
+  color: var(--primary);
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.nav-button {
+  background: var(--primary);
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+
+.nav-button:hover {
+  background: var(--primary-dark);
+}
+
+/* Hero Section */
+.hero {
+  padding: 4rem 0 6rem;
+  text-align: center;
+  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  color: var(--text-muted);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cta-primary {
+  background: var(--primary);
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.2s;
+  box-shadow: var(--shadow);
+}
+
+.cta-primary:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Features Section */
+.features {
+  padding: 4rem 0;
+  background: var(--bg);
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 3rem;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.feature-card {
+  background: var(--bg-alt);
+  padding: 2rem;
+  border-radius: 1rem;
+  text-align: center;
+  border: 1px solid var(--border);
+  transition: transform 0.2s;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+}
+
+.feature-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.feature-card p {
+  color: var(--text-muted);
+}
+
+/* Store Info Section */
+.store-info {
+  padding: 4rem 0;
+  background: var(--bg-alt);
+}
+
+.store-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.store-details h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.store-details p {
+  font-size: 1.125rem;
+  color: var(--text-muted);
+  margin-bottom: 2rem;
+}
+
+.store-image {
+  text-align: center;
+}
+
+.store-image img {
+  width: 100%;
+  max-width: 400px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 1rem;
+  box-shadow: var(--shadow-lg);
+}
+
+/* CTA Section */
+.cta-section {
+  padding: 4rem 0;
+  background: var(--primary);
+  color: white;
+  text-align: center;
+}
+
+.cta-section h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.cta-section p {
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.cta-secondary {
+  background: white;
+  color: var(--primary);
+  padding: 1rem 2rem;
+  border-radius: 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.2s;
+}
+
+.cta-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Footer */
+footer {
+  background: var(--text);
+  color: white;
+  padding: 2rem 0;
+  text-align: center;
+}
+
+footer p {
+  margin-bottom: 0.5rem;
+  opacity: 0.8;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 2.5rem;
+  }
 
         .hero-subtitle {
           font-size: 1.125rem;
@@ -303,4 +328,4 @@
           flex-direction: column;
           gap: 1rem;
         }
-      }
\ No newline at end of file
+        }

From 637e7f7de0406d23ad9ec77e502e968200e516c7 Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 11:51:37 -0400
Subject: [PATCH 5/6] installed sitemap plugin & subscribe form component

---
 astro.config.mjs                  |   6 +-
 package-lock.json                 |  57 ++++++++++++++
 package.json                      |   1 +
 public/robots.txt                 |   5 ++
 src/components/subscribe-form.tsx | 125 ++++++++++++++++++++++++++++++
 src/content/config.ts             |   4 +
 src/layouts/BaseLayout.astro      |   1 +
 7 files changed, 197 insertions(+), 2 deletions(-)
 create mode 100644 public/robots.txt
 create mode 100644 src/components/subscribe-form.tsx

diff --git a/astro.config.mjs b/astro.config.mjs
index 0daaf65..4d5273f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,10 +3,12 @@ import { defineConfig } from 'astro/config';
 import tailwindcss from "@tailwindcss/vite";
 import react from '@astrojs/react';
 
+import sitemap from '@astrojs/sitemap';
+
 export default defineConfig({
   site: 'https://sell.markket.place',
-  integrations: [react()],
+  integrations: [react(), sitemap()],
   vite: {
     plugins: [tailwindcss()],
   },
-});
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 222b04a..2ff4312 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/react": "^4.4.0",
+        "@astrojs/sitemap": "^3.6.0",
         "@tabler/icons-react": "^3.35.0",
         "@tailwindcss/vite": "^4.1.13",
         "astro": "^5.13.9",
@@ -87,6 +88,16 @@
         "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@astrojs/sitemap": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.6.0.tgz",
+      "integrity": "sha512-4aHkvcOZBWJigRmMIAJwRQXBS+ayoP5z40OklTXYXhUDhwusz+DyDl+nSshY6y9DvkVEavwNcFO8FD81iGhXjg==",
+      "dependencies": {
+        "sitemap": "^8.0.0",
+        "stream-replace-string": "^2.0.0",
+        "zod": "^3.25.76"
+      }
+    },
     "node_modules/@astrojs/telemetry": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -1982,6 +1993,14 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2112,6 +2131,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4853,6 +4877,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -4931,6 +4960,29 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "node_modules/sitemap": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-8.0.0.tgz",
+      "integrity": "sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==",
+      "dependencies": {
+        "@types/node": "^17.0.5",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+    },
     "node_modules/smol-toml": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.4.2.tgz",
@@ -4959,6 +5011,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/stream-replace-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
+      "integrity": "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w=="
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
diff --git a/package.json b/package.json
index 7eb0d50..115aaa5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.4.0",
+    "@astrojs/sitemap": "^3.6.0",
     "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.9",
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..7ff9694
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://sell.markket.place/sitemap-index.xml
+
diff --git a/src/components/subscribe-form.tsx b/src/components/subscribe-form.tsx
new file mode 100644
index 0000000..660cf89
--- /dev/null
+++ b/src/components/subscribe-form.tsx
@@ -0,0 +1,125 @@
+
+
+import React, { useState, type FormEvent } from 'react';
+import { IconRefreshAlert, IconMailbox, IconSquareRoundedX } from '@tabler/icons-react';
+import { markket } from '../content/config';
+
+export interface SubscribeFormProps {
+  store: {
+    documentId: string;
+  },
+}
+
+export function SubscribeForm({ store }: SubscribeFormProps) {
+  const [email, setEmail] = useState('');
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validateEmail = (email: string) => {
+    return /^\S+@\S+$/.test(email);
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError('');
+    setIsSubmitting(true);
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      setIsSubmitting(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(new URL(`/api/subscribers`, markket.api_url), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify({
+          data: {
+            Email: email,
+            stores: store?.documentId ? [store.documentId] : [],
+          }
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || 'Subscription failed');
+      }
+
+      setIsSuccess(true);
+      setEmail('');
+    } catch (err) {
+      console.error('Subscription error:', err);
+      setError(err instanceof Error ? err.message : 'Failed to subscribe. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <p className="text-red-600 text-sm font-medium">{error}</p>
+        )}
+
+        <div className="flex gap-3">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            required
+            disabled={isSubmitting}
+            className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <IconRefreshAlert size={16} />
+                Subscribing...
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <IconMailbox size={16} />
+                Subscribe
+              </span>
+            )}
+          </button>
+        </div>
+      </form>
+
+      {isSuccess && (
+        <div className="fixed inset-0 flex items-center justify-center p-4 z-50" style={{ backgroundColor: 'rgba(5, 0, 80, 0.5)' }} onClick={() => setIsSuccess(false)}>
+          <div className="bg-white rounded-xl p-6 max-w-sm w-full shadow-2xl">
+            <div className="flex justify-between items-start mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Thank you!</h3>
+              <button
+                onClick={() => setIsSuccess(false)}
+                className="text-gray-400 hover:text-gray-500"
+              >
+                <span className="sr-only">Close</span>
+                <IconSquareRoundedX size={24} />
+              </button>
+            </div>
+            <p className="text-gray-600">
+              You've been successfully subscribed to our newsletter.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SubscribeForm;
diff --git a/src/content/config.ts b/src/content/config.ts
index 2d0a29e..76248aa 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -13,6 +13,10 @@ const config: StrapiConfig = {
   sync_interval: 6000,
 };
 
+export const markket = {
+  ...config,
+};
+
 // @TODO: Find a better type to avoid excessively deep and possibly infinite errors
 type Loader = any;
 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 923f646..f58a2c2 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -71,6 +71,7 @@ const finalStructuredData = structuredData || defaultStructuredData;
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />
+    <link rel="sitemap" href="/sitemap-index.xml" />
 
     <!-- Primary Meta Tags -->
     <title>{title}</title>

From 38ca6c670838400b257cc57601ae4c6425fb4c1d Mon Sep 17 00:00:00 2001
From: Daveed <daveed@santocabron.com>
Date: Sat, 4 Oct 2025 13:32:44 -0400
Subject: [PATCH 6/6] fixed tailwind config, newsletter page

---
 markket.config.ts                 |   7 ++
 src/components/subscribe-form.tsx | 182 +++++++++++++++++++-----------
 src/content/config.ts             |   4 -
 src/pages/newsletter.astro        |  17 ++-
 src/styles/base.css               |   7 --
 tailwind.config.cjs               |   9 ++
 6 files changed, 146 insertions(+), 80 deletions(-)
 create mode 100644 markket.config.ts
 create mode 100644 tailwind.config.cjs

diff --git a/markket.config.ts b/markket.config.ts
new file mode 100644
index 0000000..951d109
--- /dev/null
+++ b/markket.config.ts
@@ -0,0 +1,7 @@
+
+export const markket = {
+  store_slug: import.meta.env.PUBLIC_STORE_SLUG,
+  api_url: import.meta.env.PUBLIC_STRAPI_URL,
+  sync_interval: 6000,
+};
+
diff --git a/src/components/subscribe-form.tsx b/src/components/subscribe-form.tsx
index 660cf89..145abf9 100644
--- a/src/components/subscribe-form.tsx
+++ b/src/components/subscribe-form.tsx
@@ -1,13 +1,13 @@
 
 
-import React, { useState, type FormEvent } from 'react';
-import { IconRefreshAlert, IconMailbox, IconSquareRoundedX } from '@tabler/icons-react';
-import { markket } from '../content/config';
+import React, { useState, useRef, useEffect, type FormEvent } from 'react';
+import { IconRefreshAlert, IconMailbox, IconSquareRoundedX, IconCheck } from '@tabler/icons-react';
+import { markket } from '../../markket.config';
 
 export interface SubscribeFormProps {
   store: {
     documentId: string;
-  },
+  };
 }
 
 export function SubscribeForm({ store }: SubscribeFormProps) {
@@ -15,10 +15,19 @@ export function SubscribeForm({ store }: SubscribeFormProps) {
   const [isSuccess, setIsSuccess] = useState(false);
   const [error, setError] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const successRef = useRef<HTMLDivElement | null>(null);
 
-  const validateEmail = (email: string) => {
-    return /^\S+@\S+$/.test(email);
-  };
+  useEffect(() => {
+    if (isSuccess && successRef.current) successRef.current.focus();
+  }, [isSuccess]);
+
+  useEffect(() => {
+    if (!isSuccess) return;
+    const t = setTimeout(() => setIsSuccess(false), 6000);
+    return () => clearTimeout(t);
+  }, [isSuccess]);
+
+  const validateEmail = (value: string) => /^\S+@\S+\.\S+$/.test(value);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -36,21 +45,18 @@ export function SubscribeForm({ store }: SubscribeFormProps) {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Accept': 'application/json',
+          Accept: 'application/json',
         },
         body: JSON.stringify({
           data: {
             Email: email,
             stores: store?.documentId ? [store.documentId] : [],
-          }
+          },
         }),
       });
 
       const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.message || 'Subscription failed');
-      }
+      if (!response.ok) throw new Error(data?.message || 'Subscription failed');
 
       setIsSuccess(true);
       setEmail('');
@@ -63,61 +69,105 @@ export function SubscribeForm({ store }: SubscribeFormProps) {
   };
 
   return (
-    <div className="w-full max-w-md mx-auto">
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <p className="text-red-600 text-sm font-medium">{error}</p>
-        )}
-
-        <div className="flex gap-3">
-          <input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="your@email.com"
-            required
-            disabled={isSubmitting}
-            className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          />
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isSubmitting ? (
-              <span className="flex items-center gap-2">
-                <IconRefreshAlert size={16} />
-                Subscribing...
-              </span>
-            ) : (
-              <span className="flex items-center gap-2">
-                <IconMailbox size={16} />
-                Subscribe
-              </span>
-            )}
-          </button>
-        </div>
-      </form>
-
-      {isSuccess && (
-        <div className="fixed inset-0 flex items-center justify-center p-4 z-50" style={{ backgroundColor: 'rgba(5, 0, 80, 0.5)' }} onClick={() => setIsSuccess(false)}>
-          <div className="bg-white rounded-xl p-6 max-w-sm w-full shadow-2xl">
-            <div className="flex justify-between items-start mb-4">
-              <h3 className="text-lg font-semibold text-gray-900">Thank you!</h3>
-              <button
-                onClick={() => setIsSuccess(false)}
-                className="text-gray-400 hover:text-gray-500"
-              >
-                <span className="sr-only">Close</span>
-                <IconSquareRoundedX size={24} />
-              </button>
-            </div>
-            <p className="text-gray-600">
-              You've been successfully subscribed to our newsletter.
-            </p>
+    <div className="w-full max-w-4xl mx-auto my-16 px-4">
+      <div className="relative overflow-hidden rounded-2xl shadow-2xl" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,255,0.9) 100%)' }}>
+        <div className="pointer-events-none absolute -right-24 -top-24 w-64 h-64 rounded-full bg-gradient-to-tr from-pink-300 to-indigo-400 opacity-30 blur-3xl" />
+
+        <div className="relative grid grid-cols-1 md:grid-cols-2 gap-0">
+          <div className="p-8 md:p-10 flex flex-col justify-center">
+            <h3 className="text-2xl md:text-3xl font-extrabold text-gray-900 leading-tight">Join our newsletter</h3>
+            <p className="mt-2 text-gray-600 max-w-lg">Short, delightful updates about products, design notes, and occasional exclusive offers. No spam — ever.</p>
+
+            <ul className="mt-6 space-y-3">
+              <li className="flex items-start gap-3 text-sm text-gray-700">
+                <span className="p-2 bg-white rounded-full shadow-sm text-green-600"><IconCheck size={16} /></span>
+                <span className="leading-tight">Curated product updates and releases</span>
+              </li>
+              <li className="flex items-start gap-3 text-sm text-gray-700">
+                <span className="p-2 bg-white rounded-full shadow-sm text-green-600"><IconCheck size={16} /></span>
+                <span className="leading-tight">Design insights and short articles</span>
+              </li>
+            </ul>
+          </div>
+
+          <div className="p-6 md:p-8 border-l md:border-l border-transparent md:border-l-gray-50 bg-white md:bg-transparent flex items-center">
+            <form onSubmit={handleSubmit} className="w-full" noValidate>
+              {error && (
+                <div id="subscribe-error" role="alert" aria-live="assertive" className="mb-3 text-sm text-red-600 font-medium">
+                  {error}
+                </div>
+              )}
+
+              <label htmlFor="subscribe-email" className="sr-only">Email address</label>
+              <div className="flex flex-col gap-3">
+                <div className="relative w-full">
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"><IconMailbox size={18} /></span>
+                  <input
+                    id="subscribe-email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@yourdomain.com"
+                    required
+                    disabled={isSubmitting}
+                    autoComplete="email"
+                    aria-describedby={error ? 'subscribe-error' : 'subscribe-success'}
+                    className={`w-full pl-11 pr-4 py-4 rounded-2xl border transition-shadow text-base text-gray-900 placeholder-gray-400 bg-white focus:outline-none focus:ring-4 focus:ring-indigo-100 disabled:opacity-60 ${error ? 'border-red-300' : 'border-gray-200'}`}
+                    style={{ minWidth: '20rem' }}
+                  />
+                </div>
+
+                <div>
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 via-blue-600 to-purple-600 text-white font-semibold rounded-2xl shadow-md transform transition hover:-translate-y-0.5 disabled:opacity-60"
+                  >
+                    {isSubmitting ? (
+                      <span className="flex items-center gap-2">
+                        <IconRefreshAlert className="animate-spin" size={16} />
+                        Subscribing...
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-2">
+                        <IconMailbox size={16} />
+                        Subscribe
+                      </span>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <p className="mt-3 text-xs text-gray-500">We respect your privacy. Unsubscribe anytime.</p>
+
+              {isSuccess && (
+                <div className="mt-4">
+                  <div
+                    ref={successRef}
+                    tabIndex={-1}
+                    role="status"
+                    aria-live="polite"
+                    id="subscribe-success"
+                    className="p-4 rounded-lg bg-white border border-green-100 text-green-900 shadow-md transform transition-all duration-300"
+                    style={{ boxShadow: '0 10px 30px rgba(2,6,23,0.06)' }}
+                  >
+                    <div className="flex items-start gap-3">
+                      <span className="p-2 rounded-full bg-green-50 text-green-700"><IconCheck size={18} /></span>
+                      <div className="flex-1">
+                        <p className="font-semibold">You're subscribed — thank you!</p>
+                        <p className="text-sm text-green-800/80">We'll send occasional updates to your inbox.</p>
+                      </div>
+                      <button aria-label="Dismiss" className="text-green-700 hover:text-green-900 p-1" onClick={() => setIsSuccess(false)}>
+                        <IconSquareRoundedX size={18} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </form>
           </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/src/content/config.ts b/src/content/config.ts
index 76248aa..2d0a29e 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -13,10 +13,6 @@ const config: StrapiConfig = {
   sync_interval: 6000,
 };
 
-export const markket = {
-  ...config,
-};
-
 // @TODO: Find a better type to avoid excessively deep and possibly infinite errors
 type Loader = any;
 
diff --git a/src/pages/newsletter.astro b/src/pages/newsletter.astro
index ff93018..32b8cf1 100644
--- a/src/pages/newsletter.astro
+++ b/src/pages/newsletter.astro
@@ -7,8 +7,14 @@ const pages = await getCollection("pages");
 const page = pages.find((p) => p.data.slug == "newsletter")?.data;
 
 const storeData = await getCollection("store");
-const store = storeData[0]?.data || {};
+const store = {
+  documentId: (storeData[0] as any)?.documentId,
+  ...storeData[0]?.data,
+};
+
 const storeCover = store.Cover;
+
+import SubscribeForm from "../components/subscribe-form";
 ---
 
 <PageLayout
@@ -18,8 +24,7 @@ const storeCover = store.Cover;
     page?.SEO?.socialImage?.url ||
     storeCover?.url}
   heroTitle={page?.Title || "Space Newsletter"}
-  heroSubtitle={page?.SEO?.metaDescription ||
-    "Sign up for email updates."}
+  heroSubtitle={page?.SEO?.metaDescription || "Sign up for email updates."}
   heroImage={page?.SEO?.socialImage?.url || storeCover?.url}
   heroLqip={page?.SEO?.socialImage?.formats?.small?.url}
   heroAspect={page?.SEO?.meta?.heroAspect || "4/5"}
@@ -29,6 +34,12 @@ const storeCover = store.Cover;
     page?.Content && page.Content.length > 0 && (
       <section class="page-content-section">
         <div class="container">
+          <div>
+            <SubscribeForm
+              store={{ documentId: store?.documentId }}
+              client:idle
+            />
+          </div>
           <BlocksContent content={page.Content} className="page-content" />
         </div>
       </section>
diff --git a/src/styles/base.css b/src/styles/base.css
index 40db113..e95800c 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,12 +1,5 @@
 @import "tailwindcss";
 
-/* Reset and Base Styles */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 :root {
   /* Brand Colors - Vibrant and artistic */
   --primary: #E4007C;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..ddcda60
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,9 @@
+module.exports = {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};