//=== index.tsx === import { Hero, FeaturedProduct, ProductGrid, Gallery, Text, InquireCta, ContactCard, Section, Divider, Custom, useStorefront, useProducts, useLocale, } from '@souqna/sdk'; import { theme } from './theme'; void theme; export default function Storefront() { const sf = useStorefront(); const products = useProducts(); const isAr = useLocale() === 'ar'; const flagship = products[0]; return ( <> {flagship ? (

) : null}

{isAr ? 'كيف تطلبين قطعتك' : 'How a piece comes to you'}

01
{isAr ? 'استشارة' : 'Consultation'}

{isAr ? 'نناقش القماش والقصّة والمقاس المناسب لك.' : 'We talk through fabric, cut, and the fit you have in mind.'}
02
{isAr ? 'تفصيل' : 'Tailoring'}

{isAr ? 'كل عباية تُفصّل يدويًا في الدوحة بعناية هادئة.' : 'Each abaya is hand-finished in Doha with quiet care.'}
03
{isAr ? 'تسليم' : 'Delivery'}

{isAr ? 'نوصل القطعة جاهزة، مع تعديلات الطول إن احتجت.' : 'Your piece arrives ready to wear, with length adjusted if needed.'}

({ imageUrl: p.imageUrl ?? '', alt: p.title, caption: p.title, }))} />

); } //=== theme.ts === import type { ThemeOverrides } from '@souqna/sdk'; export const theme: ThemeOverrides = { palette: 'pearl_lagoon', headingWeight: 400, sectionSpacing: 'comfortable', themeBehaviour: 'auto', seo: { title: 'Abaya edit · quiet craft, considered drape', description: 'A small Doha abaya collection, shown one silhouette at a time.', }, }; //=== styles.css === .edit-process { padding: 4.5rem 1.5rem; text-align: center; } .edit-process-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; color: var(--sf-ink); margin-block-end: 2.5rem; } .edit-process-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .edit-process-card { border: 1px solid color-mix(in srgb, var(--sf-ink) 12%, transparent); padding: 2rem 1.5rem; display: grid; gap: 0.75rem; text-align: start; background: color-mix(in srgb, var(--sf-ground) 96%, var(--sf-accent) 4%); } .edit-process-card h3 { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--sf-ink); } .edit-process-card p { margin: 0; line-height: 1.6; color: color-mix(in srgb, var(--sf-ink) 78%, transparent); } .edit-process-num { font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--sf-accent); font-size: 0.85rem; } @media (max-width: 720px) { .edit-process-steps { grid-template-columns: 1fr; } .edit-process-card { text-align: center; } }

{isAr ? 'كيف تطلبين قطعتك' : 'How a piece comes to you'}

{isAr ? 'استشارة' : 'Consultation'}

{isAr ? 'تفصيل' : 'Tailoring'}

{isAr ? 'تسليم' : 'Delivery'}