/* Mandera website — screens: Home, Work, WorkDetail, Contact. */ const SERVICES = [ { icon: 'pen-tool', name: 'Content Creation', desc: 'Editorial, film and social content built to earn attention in a crowded feed.' }, { icon: 'compass', name: 'Branding', desc: 'Positioning, naming and identity systems that give a brand a reason to be remembered.' }, { icon: 'server', name: 'IT', desc: 'Websites, infrastructure and the technical backbone that keeps everything running.' }, { icon: 'sparkles', name: 'AI', desc: 'Custom AI tools and content engines that make your marketing compound.' }, { icon: 'workflow', name: 'Automation', desc: 'Workflows and lifecycle systems that do the repetitive work for you.' }, { icon: 'camera', name: 'Photography', desc: 'Product, lifestyle and brand photography shot to a considered art direction.' }, ]; // ============================================================ // CLIENT LINKS — paste each client's URLs between the quotes. // Example: website: 'https://qahwa.com', socials: 'https://instagram.com/qahwa' // Leave '' (empty) and the button stays disabled until you add a link. // ============================================================ const CLIENT_LINKS = { 'Qahwa Culture': { website: '', socials: 'https://www.instagram.com/qahwaculture' }, 'Ferragosto': { website: '', socials: 'https://www.instagram.com/ferragostogelateria' }, 'Global Travel': { website: 'https://gttjo.com', socials: 'https://www.instagram.com/globaltravel.jo' }, 'Brava Dentistry': { website: '', socials: 'https://www.instagram.com/brava.clinic.jo' }, }; // ============================================================ // SHOWREEL — when your reel is ready, upload the MP4 (e.g. assets/showreel.mp4) // and set: const SHOWREEL_SRC = './assets/showreel.mp4'; // ============================================================ const SHOWREEL_SRC = ''; const WORK = [ { client: 'Global Travel', tag: 'Content · Campaigns', metric: '+73% new clients', year: '2023', tint: 'linear-gradient(135deg,#14384f,#06070a)', logo: 'work-globaltravel.png', logoMaxW: '58%', logoMaxH: '46%', blurb: 'An always-on content and campaign engagement for one of Jordan’s most established travel agencies — turning decades of reputation into modern, measurable demand.', tagline: '“Your journey starts here.”', services: ['Content Creation', 'Social Media', 'Campaigns'], challenge: 'Global Travel had the experience and the loyal customers — but almost no digital presence. We built a content system around Jordan itself (heritage, nature, luxury) and ran always-on social campaigns that turned attention into booked trips: 73% more new clients since the engagement began.', gallery: ['work/gt-jordan.png', 'work/gt-petra.png', 'work/gt-nature.png', 'work/gt-luxury.png', 'work/gt-night.png'], quote: { text: 'Simply the best marketing company we have ever worked with.', who: 'Fuad Marmash', role: 'CEO, Global Travel' }, }, { client: 'Qahwa Culture', tag: 'Brand · Content', metric: '500K+ views', year: '2025', tint: 'linear-gradient(135deg,#1b4d72,#06070a)', logo: 'work-qahwa.png', logoMaxW: '40%', logoMaxH: '56%', blurb: 'Craft-heavy social content for a specialty coffee brand with personality to spare — the kind of feed that gets screenshotted, shared and remembered.', tagline: '“Coffee, but make it culture.”', services: ['Content Creation', 'Art Direction', 'Photography'], challenge: 'Coffee is the most crowded category in town, and Qahwa Culture needed to feel like a friend — not another shop. We answered with playful, hand-crafted content: paper-cut visuals, summer campaigns and product-first photography that pushed past 500,000 views.', gallery: ['work/qahwa-summer.png', 'work/qahwa-alarm.png', 'work/qahwa-heat.png', 'work/qahwa-reminder.png', 'work/qahwa-tray.png', 'work/qahwa-brewing.png'], quote: { text: 'Great quality — and everything is seamless.', who: 'Eyad Aloul', role: 'Qahwa Culture' }, }, { client: 'Ferragosto', tag: 'Identity · Launch', metric: 'Branding & launch', year: '2026', tint: 'linear-gradient(135deg,#246a9b,#0a0c11)', logo: 'work-ferragosto.png', logoMaxW: '64%', logoMaxH: '34%', blurb: 'Naming, identity and launch storytelling for an Italian gelateria — from a hand-lettered wordmark to a postcard campaign that feels flown in from Italy.', tagline: '“Greetings from Italy.”', services: ['Branding', 'Identity', 'Launch Campaign'], challenge: 'Ferragosto opened with zero awareness in a market that had never tasted proper gelato. We built the brand from scratch — the hand-written wordmark, illustrated stamps and flavour frames, and a postcard-led launch — so the store opened with a story people wanted to share.', gallery: ['work/ferra-postcard-1.png', 'work/ferra-swirl.png', 'work/ferra-strawberry.png', 'work/ferra-postcard-2.png', 'work/ferra-pistachio.png', 'work/ferra-coconut.png'], quote: { text: 'The branding was on point — every detail of it.', who: 'Khalil Zuaiter', role: 'Store Owner, Ferragosto' }, }, { client: 'Brava Dentistry', tag: 'Content · Social', metric: 'Coming soon', year: '2026', tint: 'linear-gradient(135deg,#2e83be,#0a0c11)', wordmark: { name: 'Brava', sub: 'Dentistry' }, blurb: 'A content and social engagement for Amman’s boutique dental clinic. Full case study coming soon.', }, ]; const STATS = [['5', 'years in practice'], ['20+', 'brands shaped'], ['60', 'Campaigns launched'], ['7', 'industries worked with']]; function MarkBackdrop({ opacity = 0.16, size = 720, pos = { top: '-160px', right: '-160px' } }) { return ; } function Hero({ go }) { const { Button, Badge } = window.ManderaDesignSystem_8327ce; return (
Marketing Agency

