From bb728b76438c4e3cbf6fef205fcd9a323d48dab1 Mon Sep 17 00:00:00 2001
From: Okeke Chinedu Emmanuel <chiscookeke11@gmail.com>
Date: Fri, 27 Mar 2026 07:27:09 +0100
Subject: [PATCH] Add reusable section divider component with spacing variants

---
 src/components/common/SectionDivider.tsx | 31 ++++++++++++++++++++++++
 src/pages/LandingPage.tsx                |  5 ++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/common/SectionDivider.tsx

diff --git a/src/components/common/SectionDivider.tsx b/src/components/common/SectionDivider.tsx
new file mode 100644
index 0000000..04a96f7
--- /dev/null
+++ b/src/components/common/SectionDivider.tsx
@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+
+type SectionDividerSpacing = 'compact' | 'default' | 'relaxed';
+
+interface SectionDividerProps {
+  title?: string;
+  spacing?: SectionDividerSpacing;
+  className?: string;
+}
+
+const spacingClasses: Record<SectionDividerSpacing, string> = {
+  compact: 'my-4 md:my-5',
+  default: 'my-6 md:my-8',
+  relaxed: 'my-8 md:my-12',
+};
+
+function SectionDivider({ title, spacing = 'default', className }: SectionDividerProps) {
+  return (
+    <div className={cn('flex items-center gap-3 md:gap-4', spacingClasses[spacing], className)}>
+      <div className="h-px flex-1 bg-white/10" aria-hidden="true" />
+      {title ? (
+        <span className="shrink-0 text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-white/55 md:text-xs">
+          {title}
+        </span>
+      ) : null}
+      <div className="h-px flex-1 bg-white/10" aria-hidden="true" />
+    </div>
+  );
+}
+
+export default SectionDivider;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index b63301e..0e6ad44 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -5,6 +5,7 @@ import StickyFilterBar from '@/components/common/StickyFilterBar';
 import CreatorCard from '@/components/common/CreatorCard';
 import { CreatorGridSkeleton } from '@/components/common/CreatorSkeleton';
 import EmptyState from '@/components/common/EmptyState';
+import SectionDivider from '@/components/common/SectionDivider';
 import { Button } from '@/components/ui/button';
 import { UnavailableAction } from '@/components/ui/unavailable-action';
 
@@ -130,6 +131,8 @@ function LandingPage() {
           </div>
         </header>
 
+        <SectionDivider title="Discover creators" spacing="relaxed" />
+
         <StickyFilterBar
           eyebrow="Marketplace filters"
           title="Find creators without losing your place"
@@ -143,6 +146,8 @@ function LandingPage() {
           />
         </StickyFilterBar>
 
+        <SectionDivider title="Marketplace results" spacing="default" />
+
         <section className="mt-2">
           {isLoading ? (
             <CreatorGridSkeleton count={6} />