Merge pull request #43 from chiscookeke11/issue-32

Add creator profile section divider component

Author: Chucks1093

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;

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';
 import SectionHeading from '@/components/common/SectionHeading';
@@ -131,6 +132,8 @@ function LandingPage() {
           </div>
         </header>
 
+        <SectionDivider title="Discover creators" spacing="relaxed" />
+
         <StickyFilterBar
           eyebrow="Marketplace filters"
           title="Find creators without losing your place"
@@ -144,6 +147,8 @@ function LandingPage() {
           />
         </StickyFilterBar>
 
+        <SectionDivider title="Marketplace results" spacing="default" />
+
         <section className="mt-2">
           <SectionHeading
             title="Explore creators"