/* global React, Icon, MockVerimatrix, MockPTO, MockRenoir, MockWithin3, MockNexus, MockBima */
const { useState } = React;

// Split a string into <span class="word"><span>w</span></span> pieces for mask-reveal animation.
// Preserves whitespace, accepts a baseDelay (s) + step (s) so callers can chain choreography.
const WordReveal = ({ text, baseDelay = 0, step = 0.06, className = "" }) => {
  const parts = String(text).split(/(\s+)/);
  let idx = 0;
  return (
    <span className={"wr " + className}>
      {parts.map((p, i) => {
        if (/^\s+$/.test(p)) return <span key={i}>{p}</span>;
        const d = baseDelay + idx * step;
        idx += 1;
        return (
          <span key={i} className="wr-word">
            <span className="wr-inner" style={{ animationDelay: d + "s" }}>{p}</span>
          </span>);
      })}
    </span>);
};

const Nav = () =>
<nav className="nav" aria-label="Primary">
    <div className="nav-inner">
      <span className="nav-brand"><span className="dot" />Razaq Atayee</span>
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-actions">
        <a className="nav-social mail" href="mailto:razaq.works@gmail.com" aria-label="Email">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="#D44638" d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.4l8 5.2 8-5.2V7H4Zm16 2.75-7.47 4.86a1 1 0 0 1-1.06 0L4 9.75V17h16V9.75Z" />
          </svg>
        </a>
        <a className="nav-social tg" href="https://t.me/razaqatayee" target="_blank" rel="noreferrer" aria-label="Telegram">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="#229ED9" d="M21.94 4.66c.21-.96-.34-1.34-.97-1.1L2.65 10.7c-.96.38-.95.93-.17 1.17l4.7 1.46 10.91-6.88c.51-.32.98-.14.59.18l-8.83 7.97-.34 4.88c.4 0 .57-.17.78-.38l1.87-1.81 3.88 2.86c.71.39 1.22.19 1.4-.66l2.5-11.83Z" />
          </svg>
        </a>
        <a className="nav-cta" href="booking.html" target="_blank" rel="noreferrer">
          Book a call
        </a>
      </div>
    </div>
  </nav>;


const heroPillItems = [
{ photo: "assets/testi-mogan.jpg", quote: "creativity with empathy, logic with simplicity." },
{ photo: "assets/testi-admu.jpg", quote: "a super machine. Kick him off and he delivers." },
{ photo: "assets/testi-asraf.jpg", quote: "tremendous talent. A man with many talents." },
{ photo: "assets/testi-mohamed.jpg", quote: "great at UI/UX, handles pressure, organised." }];


const HeroPill = () => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % heroPillItems.length), 3800);
    return () => clearInterval(id);
  }, []);
  const item = heroPillItems[i];
  return (
    <a className="hero-testi-pill hero-enter" style={{ animationDelay: "0s" }} href="#testimonials" aria-label="See client testimonials">
      <span className="cta-avatar" key={"a" + i}><img src={item.photo} alt="" /></span>
      <em key={"q" + i}>"…{item.quote}"</em>
    </a>);

};

