/* Mandera website — Mandy AI page. Uses the site's shared chrome, tokens and DS components. */ const MANDY_ANCHORS = [['mandy-meet', 'Meet Mandy'], ['mandy-capabilities', 'Capabilities'], ['mandy-teams', 'Teams'], ['mandy-how', 'How It Works'], ['mandy-faqs', 'FAQs'], ['mandy-contact', 'Contact']]; function mandyScrollTo(id) { const el = document.getElementById(id); if (!el) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 92, behavior: reduce ? 'instant' : 'smooth' }); } const MANDY_VALUES = [ ['sparkle', 'Less repetitive work', 'Reduce the time spent preparing routine updates, organizing information, and repeating the same administrative steps.'], ['list-checks', 'Clearer next steps', 'Turn scattered notes, requests, and conversations into useful drafts and organized actions.'], ['users', 'More focused teams', 'Help people find what they need and move work forward with fewer unnecessary handoffs.'], ]; const MANDY_CAPS = [ ['mail', 'Email assistance', 'Prepare replies, organize follow-ups, and turn long email conversations into clear summaries.'], ['calendar-clock', 'Scheduling and preparation', 'Bring structure to appointments, meeting preparation, and the reminders that keep a busy week moving.'], ['file-text', 'Meeting summaries', 'Turn meeting notes or transcripts into concise recaps, decisions, and action lists.'], ['search', 'Research and insights', 'Gather relevant information and organize findings into briefs your team can use.'], ['presentation', 'Reports and presentations', 'Transform supplied business information into clear summaries, presentation drafts, and dashboard views.'], ['book-open', 'Business knowledge', 'Make approved company information easier to find, understand, and use in everyday work.'], ['repeat', 'Recurring workflows', 'Support repeatable tasks such as weekly updates, scheduled summaries, and routine checklists.'], ['layout-template', 'Reusable ways of working', 'Build on your preferred formats, instructions, and processes so familiar tasks start with a useful structure.'], ['building-2', 'Business context', 'Use the business information and preferences you provide to make assistance more relevant.'], ['plug', 'Connected tools', 'Explore workflows across the tools your business uses, depending on the connections available for your setup.'], ]; const MANDY_TEAMS = [ { value: 'marketing', label: 'Marketing', icon: 'megaphone', head: 'Keep your marketing moving.', desc: 'Bring campaign ideas, content preparation, research, and reporting into a more organized workflow.', items: ['Prepare social and email content drafts.', 'Organize competitor research.', 'Summarize campaign results.', 'Review supplied advertising data.', 'Build campaign checklists and presentation outlines.'], ask: 'Mandy, turn this campaign brief into a week of content ideas.' }, { value: 'sales', label: 'Sales', icon: 'trending-up', head: 'Make every follow-up easier to prepare.', desc: 'Give your sales team a clearer starting point for research, conversations, and the next step with a lead.', items: ['Organize lead and account research.', 'Draft personalized follow-up messages.', 'Prepare meeting briefs.', 'Summarize sales conversations.', 'Prepare CRM updates where supported.'], ask: 'Mandy, draft a follow-up based on these discovery call notes.' }, { value: 'support', label: 'Customer Support', icon: 'life-buoy', head: 'Bring clarity to every customer request.', desc: 'Help your support team organize incoming questions, prepare helpful responses, and identify issues that need attention.', items: ['Group inquiries by topic.', 'Draft replies using approved information.', 'Summarize customer conversations.', 'Identify requests that need escalation.', 'Organize recurring questions for the team.'], ask: 'Mandy, sort these customer requests and draft replies for review.' }, { value: 'operations', label: 'Operations', icon: 'workflow', head: 'Give everyday operations a clearer structure.', desc: 'Organize the recurring work that keeps your business running, from internal updates to task coordination.', items: ['Prepare recurring checklists.', 'Summarize internal updates.', 'Organize task owners and deadlines.', 'Compare supplied vendor information.', 'Prepare weekly operational reports.'], ask: 'Mandy, turn these team updates into a weekly operations summary.' }, { value: 'finance', label: 'Finance', icon: 'receipt', head: 'Keep financial admin organized.', desc: 'Support the preparation and organization behind routine financial administration.', items: ['Organize supplied invoice information.', 'Prepare payment reminder drafts.', 'Summarize outstanding administrative items.', 'Build month-end checklists.', 'Prepare internal summaries from supplied figures.'], ask: 'Mandy, organize these invoices and draft reminders for review.' }, ]; const MANDY_DEMOS = [ { value: 'campaign', label: 'Campaign planning', icon: 'megaphone', status: 'Draft outline', ask: 'Mandy, help us plan a campaign for our new service.', reply: 'Here’s a starting structure for the campaign.', blocks: [['Campaign focus', 'Explain the customer’s problem and how the service helps.'], ['Content direction', 'Prepare an introductory post, a helpful explainer, and a follow-up email.'], ['Next steps', 'Confirm the audience, review the drafts, and choose the launch dates.']] }, { value: 'followup', label: 'Sales follow-up', icon: 'send', status: 'Example draft', ask: 'Mandy, write a follow-up after a discovery call.', reply: 'Here’s an example you can adapt to the conversation.', email: ['Hi Alex,', 'Thanks for taking the time to speak with us. It was helpful to learn more about your team’s priorities and the work you’re looking to simplify.', 'We’d be happy to walk through a workflow that fits your business and discuss the next steps.', 'Would you like to arrange a follow-up conversation?', 'The Mandera Marketing Team'] }, { value: 'actions', label: 'Meeting actions', icon: 'list-checks', status: 'Example action list', ask: 'Mandy, turn our meeting notes into a clear action list.', reply: 'Here’s an example of how your next steps could be organized.', list: [['Confirm the campaign brief', 'Marketing'], ['Review the customer follow-up draft', 'Sales'], ['Prepare the internal delivery checklist', 'Operations']] }, ]; const MANDY_STEPS = [ ['Choose a workflow', 'Tell Mandera Marketing which tasks take up your team’s time and where you would like more support.'], ['Shape Mandy around your business', 'Define the information, tools, instructions, and review steps relevant to the workflow.'], ['Review and refine', 'Explore the outputs with your team and adjust the approach around how you work.'], ]; const MANDY_TOOLS = [['mail', 'Email'], ['calendar', 'Calendar'], ['file-text', 'Documents'], ['contact', 'CRM'], ['message-square', 'Team communication']]; const MANDY_FAQS = [ ['What is Mandy?', 'Mandy is Mandera Marketing’s AI assistant offering, designed to help businesses organize information, prepare useful work, and simplify recurring tasks.'], ['Which teams can Mandy help?', 'This page focuses on Marketing, Sales, Customer Support, Operations, and Finance. The right starting point depends on the work your business wants to simplify.'], ['What kinds of tasks can I explore?', 'Examples include content preparation, follow-up drafts, meeting summaries, research organization, internal reporting, and administrative checklists. Get in touch and we can help identify which workflows fit your needs.'], ['Can Mandy be adapted to my business?', 'The setup can be scoped around your team’s instructions, preferred formats, business information, and chosen workflows. Mandera Marketing can discuss what is possible for your requirements.'], ['Can Mandy work with our existing tools?', 'Available connections depend on the tools you use and the workflow you want to create. Share your current setup with Mandera Marketing so the relevant options can be confirmed.'], ['How can we learn more?', 'Share the workflow you have in mind and Mandera Marketing can walk you through the information it needs and the kind of output it could produce.'], ['How do we get started?', 'Use the form on this page to contact Mandera Marketing and tell us which tasks you would like to simplify.'], ]; /* ---------- small shared pieces ---------- */ function MandyAvatar({ s = 38 }) { return ( ); } function DemoTag({ children = 'Illustrative example' }) { return ( {children} ); } function ChatRow({ who, text }) { const mandy = who === 'mandy'; return (
{mandy ? : ( )}
{mandy ? 'Mandy' : 'You'}

{text}

); } /* Accessible tab strip: roving focus + arrow keys */ function MandyTabStrip({ items, active, onSelect, label }) { const ref = React.useRef(null); const key = (e) => { const dir = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0; if (!dir) return; e.preventDefault(); const i = items.findIndex((t) => t.value === active); const next = items[(i + dir + items.length) % items.length]; onSelect(next.value); const btns = ref.current ? ref.current.querySelectorAll('[role="tab"]') : []; const nb = btns[items.indexOf(next)]; if (nb) nb.focus(); }; return (
{items.map((t) => { const on = t.value === active; return ( ); })}
); } /* ---------- sections ---------- */ function MandyHero({ onDemo }) { const { Button, Badge } = window.ManderaDesignSystem_8327ce; return (
Mandy by Mandera Marketing

Meet Mandy. Make more time for what matters.

Meet the AI assistant designed to help your business move forward. From everyday admin to marketing workflows, Mandy helps your team organize information, prepare work, and keep important tasks moving.

Explore what Mandy could do for your team.
); } function MandyPreview() { const cards = [ ['layout-template', 'Campaign outline', 'Organize the audience, message, and next steps.'], ['pen-tool', 'Content drafts', 'Prepare ideas for email and social channels.'], ['list-checks', 'Launch checklist', 'Keep responsibilities and review points in one place.'], ]; return (
Mandy
Your business assistant
{cards.map(([ic, t, d]) => (
{t}
{d}
))}
Example workflow: campaign preparation
); } function MandySubNav() { return ( ); } function MandyValue() { const { Card } = window.ManderaDesignSystem_8327ce; return (
{MANDY_VALUES.map(([ic, t, d]) => (

{t}

{d}

))}
); } function MandyCapabilities() { return (
{MANDY_CAPS.map(([ic, t, d]) => (

{t}

{d}

))}
); } function MandyTeams() { const [active, setActive] = React.useState('marketing'); const t = MANDY_TEAMS.find((x) => x.value === active); return (

{t.head}

{t.desc}

“{t.ask}”

    {t.items.map((i) => (
  • {i}
  • ))}
); } function MandyDemo() { const [active, setActive] = React.useState('campaign'); const d = MANDY_DEMOS.find((x) => x.value === active); return (
Examples

See a task through Mandy’s eyes.

Choose an example to see how a request can become a useful starting point.

{d.label} {d.status}
{d.blocks && (
{d.blocks.map(([t, v]) => (
{t}

{v}

))}
)} {d.email && (
{d.email.map((p) => (

{p}

))}
)} {d.list && (
{d.list.map(([task, owner]) => (
{task} {owner}
))}
)}
); } function MandyHow({ onDemo }) { const { Button } = window.ManderaDesignSystem_8327ce; return (
{MANDY_STEPS.map(([t, d], i) => (
{'0' + (i + 1)}

{t}

{d}

))}
); } function MandyTools({ onDemo }) { const { Button } = window.ManderaDesignSystem_8327ce; return (
Tools and integrations

Built around the way your business works.

Your team already has tools and processes in place. Explore how Mandy could support a connected workflow around your email, calendar, documents, customer information, and internal communication.

Available connections depend on the tools and workflow selected for your setup.

{MANDY_TOOLS.map(([ic, name]) => (
{name}
))}
); } function MandyFaqs() { const [open, setOpen] = React.useState(0); return (
{MANDY_FAQS.map(([q, a], i) => { const on = open === i; return (

{on && (

{a}

)}
); })}
); } function MandyClose() { const { Button, Input } = window.ManderaDesignSystem_8327ce; const [state, setState] = React.useState('idle'); // idle | sending | sent | error const [errs, setErrs] = React.useState({}); async function submit(e) { e.preventDefault(); const form = e.target; const fd = new FormData(form); const next = {}; ['name', 'email', 'message'].forEach((k) => { if (!String(fd.get(k) || '').trim()) next[k] = 'Please complete this field.'; }); const email = String(fd.get('email') || '').trim(); if (!next.email && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) next.email = 'Please enter a valid email address.'; setErrs(next); if (Object.keys(next).length) return; fd.append('form', 'Mandy AI — Inquiry'); fd.append('_subject', 'Mandy AI inquiry from the Mandera website'); setState('sending'); try { const res = await fetch(new URL('api/send.php', document.baseURI).href, { method: 'POST', headers: { Accept: 'application/json' }, body: fd }); const out = await res.json().catch(() => ({})); if (!res.ok || !out.ok) throw new Error('failed'); setState('sent'); } catch (e2) { setState('error'); } } return (
Meet your next business assistant

Put Mandy to work on what matters to you.

Tell us where your team needs support. We’ll explore how Mandy could fit into your business and help make everyday work easier to manage.

Start with one workflow. Explore the possibilities.
{[['mail', 'info@manderamarketing.com', 'mailto:info@manderamarketing.com'], ['phone', '+962 77 777 3324', 'tel:+962777773324']].map(([ic, t, href]) => ( e.currentTarget.style.color = 'var(--accent-text)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}> {t} ))}
{state === 'sent' ? (

Thank you.

Your message has been received — we’ll be in touch.

) : (

Contact us for more info

} />