Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Hero</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      overflow-x: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #hero-root > div {
      position: relative;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Ken Burns */
    @keyframes hero-kb {
      0% { transform: scale(1); }
      100% { transform: scale(1.12); }
    }

    /* Word reveal */
    @keyframes hero-wr {
      from { opacity: 0; transform: translateY(100%); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hw { display: inline-block; opacity: 0; animation: hero-wr 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .hw1{animation-delay:0.5s} .hw2{animation-delay:0.62s}
    .hw3{animation-delay:0.78s}
    .hw4{animation-delay:0.92s} .hw5{animation-delay:1.02s} .hw6{animation-delay:1.12s}
    .hw7{animation-delay:1.22s} .hw8{animation-delay:1.32s}

    /* Slide from left */
    @keyframes hero-sl { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
    /* Fade up */
    @keyframes hero-fu { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
    /* Fade in */
    @keyframes hero-fi { from { opacity:0; } to { opacity:1; } }
    /* Line grow */
    @keyframes hero-lg { from { width:0; } to { width:60px; } }
    /* Corner grow */
    @keyframes hero-ch { from { width:0; } to { width:70px; } }
    @keyframes hero-cv { from { height:0; } to { height:70px; } }

    .h-sl { animation: hero-sl 0.7s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; }
    .h-fu { animation: hero-fu 0.7s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; }
    .h-fi { animation: hero-fi 0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; }
    .h-lg { animation: hero-lg 0.7s cubic-bezier(0.16,1,0.3,1) forwards; width:0; }
    .h-ch { animation: hero-ch 0.9s cubic-bezier(0.16,1,0.3,1) forwards; width:0; }
    .h-cv { animation: hero-cv 0.9s cubic-bezier(0.16,1,0.3,1) forwards; height:0; }

    /* Timing */
    .td-eye{animation-delay:0.2s}
    .td-line{animation-delay:1.45s}
    .td-sub{animation-delay:1.55s}
    .td-cta{animation-delay:1.7s}
    .td-boro{animation-delay:1.9s}
    .td-scroll{animation-delay:2.3s}
    .td-ghost{animation-delay:1.3s}
    .td-c1{animation-delay:0.7s}
    .td-c2{animation-delay:0.9s}

    /* Shimmer button */
    @keyframes h-shslide{to{transform:translate(calc(100cqw - 100%),0)}}
    @keyframes h-shspin{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}100%{transform:translateZ(0) rotate(360deg)}}
    .h-btn {
      --spread:90deg; --sc:rgba(184,151,58,0.6); --sp:3s; --cut:0.05em; --bg:transparent;
      position:relative; z-index:0; display:inline-flex; cursor:pointer;
      align-items:center; justify-content:center; overflow:hidden; white-space:nowrap;
      border:1px solid rgba(245,242,238,0.25); padding:16px 40px;
      color:#F5F2EE; background:var(--bg);
      transition:all 0.4s cubic-bezier(0.16,1,0.3,1); text-decoration:none;
    }
    .h-btn:hover { background:#F5F2EE; color:#1C1C1C; border-color:#F5F2EE; }
    .h-btn:active { transform:translateY(1px); }
    .h-btn:hover .h-sp { opacity:0; }
    .h-btn:hover .h-hl { opacity:0; }
    .h-sp { position:absolute; inset:0; overflow:visible; z-index:-30; filter:blur(2px); transition:opacity 0.4s ease; }
    .h-spi { position:absolute; inset:0; height:100%; aspect-ratio:1; animation:h-shslide var(--sp) ease-in-out infinite alternate; }
    .h-spg { position:absolute; inset:-100%; width:auto; background:conic-gradient(from calc(270deg-(var(--spread)*0.5)),transparent 0,var(--sc) var(--spread),transparent var(--spread)); animation:h-shspin calc(var(--sp)*2) linear infinite; }
    .h-hl { position:absolute; inset:0; box-shadow:inset 0 -8px 10px rgba(255,255,255,0.08); transition:all 0.4s ease; }
    .h-btn:hover .h-hl { box-shadow:none; }
    .h-bd { position:absolute; z-index:-20; inset:var(--cut); background:var(--bg); }
    .h-lb { position:relative; z-index:10; font-family:'Inter',sans-serif; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; }

    @media(max-width:639px) {
      .h-btn { padding:14px 24px; width:100%; justify-content:center; }
      .h-lb { font-size:10px; letter-spacing:0.1em; }
      .h-c2 { width:100%; justify-content:center; }
    }

    .h-c2 {
      display:inline-flex; align-items:center; gap:6px; padding:14px 28px;
      border:1px solid rgba(184,151,58,0.3); color:#B8973A;
      font-family:'Inter',sans-serif; font-size:11px; font-weight:500;
      text-transform:uppercase; letter-spacing:0.14em;
      transition:all 0.4s cubic-bezier(0.16,1,0.3,1); text-decoration:none;
    }
    .h-c2:hover { background:#B8973A; color:#1C1C1C; border-color:#B8973A; }
    .h-c2:active { transform:translateY(1px); }
    .h-c2 .h-ar { transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .h-c2:hover .h-ar { transform:translateX(3px); }

    .h-bo { transition:opacity 0.3s ease; }
    .h-bo:hover { opacity:0.7 !important; }

    @keyframes h-bounce { 0%,100%{transform:translateY(0);opacity:0.4} 50%{transform:translateY(6px);opacity:0.8} }
    .h-sa { animation:h-bounce 2s ease-in-out infinite; }
  </style>
</head>
<body>
  <div id="hero-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    function Btn({children, href}) {
      return (
        <a href={href} className="h-btn">
          <div className="h-sp"><div className="h-spi"><div className="h-spg"/></div></div>
          <span className="h-lb">{children}</span>
          <div className="h-hl"/><div className="h-bd"/>
        </a>
      );
    }

    function Hero() {
      var ghost = useRef(null);
      var hero = useRef(null);

      useEffect(function() {
        function onScroll() {
          if (!ghost.current || !hero.current) return;
          var top = hero.current.getBoundingClientRect().top;
          var d = Math.max(0, -top);
          ghost.current.style.transform = 'translateY(' + (d * 0.35) + 'px)';
        }
        window.addEventListener('scroll', onScroll, {passive: true});
        return function() { window.removeEventListener('scroll', onScroll); };
      }, []);

      var bo = ['Kensington','Chelsea','Mayfair','Belgravia','Notting Hill'];

      return (
        <div ref={hero} className="relative min-h-screen flex flex-col justify-end overflow-hidden" style={{background:'#1C1C1C'}}>

          {/* Background with Ken Burns */}
          <div className="absolute inset-0 overflow-hidden">
            <div style={{
              position:'absolute', inset:0,
              backgroundImage:'url(https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1800&q=80&auto=format&fit=crop)',
              backgroundSize:'cover', backgroundPosition:'center 35%',
              opacity:0.3,
              animation:'hero-kb 20s ease-in-out alternate infinite',
            }}/>
          </div>

          {/* Overlay */}
          <div className="absolute inset-0" style={{
            background:'linear-gradient(180deg, rgba(28,28,28,0.5) 0%, rgba(28,28,28,0.35) 30%, rgba(28,28,28,0.5) 60%, rgba(28,28,28,0.93) 100%)',
          }}/>

          {/* Ghost text — parallax */}
          <div ref={ghost} className="h-fi td-ghost pointer-events-none select-none"
               style={{position:'absolute', top:'42%', left:0, right:0, textAlign:'center', zIndex:1}}>
            <span style={{
              fontFamily:"'Cormorant Garamond',serif",
              fontSize:'clamp(3.2rem,13vw,14rem)', fontWeight:300,
              color:'rgba(245,242,238,0.06)', textTransform:'uppercase',
              letterSpacing:'0.05em', whiteSpace:'nowrap', lineHeight:1,
              display:'inline-block',
            }}>AQD Group</span>
          </div>

          {/* Gold corner — top left */}
          <div className="absolute pointer-events-none" style={{top:'20px', left:'16px', zIndex:2}}>
            <div className="h-ch td-c1" style={{height:'1px', background:'rgba(184,151,58,0.2)'}}/>
            <div className="h-cv td-c2" style={{width:'1px', background:'rgba(184,151,58,0.2)'}}/>
          </div>
          {/* Gold corner — bottom right */}
          <div className="absolute pointer-events-none" style={{bottom:'20px', right:'16px', zIndex:2, display:'flex', flexDirection:'column', alignItems:'flex-end'}}>
            <div className="h-ch td-c1" style={{height:'1px', background:'rgba(184,151,58,0.15)'}}/>
            <div className="h-cv td-c2" style={{width:'1px', background:'rgba(184,151,58,0.15)', alignSelf:'flex-end'}}/>
          </div>

          {/* Content */}
          <div className="relative z-10 max-w-6xl mx-auto w-full px-5 sm:px-8 pb-16 sm:pb-20 lg:pb-24 pt-28 sm:pt-36">

            {/* Eyebrow */}
            <p className="h-sl td-eye text-[11px] sm:text-xs font-medium uppercase tracking-[0.18em] mb-10 sm:mb-12 text-center sm:text-left"
               style={{color:'#B8973A'}}>
              London's Premium Decorators
            </p>

            {/* Headline — word by word */}
            <h1 style={{fontFamily:"'Cormorant Garamond',serif", fontWeight:300, fontSize:'clamp(2.6rem,7.5vw,6.5rem)', lineHeight:1, letterSpacing:'-0.03em', color:'#F5F2EE', textAlign:'left'}}>
              <span className="block overflow-hidden" style={{paddingBottom:'4px'}}>
                <span className="hw hw1" style={{marginRight:'0.28em'}}>Your</span>
                <span className="hw hw2" style={{marginRight:'0.28em'}}>property</span>
              </span>
              <span className="block overflow-hidden" style={{paddingBottom:'4px'}}>
                <span className="hw hw3" style={{marginRight:'0.28em'}}>deserves</span>
              </span>
              <span className="block overflow-hidden" style={{paddingBottom:'4px'}}>
                <span className="hw hw4" style={{marginRight:'0.28em', color:'#B8973A', fontStyle:'italic'}}>more</span>
                <span className="hw hw5" style={{marginRight:'0.28em'}}>than</span>
                <span className="hw hw6" style={{marginRight:'0.28em'}}>a</span>
              </span>
              <span className="block overflow-hidden" style={{paddingBottom:'4px'}}>
                <span className="hw hw7" style={{marginRight:'0.28em'}}>paint</span>
                <span className="hw hw8">job.</span>
              </span>
            </h1>

            {/* Gold rule */}
            <div className="h-lg td-line h-px mx-auto sm:mx-0 my-8 sm:my-10" style={{background:'#B8973A'}}/>

            {/* Sub */}
            <p className="h-fu td-sub text-[15px] sm:text-lg font-light max-w-[480px] mb-10 sm:mb-12 text-center sm:text-left mx-auto sm:mx-0"
               style={{color:'rgba(245,242,238,0.5)', lineHeight:1.75}}>
              Craftsmanship, discretion, and a standard of finish that matches London's finest addresses. Not a promise — a requirement we hold ourselves to.
            </p>

            {/* CTAs */}
            <div className="h-fu td-cta flex flex-col sm:flex-row items-center gap-3 sm:gap-5 mb-12 sm:mb-14">
              <Btn href="#quote">Request Your Complimentary Quote</Btn>
              <a href="#portfolio" className="h-c2">View Our Work <span className="h-ar">→</span></a>
            </div>

            {/* Boroughs */}
            <div className="h-fi td-boro text-center sm:text-left">
              <p className="text-[10px] font-medium uppercase tracking-[0.18em] mb-2" style={{color:'#FAFAFA', opacity:0.45}}>Serving</p>
              <div className="flex flex-wrap items-center justify-center sm:justify-start">
                {bo.map(function(b, i) {
                  return (
                    <span key={b} className="h-bo text-[10px] font-normal uppercase tracking-[0.18em] py-1 px-2 sm:px-4"
                          style={{color:'#FAFAFA', opacity:0.4, borderRight: i < bo.length - 1 ? '1px solid rgba(250,250,250,0.12)' : 'none'}}>
                      {b}
                    </span>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Scroll */}
          <div className="h-fi td-scroll absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 pointer-events-none z-10">
            <span className="text-[9px] font-medium uppercase tracking-[0.2em]" style={{color:'rgba(250,250,250,0.2)'}}>Scroll</span>
            <svg className="h-sa" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="rgba(250,250,250,0.25)" strokeWidth="1.5">
              <path d="M4 6l4 4 4-4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      );
    }

    function App() { return React.createElement(Hero); }
    ReactDOM.render(React.createElement(App), document.getElementById('hero-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD CTA</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #cta-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}
    .cta-dot-grid{background-image:radial-gradient(circle,rgba(245,242,238,0.03) 1px,transparent 1px);background-size:28px 28px}
    @keyframes cta-shimmer-slide{to{transform:translate(calc(100cqw - 100%),0)}}
    @keyframes cta-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}100%{transform:translateZ(0) rotate(360deg)}}
    .cta-btn{--spread:90deg;--shimmer-color:rgba(245,242,238,0.5);--radius:0px;--speed:3s;--cut:0.05em;--bg:#B8973A;position:relative;z-index:0;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border:1px solid #B8973A;padding:18px 48px;color:#1C1C1C;background:var(--bg);border-radius:var(--radius);transform:translateZ(0);transition:all .4s cubic-bezier(.16,1,.3,1);text-decoration:none}
    .cta-btn:hover{background:#F5F2EE;color:#1C1C1C;border-color:#F5F2EE}
    .cta-btn:active{transform:translateY(1px)}
    .cta-btn:hover .cta-spark{opacity:0}
    .cta-spark{position:absolute;inset:0;overflow:visible;z-index:-30;filter:blur(2px);transition:opacity .4s ease}
    .cta-spark-inner{position:absolute;inset:0;height:100%;aspect-ratio:1;animation:cta-shimmer-slide var(--speed) ease-in-out infinite alternate}
    .cta-spark-grad{position:absolute;inset:-100%;width:auto;rotate:0;background:conic-gradient(from calc(270deg - (var(--spread)*0.5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:cta-spin-around calc(var(--speed)*2) linear infinite}
    .cta-btn-label{position:relative;z-index:10;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.14em}
    .cta-backdrop{position:absolute;z-index:-20;inset:var(--cut);background:var(--bg);border-radius:var(--radius)}
    @media(max-width:639px){.cta-btn{padding:14px 28px;width:100%;max-width:340px}.cta-btn-label{font-size:10px;letter-spacing:0.12em}}
  </style>
</head>
<body>
  <div id="cta-root"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
    function FinalCTA(){
      const [show,setShow]=useState(false);
      useEffect(()=>{const t=setTimeout(()=>setShow(true),100);return()=>clearTimeout(t)},[]);
      return(
        <div style={{background:'#1C1C1C'}} className="relative overflow-hidden">
          <div className="cta-dot-grid absolute inset-0 pointer-events-none"/>
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px',position:'relative',zIndex:10}}><div style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)',opacity:show?1:0,transition:'opacity .8s ease'}}/></div>
          <div className="pointer-events-none select-none" style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',zIndex:0}}>
            <span style={{fontFamily:"'Cormorant Garamond',serif",fontSize:'clamp(2.5rem,8vw,8rem)',fontWeight:300,color:'rgba(245,242,238,0.03)',textTransform:'uppercase',letterSpacing:'0.06em',whiteSpace:'nowrap',lineHeight:1,display:'block',textAlign:'center'}}>Excellence</span>
          </div>
          <div className="relative z-10 max-w-6xl mx-auto px-5 sm:px-8 py-20 sm:py-28 lg:py-36 text-center">
            <div style={{width:'60px',height:'1px',background:'#B8973A',margin:'0 auto',marginBottom:'40px',opacity:show?1:0,transform:show?'scaleX(1)':'scaleX(0)',transformOrigin:'center',transition:'all .8s cubic-bezier(.16,1,.3,1)'}}/>
            <h2 className="font-display font-light mx-auto" style={{fontSize:'clamp(2rem,5vw,3.5rem)',lineHeight:1.1,letterSpacing:'-0.02em',color:'#F5F2EE',maxWidth:'18ch',opacity:show?1:0,transform:show?'translateY(0)':'translateY(20px)',transition:'all .7s cubic-bezier(.16,1,.3,1) .1s'}}>
              Your property deserves the standard AQD delivers.
            </h2>
            <p className="text-[15px] font-light mx-auto mt-5 mb-10 sm:mb-12" style={{color:'rgba(245,242,238,0.5)',lineHeight:1.7,maxWidth:'440px',opacity:show?1:0,transform:show?'translateY(0)':'translateY(16px)',transition:'all .7s cubic-bezier(.16,1,.3,1) .2s'}}>
              We offer a complimentary, no-obligation site visit to every prospective client. Let us visit your property.
            </p>
            <div className="flex justify-center" style={{opacity:show?1:0,transform:show?'translateY(0)':'translateY(16px)',transition:'all .7s cubic-bezier(.16,1,.3,1) .3s'}}>
              <a href="#quote" className="cta-btn">
                <div className="cta-spark"><div className="cta-spark-inner"><div className="cta-spark-grad"/></div></div>
                <span className="cta-btn-label">Request Your Complimentary Quote</span>
                <div className="cta-backdrop"/>
              </a>
            </div>
            <p className="text-xs font-light mt-6" style={{color:'#FAFAFA',opacity:show?0.6:0,transition:'opacity .8s ease .5s'}}>No commitment required. We come to you.</p>
          </div>
        </div>
      );
    }

    function App(){return <FinalCTA/>}
    ReactDOM.render(<App/>,document.getElementById('cta-root'));
  </script>
</body>
</html>

Handler 24

ProspectPilot provides a 24/7 AI sales agent that operates within email and, optionally, SMS or Messenger to handle sales interactions, and the business is just starting out in the United Kingdom.