const Hero = ({ headline }) =>
<header className="hero" id="top">
    <div className="hero-bg" aria-hidden="true">
      <div className="hero-grid" />
      <div className="hero-glow" />
      <div className="hero-glow b" />
      <div className="hero-grain" />
      <div className="hero-vignette" />
    </div>
    <div className="container">
      <HeroPill />
      <h1 className="hero-headline">
        {(() => {
        let acc = 0;
        return headline.split("|").map((part, i) => {
          // word-count this chunk so accent chunk continues the stagger seamlessly
          const words = part.split(/\s+/).filter(Boolean).length;
          const node =
          <WordReveal key={i} text={part} baseDelay={0.1 + acc * 0.06} step={0.06}
          className={i === 1 ? "accent" : ""} />;
          acc += words;
          return node;
        });
      })()}
      </h1>
      <p className="hero-sub hero-enter" style={{ animationDelay: "0.55s" }}>Most websites look fine and do nothing. I fix that, WordPress, Shopify, or fully custom.

    </p>
      <div className="hero-ctas hero-enter" style={{ animationDelay: "0.7s" }}>
        <a className="btn btn-primary btn-lg cta-with-avatar" href="booking.html" target="_blank" rel="noreferrer">
          <span className="cta-avatar lg"><img src="assets/razaq.png" alt="" style={{ opacity: "1" }} /></span>
          Book a free 20-min call <span className="arr"><Icon name="arrow" size={16} /></span>
        </a>
        <a className="btn btn-ghost btn-lg" href="#work">See my work</a>
      </div>
      <div className="hero-spots hero-enter" style={{ animationDelay: "0.85s" }}><span className="pulse" />Currently taking new clients for Q3</div>
      <div className="hero-proof hero-enter" style={{ animationDelay: "0.95s" }}>
        <div className="proof-avatars">
          <span>MK</span><span>JL</span><span>RA</span><span>+</span>
        </div>
        <span className="proof-stars">★★★★★</span>
        <span>Trusted by founders across the US, EU and SEA</span>
      </div>
    </div>
  </header>;


const services = [
{ num: "01", emoji: "🎨",
  title: "Brand-led design",
  body: "Looks like your brand, not a template. Built to convert before a line of code is written." },
{ num: "02", emoji: "🛠️",
  title: "Full-package builds",
  body: "WordPress, Shopify, or fully custom. Fast, accessible, SEO-tight, handed over documented." },
{ num: "03", emoji: "⚡",
  title: "Page speed & technical SEO",
  body: "Slow sites lose sales. I fix Core Web Vitals, mobile performance, and technical SEO so your site stops bleeding conversions." },
{ num: "04", emoji: "📈",
  title: "Conversion & growth",
  body: "Audits, A/B tests, and rewrites for pages that aren't pulling their weight. Real revenue, no vanity charts." },
{ num: "05", emoji: "🤝",
  title: "Fractional partner",
  body: "Embedded with your team. Landing pages, launches, and the steady work between them." }];


const Services = () =>
<section className="section" id="services">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">What I do</span>
          <h2>Five things, done seriously.</h2>
        </div>
        <p style={{ color: "var(--text-muted)", maxWidth: "32ch", fontSize: 16 }}>A focused set of services, refined and delivered repeatedly for growing brands.

      </p>
      </div>

      <div className="services-grid reveal-stagger">
        {services.map((s, i) =>
      <article key={s.num} className={"service-card reveal" + (i === services.length - 1 && services.length % 2 === 1 ? " wide" : "")}>
            <span className="num">{s.num}</span>
            <div className="service-icon" aria-hidden="true">{s.emoji}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
          </article>
      )}
      </div>
    </div>
  </section>;