We make brands impossible to ignore.

Mandera is a modern marketing studio for founders and category leaders — brand, content, performance and AI, under one roof.

{STATS.map(([n, l]) => (
{n} {l}
))}
); } function ServicesSection() { const { Card } = window.ManderaDesignSystem_8327ce; return (
{SERVICES.map((s) => (

{s.name}

{s.desc}

 ))}
); } function WorkCard({ w, go }) { const [h, setH] = React.useState(false); return ( ); } function WorkSection({ go, full }) { return (
{WORK.map((w) => )}
); } function Quote() { const more = [ { text: 'The branding was on point — every detail of it.', who: 'Khalil Zuaiter', role: 'Store Owner · Ferragosto' }, { text: 'Great quality — and everything is seamless.', who: 'Eyad Aloul', role: 'Qahwa Culture' }, ]; return (
In their words

“Simply the best marketing company we have ever worked with.”

Fuad Marmash · CEO, Global Travel
{more.map((q) => (

“{q.text}”

{q.who} · {q.role}
))}
); } function CTA({ go }) { const { Button } = window.ManderaDesignSystem_8327ce; return (

Let’s make something worth remembering.

Tell us where you want to go. We’ll bring the strategy, the craft and the momentum.

); } function Showreel() { if (!SHOWREEL_SRC) return null; return (
); } function Home({ go }) { return ( <> ); } function Work({ go }) { return (<>); } function WorkDetail({ go, item }) { const { Badge, Button } = window.ManderaDesignSystem_8327ce; const w = item || WORK[0]; const links = CLIENT_LINKS[w.client] || {}; return (
{w.tag}

{w.client}

{w.blurb || 'A full brand and growth engagement — from positioning through launch campaign — that reset the category conversation.'}

{w.logo && {w.client} {w.wordmark && (
{w.wordmark.name} {w.wordmark.sub}
)}
The brand
{w.tagline || '“A name worth remembering — finally seen.”'}
{(w.services || ['Content Creation', 'SEO', 'Campaign']).map((t) => ( {t} ))}
The challenge

{w.challenge || 'A respected name had become invisible — strong product, soft story. We rebuilt the brand from its point of view out, then put media behind a single, ownable idea.'}

{[['Result', w.metric], ['Engagement', (w.services || ['Content Creation', 'SEO', 'Campaign']).join(', ')]].map(([k, v]) => (
{k} {v}
))}
{links.website && } {links.socials && }
{w.gallery && (
{w.gallery.map((g) => ( {w.client ))}
)} {w.quote && (
In their words

“{w.quote.text}”

{w.quote.who} · {w.quote.role}
)}
); } function Contact({ go }) { const { Button, Input, Checkbox } = window.ManderaDesignSystem_8327ce; const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const [err, setErr] = React.useState(''); async function submit(e) { e.preventDefault(); const form = e.target; const data = new FormData(form); data.append('form', 'Contact'); data.append('_subject', 'New inquiry from the Mandera website'); setSending(true); setErr(''); try { const res = await fetch('/api/send.php', { method: 'POST', headers: { Accept: 'application/json' }, body: data, }); const out = await res.json().catch(() => ({})); if (!res.ok || !out.ok) throw new Error(out.message || 'Your message could not be sent.'); setSent(true); } catch (e2) { setErr((e2 && e2.message) || 'Something went wrong. Please email info@manderamarketing.com directly.'); } finally { setSending(false); } } return (
Start a project

Tell us what you’re building.

We reply to every serious inquiry within two business days. No bots, no forms into the void.

{[['mail', 'info@manderamarketing.com', 'mailto:info@manderamarketing.com'], ['phone', '+962 77 777 3324', 'tel:+962777773324'], ['map-pin', 'Al-Madinah St · Al-Assaf Building, Office 101 · Amman, Jordan', 'https://maps.app.goo.gl/VUFdwRNiLABDZp6V6']].map(([ic, t, href]) => ( e.currentTarget.style.color = 'var(--accent-text)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}> {t} ))}
{sent ? (

Message received.

Thanks — we’ll be in touch within two business days.

) : (
} /> } />