const How = () =>
<section className="how section" id="how">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">How it works</span>
        <h2>From first call to live site in three moves.</h2>
      </div>
    </div>
    <div className="container" style={{ padding: 0 }}>
      <div className="container">
        <div className="how-grid reveal-stagger">
          {[
        { n: "01", t: "Discover", b: "A 20-min call, a focused audit. We agree on the problem worth solving.", d: "Week 1" },
        { n: "02", t: "Design", b: "Strategy, copy direction, and high-fidelity design, before anyone touches code.", d: "Weeks 2–3" },
        { n: "03", t: "Deliver", b: "Build, QA, migrate, launch. Plus 30 days of post-launch tuning.", d: "Weeks 4–6" }].
        map((s) =>
        <div key={s.n} className="how-step reveal">
              <span className="num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
              <span className="duration">{s.d}</span>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


const projects = [
{ shot: "assets/work/verimatrix.png", name: "Verimatrix", url: "verimatrix.com", tag: "Cybersecurity", desc: "Enterprise rebuild for a NASDAQ-listed video-security company. New architecture, design system, and a site built for enterprise buyers." },
{ shot: "assets/work/pto.png", name: "Pro Triathletes Organisation", url: "protriathletes.org", tag: "Sports", desc: "Live-event hub for the world's top 100 triathletes. Built for real-time race data, media, and global fans." },
{ shot: "assets/work/within3.png", name: "Within3", url: "within3.com", tag: "Life Sciences", desc: "Repositioning and rebuild for a pharma intelligence SaaS. Clearer messaging, faster load, better conversion path." },
{ shot: "assets/work/nexus.png", name: "Nexus International School", url: "nexus.edu.my", tag: "Education", desc: "Admissions-driven rebuild for an IB school in Putrajaya. Designed to reduce drop-off and drive enquiries." },
{ video: "https://www.youtube-nocookie.com/embed/bFcu0Rn1d7w?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&modestbranding=1&playlist=bFcu0Rn1d7w&playsinline=1&rel=0&iv_load_policy=3", name: "Bima Visuals", url: "bimavisuals.com", tag: "Production Studio", desc: "Cinematic portfolio for a KL film and stills studio. Built to win premium briefs, fast on every device." }];


const Work = () =>
<section className="section" id="work">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">Selected work</span>
          <h2>Sites that earn their place on the homepage.</h2>
        </div>
        <a className="btn btn-ghost" href="#contact">
          Request the full case studies <span className="arr"><Icon name="arrow" size={16} /></span>
        </a>
      </div>

      <div className="work-grid reveal-stagger">
        {projects.map(({ shot, video, name, url, tag, desc }) =>
      <a key={name} className="work-card tilt reveal" href={`https://${url}`} target="_blank" rel="noreferrer">
            <div className="work-mock">
              {video ?
          <iframe
            className="work-video"
            src={video}
            title={name}
            frameBorder="0"
            allow="autoplay; encrypted-media; picture-in-picture"
            allowFullScreen
            loading="lazy" /> :

          <img className="work-shot" src={shot} alt={name} loading="lazy" />}
            </div>
            <div className="work-overlay">
              <span className="work-tag"><span className="pip" />{tag}</span>
              <div className="work-name">{name}<Icon name="arrow-out" size={20} /></div>
              <p className="work-desc">{desc}</p>
            </div>
          </a>
      )}
      </div>
    </div>
  </section>;


const testimonials = [
{ name: "Dr Admu", co: "Client, Senior Academic Leader", photo: "assets/testi-admu.jpg", years: "1",
  text: "Razaq belongs to the category I call \"machine,\" in fact a \"super machine.\" Kick-start him with the right resource and focus, and he delivers, always with good results." },
{ name: "Moganeswaran Vatu Mala", co: "AVP, Simbiotik Technologies", photo: "assets/testi-mogan.jpg", years: "3",
  short: "I had the pleasure of working with Razaq. What I remember most about him is his creative mind and the clarity he brings into every design — he designs with purpose, not just aesthetics.",
  text: [
  "I had the pleasure of working with Razaq. What I remember most about him is his creative mind and the clarity he brings into every design. He doesn't just design for aesthetics but he designs with purpose. Every idea, every screen, and every flow is shaped from the end user's perspective, not just from a designer's lens.",
  "What truly sets him apart is his communication style. He was never afraid to speak up and share his thoughts, yet he did it with respect and emotional intelligence. He had this rare ability to express honest opinions without offending anyone, a quality that kept discussions productive and collaboration smooth.",
  "Razaq is one of those designers who blend creativity with empathy and logic with simplicity. Working with him was always a refreshing experience, and I'd be glad to collaborate with him again anytime."]
},
{ name: "Asraf Yusoff", co: "Technology Consulting · PMO", photo: "assets/testi-asraf.jpg", years: "1",
  text: "Especially great at UI/UX and the documentation that goes with it. Works day and night, handles pressure, organizes his time impressively." },
{ name: "Mohamed Al Hakeem", co: "Business Consultant", photo: "assets/testi-mohamed.jpg", years: "2",
  text: "Razaq has tremendous talent in design and creative work. A man with many talents." },
{ name: "Amber Chong", co: "Founder & CEO, The Outcall Spa", photo: "assets/testi-amber.jpg", years: "1",
  short: "I love working with Razaq! He takes the time to understand my needs and my customer journey, and is always able to find the most cost-effective way to carry out each project.",
  text: [
  "I love working with Razaq! He takes the time to understand my needs and my customer journey, and is always able to find the most cost-effective way to carry out each project.",
  "Razaq helped me with revamping my website, and the whole experience was efficient, thorough, and easy to communicate through from start to finish."]
}];


const Testimonials = () => {
  const [active, setActive] = useState(0);
  const [dir, setDir] = useState(1);
  const [expanded, setExpanded] = useState(false);
  const total = testimonials.length;
  const go = (i) => {setExpanded(false);setDir(i > active || active === total - 1 && i === 0 ? 1 : -1);setActive((i + total) % total);};
  React.useEffect(() => {
    if (expanded) return; // pause autoplay while reading expanded review
    const id = setInterval(() => {setDir(1);setActive((a) => (a + 1) % total);}, 7000);
    return () => clearInterval(id);
  }, [total, expanded]);
  const t = testimonials[active];
  const prev = testimonials[(active - 1 + total) % total];
  const next = testimonials[(active + 1) % total];
  return (
    <section className="section" id="testimonials">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 40px", alignItems: "center" }}>
          <span className="eyebrow">What clients say</span>
          <h2 style={{ textAlign: "center" }}>Kind words from people who care about results.</h2>
        </div>
        <div className="testi-slider">
          <article className="testi-peek left" aria-hidden="true" onClick={() => go((active - 1 + total) % total)}>
            <blockquote>{Array.isArray(prev.text) ? prev.text[0] : prev.text}</blockquote>
            <figcaption className="who">
              <span className="av"><img src={prev.photo} alt="" /></span>
              <span className="meta"><span className="name">{prev.name}</span><span className="co">{prev.co}</span></span>
            </figcaption>
          </article>
          <div className="testi-stage">
            <article key={active} className={"testi-main " + (dir > 0 ? "in-right" : "in-left")}>
              <div className="stars">★★★★★</div>
              <blockquote>
                {Array.isArray(t.text) ?
                expanded ?
                t.text.map((p, i) => <p key={i}>{p}</p>) :
                <p>{t.short || t.text[0]}</p> :
                <p>{t.text}</p>}
                {Array.isArray(t.text) &&
                <button
                  className={"read-more" + (expanded ? " open" : "")}
                  onClick={(e) => {e.stopPropagation();setExpanded((v) => !v);}}
                  aria-expanded={expanded}>
                    {expanded ? "Read less" : "Read more"}
                    <span className="rm-arrow" aria-hidden="true">↓</span>
                  </button>}
              </blockquote>
              <figcaption className="who">
                <span className="av lg"><img src={t.photo} alt="" /></span>
                <span className="meta"><span className="name">{t.name}</span><span className="co">{t.co}</span></span>
              </figcaption>
              <div className="testi-stats">
                <div className="stat">
                  <div className="stat-num">{t.years}+ year{t.years !== "1" ? "s" : ""}</div>
                  <div className="stat-label">Collaborating Time</div>
                </div>
                <div className="stat">
                  <div className="stat-num">5/5 <span className="stat-icon">★</span></div>
                  <div className="stat-label">Satisfaction</div>
                </div>
              </div>
            </article>
          </div>
          <article className="testi-peek right" aria-hidden="true" onClick={() => go((active + 1) % total)}>
            <blockquote>{Array.isArray(next.text) ? next.text[0] : next.text}</blockquote>
            <figcaption className="who">
              <span className="av"><img src={next.photo} alt="" /></span>
              <span className="meta"><span className="name">{next.name}</span><span className="co">{next.co}</span></span>
            </figcaption>
          </article>
        </div>
        <div className="testi-dots">
          {testimonials.map((_, i) =>
          <button key={i} className={"dot" + (i === active ? " on" : "")} onClick={() => go(i)} aria-label={`Testimonial ${i + 1}`} />
          )}
        </div>
      </div>
    </section>);

};


const About = () =>
<section className="about section" id="about">
    <div className="container">
      <div className="about-inner reveal">
        <div className="about-portrait"><img src="assets/razaq.png" alt="Razaq Atayee" /></div>
        <span className="eyebrow" style={{ marginBottom: 28 }}>About</span>
        <h2>I'm Razaq. I build websites for brands that take their websites seriously.</h2>
        <p>Seven years working with founders and creative directors across Malaysia, the US, UK, and Australia. WordPress, Shopify, fully custom builds, page speed, technical SEO, and full-site redesigns.</p>
        <p>I don't take on many clients at once. Every project gets my full attention, not a junior handoff.</p>
        <div className="signature"><span className="line" />Razaq Atayee<span className="line" /></div>
      </div>
    </div>
  </section>;


const tiers = [
{ name: "Audit", price: "1,200", currency: "USD", per: "one-off",
  desc: "A fixed-scope look at your current site.",
  items: ["90-min strategy call", "Heuristic + analytics audit", "Prioritised fix list", "30-day Slack follow-up"],
  cta: "Book the audit" },
{ name: "Landing page", price: "3,800", currency: "USD", per: "fixed",
  desc: "One page, end-to-end. Built for launches and paid traffic.",
  items: ["Strategy + copy direction", "High-fidelity design", "WordPress / Shopify / custom build", "2 rounds of revisions"],
  cta: "Start a landing page" },
{ name: "Full website", price: "9,800", currency: "USD", per: "from",
  desc: "The whole site. Brand-led and conversion-tuned.",
  items: ["Discovery + sitemap + copy", "Full design system in Figma", "WordPress / Shopify / custom build", "Animations, SEO, analytics", "30 days of post-launch care"],
  cta: "Start a full build", featured: true },
{ name: "Fractional partner", price: "4,400", currency: "USD", per: "per month",
  desc: "Embedded with your team for the long haul.",
  items: ["~30 hrs/month, flexible", "Direct Slack access", "Weekly working sessions", "Senior taste, predictable spend"],
  cta: "Talk about ongoing work" }];


const Pricing = () =>
<section className="section" id="pricing">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">Pricing</span>
          <h2>Plain numbers. No quote-on-request gymnastics.</h2>
        </div>
        <p style={{ color: "var(--text-muted)", maxWidth: "32ch", fontSize: 15 }}>
          Fixed-scope, fixed-price. Prices in USD. Based in Malaysia?{" "}
          <a href="mailto:razaq.works@gmail.com" style={{ color: "var(--text)", borderBottom: "1px solid var(--border-hi)" }}>Let's talk</a>.
        </p>
      </div>

      <div className="pricing-grid reveal-stagger">
        {tiers.map((t) =>
      <div key={t.name} className={"price reveal" + (t.featured ? " featured" : "")}>
            {t.featured && <span className="badge">Recommended</span>}
            <div className="tier-name">{t.name}</div>
            <div className="amount">
              <span className="currency">$</span>
              {t.price}
              <span className="per">&nbsp;{t.per}</span>
            </div>
            <p className="desc">{t.desc}</p>
            <hr />
            <ul>
              {t.items.map((i) =>
          <li key={i}><Icon name="check" size={14} /><span>{i}</span></li>
          )}
            </ul>
            <a className="price-cta" href="booking.html" target="_blank" rel="noreferrer">{t.cta}</a>
            {t.name === "Full website" &&
        <p className="price-note">
                Not sure if this fits your budget?{" "}
                <a href="#pricing">Start with the Audit.</a>
              </p>
        }
          </div>
      )}
      </div>
    </div>
  </section>;


const faqs = [
{ q: "How long does a full website build take?",
  a: "Four to six weeks, kickoff to launch. I commit to a date in the proposal and stick to it." },
{ q: "What platforms do you build on?",
  a: "WordPress, Shopify, and fully custom builds from scratch. For complex needs I'll bring in a trusted dev for headless setups or custom CMS integrations." },
{ q: "Can you handle copy as well?",
  a: "I lead copy direction and write home and product pages. For long-form, I partner with a writer I trust." },
{ q: "What if I already have a designer or in-house team?",
  a: "Even better. I plug in as the build partner or strategic second pair of eyes. The fractional package is built for this." },
{ q: "Why fixed-price and not hourly?",
  a: "Hourly punishes whoever is faster. You should know the cost before we start, and so should I." },
{ q: "Is this affordable for an early-stage startup?",
  a: "The Audit at $1,200 is the right starting point. Clear, prioritised, and creditable toward any follow-on project." },
{ q: "How do we get started?",
  a: "Book a free 20-minute call. No deck, no pitch, no follow-up if it isn't right." }];


const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px", alignItems: "center" }}>
          <span className="eyebrow">FAQ</span>
          <h2>The questions every founder asks me first.</h2>
        </div>
        <div className="faq-wrap">
          {faqs.map((f, i) =>
          <div key={i} className={"faq-item reveal" + (open === i ? " open" : "")}>
              <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-icon" aria-hidden="true" />
              </button>
              <div className="faq-a"><div><p>{f.a}</p></div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FootCTA = () =>
<section className="foot-cta section" id="contact">
    <div className="container">
      <span className="eyebrow" style={{ marginBottom: 28, display: "inline-flex" }}>Let's talk</span>
      <h2>Ready to make your website <em>actually</em> earn its place?</h2>
      <p>Twenty minutes. Straight to the point.</p>
      <a className="btn btn-primary btn-lg cta-with-avatar" href="booking.html" target="_blank" rel="noreferrer">
        <span className="cta-avatar lg"><img src="assets/razaq.png" alt="" /></span>
        Book a free 20-min call <span className="arr"><Icon name="arrow" size={16} /></span>
      </a>
      <div className="foot-meta">
        <a href="mailto:razaq.works@gmail.com">razaq.works@gmail.com</a>
        <span className="sep" />
        <a href="https://www.linkedin.com/in/abdulrazaq-atayee/" target="_blank" rel="noreferrer">LinkedIn</a>
        <span className="sep" />
        <span>Replies in &lt;24 hrs, Mon–Fri</span>
      </div>
    </div>
  </section>;


const Legal = () =>
<footer className="legal">
    <div className="container" style={{ display: "flex", justifyContent: "space-between", width: "100%", flexWrap: "wrap", gap: 12 }}>
      <span>© 2026 Razaq Atayee.</span>
      <span>Built by Razaq, of course.</span>
    </div>
  </footer>;


const clientLogos = [
{ src: "assets/logos/pto.webp", alt: "Pro Triathletes Organisation" },
{ src: "assets/logos/abitare.webp", alt: "Abitare", scale: 0.7 },
{ src: "assets/logos/within3.png", alt: "Within3" },
{ src: "assets/logos/nexus.svg", alt: "Nexus International School" },
{ src: "assets/logos/taylors-school.png", alt: "Taylor's Schools" },
{ src: "assets/logos/taylors-aism.png", alt: "Australian International School Malaysia" },
{ src: "assets/logos/bima.png", alt: "Bima Visuals", scale: 0.7 },
{ src: "assets/logos/deco2u.webp", alt: "deco2u", scale: 0.7 },
{ src: "assets/logos/juno.webp", alt: "Juno" }];


const LogoMarquee = () => {
  const loop = [...clientLogos, ...clientLogos];
  return (
    <section className="logo-marquee" aria-label="Selected clients">
      <div className="logo-track">
        {loop.map((l, i) =>
        <div key={i} className="logo-item">
            <img
            src={l.src}
            alt={l.alt}
            loading="lazy"
            style={l.scale ? { transform: `scale(${l.scale})` } : undefined} />
          
          </div>
        )}
      </div>
    </section>);

};

Object.assign(window, { Nav, Hero, Services, How, Work, Testimonials, About, Pricing, FAQ, FootCTA, Legal, LogoMarquee });