← back to Abramsagency
public/index.html
588 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Abrams Agency — AI, Web, Commerce & Growth, built and run for you</title>
<meta name="description" content="Abrams Agency builds and operates AI agents, custom sites, e-commerce, and marketing automation. See how we built Designer Wallcoverings — a full digital operation, run autonomously.">
<meta property="og:title" content="Abrams Agency — we build and run your whole digital operation">
<meta property="og:description" content="AI agents, custom web & apps, Shopify commerce, and growth marketing. Flagship case study: Designer Wallcoverings.">
<meta property="og:type" content="website">
<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=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#05060a; --ink:#f4f6ff; --muted:#9aa3c0; --line:rgba(255,255,255,.12);
--glass:rgba(20,24,40,.42); --glass-2:rgba(30,36,60,.55);
--a1:#7c5cff; --a2:#22d3ee; --a3:#ff5ca8; --a4:#4ade80;
--pill:#0a0c14;
--r:22px; --maxw:1180px;
--fluid-h1:clamp(2.6rem,9vw,6.2rem);
--fluid-h2:clamp(1.9rem,5.2vw,3.4rem);
--fluid-lead:clamp(1.05rem,2.7vw,1.4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Fraunces,Georgia,serif;line-height:1.02;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ---------- liquid animated mesh background ---------- */
.mesh{position:fixed;inset:-20%;z-index:0;filter:blur(60px) saturate(140%);opacity:.55;pointer-events:none}
.mesh span{position:absolute;width:52vw;height:52vw;border-radius:50%;mix-blend-mode:screen;animation:float 22s ease-in-out infinite}
.mesh .b1{background:radial-gradient(circle,#7c5cff,transparent 60%);top:-10%;left:-8%}
.mesh .b2{background:radial-gradient(circle,#22d3ee,transparent 60%);top:20%;right:-14%;animation-duration:28s}
.mesh .b3{background:radial-gradient(circle,#ff5ca8,transparent 60%);bottom:-16%;left:18%;animation-duration:25s}
.mesh .b4{background:radial-gradient(circle,#4ade80,transparent 62%);bottom:6%;right:8%;animation-duration:31s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-5%) scale(1.12)}66%{transform:translate(-5%,6%) scale(.94)}}
@media(prefers-reduced-motion:reduce){.mesh span{animation:none}}
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* ---------- glass ---------- */
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);border-radius:var(--r)}
/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50}
nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px auto;max-width:var(--maxw);padding:10px 16px}
.logo{display:flex;align-items:center;gap:10px;font-family:Fraunces;font-weight:900;font-size:1.25rem;letter-spacing:-.03em}
.logo .dot{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 0deg,#ff5ca8,#7c5cff,#22d3ee,#4ade80,#ff5ca8);box-shadow:0 0 18px rgba(124,92,255,.7)}
.navlinks{display:flex;gap:6px;align-items:center}
.navlinks a{color:var(--muted);font-weight:500;font-size:.94rem;padding:8px 12px;border-radius:12px;transition:.2s}
.navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.pill{background:linear-gradient(135deg,var(--a1),var(--a3));color:#fff;font-weight:600;padding:11px 20px;border-radius:999px;box-shadow:0 8px 30px rgba(124,92,255,.45);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,92,168,.5)}
.burger{display:none;flex-direction:column;gap:5px;padding:12px;background:none;border:0;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- hero ---------- */
.hero{padding:clamp(48px,10vw,120px) 0 clamp(40px,7vw,80px);text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 16px;border-radius:999px;margin-bottom:26px}
.eyebrow b{color:var(--a2);font-weight:700}
h1.hero-title{font-size:var(--fluid-h1);font-weight:900;max-width:16ch;margin:0 auto}
h1 .grad{background:linear-gradient(120deg,#7c5cff,#22d3ee 40%,#ff5ca8 75%,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:var(--fluid-lead);color:var(--muted);max-width:52ch;margin:24px auto 0}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn-ghost{padding:13px 24px;border-radius:999px;border:1px solid var(--line);font-weight:600;transition:.2s}
.btn-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
.stats{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:52px}
.stat b{font-family:Fraunces;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;display:block;background:linear-gradient(120deg,#22d3ee,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.82rem;letter-spacing:.04em}
/* ---------- sections ---------- */
section{padding:clamp(56px,9vw,110px) 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head .kicker{color:var(--a2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.sec-head h2{font-size:var(--fluid-h2);font-weight:900;margin:12px 0}
.sec-head p{color:var(--muted);font-size:1.06rem}
/* ---------- services (4 pillars) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pillar{padding:26px}
.pillar .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.p1 .ic{background:linear-gradient(135deg,#7c5cff,#a78bfa)} .p1:hover{border-color:#7c5cff}
.p2 .ic{background:linear-gradient(135deg,#22d3ee,#38bdf8)} .p2:hover{border-color:#22d3ee}
.p3 .ic{background:linear-gradient(135deg,#ff5ca8,#fb7185)} .p3:hover{border-color:#ff5ca8}
.p4 .ic{background:linear-gradient(135deg,#4ade80,#86efac)} .p4:hover{border-color:#4ade80}
.pillar h3{font-size:1.35rem;font-weight:600;margin-bottom:10px}
.pillar>p{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.pillar ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pillar li{font-size:.9rem;color:#cbd2ea;display:flex;gap:9px;align-items:flex-start}
.pillar li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;margin-top:8px;flex:0 0 auto}
/* ---------- more work strip ---------- */
.morework{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mw{display:block;padding:22px}
.mw .mw-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--a2);font-weight:700;margin-bottom:10px}
.mw h3{font-size:1.2rem;font-weight:600;margin-bottom:8px}
.mw>p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.mw .chips{display:flex;gap:8px;flex-wrap:wrap}
.mw .chips span{font-size:.72rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:#cbd2ea}
/* ---------- case study ---------- */
.case{position:relative}
.case-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;font-size:.82rem;color:var(--a4);margin-bottom:18px}
.case-badge .live{width:8px;height:8px;border-radius:50%;background:var(--a4);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.case-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start}
.case-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.metric{padding:22px}
.metric b{font-family:Fraunces;font-size:clamp(1.7rem,4.6vw,2.5rem);font-weight:900;display:block}
.metric.m1 b{color:#7c5cff}.metric.m2 b{color:#22d3ee}.metric.m3 b{color:#ff5ca8}.metric.m4 b{color:#4ade80}
.metric span{color:var(--muted);font-size:.84rem}
.built{padding:26px}
.built h3{font-size:1.3rem;font-weight:600;margin-bottom:6px}
.built .sub{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.built .row{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.built .row .tag{font-size:1.35rem;flex:0 0 auto}
.built .row b{font-weight:600;font-size:.98rem;display:block}
.built .row small{color:var(--muted);font-size:.85rem}
/* ---------- live color-wheel demo ---------- */
.demo{margin-top:26px;padding:26px}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.demo-head h3{font-size:1.35rem;font-weight:600}
.demo-head p{color:var(--muted);font-size:.9rem;max-width:46ch}
.demo-body{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start}
.wheel-col{display:flex;flex-direction:column;align-items:center;gap:14px}
#wheel{touch-action:none;cursor:grab;border-radius:50%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#wheel:active{cursor:grabbing}
.wheel-read{font-size:.82rem;color:var(--muted);text-align:center}
.wheel-read b{color:var(--ink);font-family:Fraunces;font-size:1.1rem}
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ctrl{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.ctrl select,.ctrl input[type=range]{accent-color:var(--a1)}
.ctrl select{background:var(--pill);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:.85rem}
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(var(--cols,4),1fr)}
.swatch{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.swatch:hover{transform:scale(1.06);z-index:3;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.swatch .lbl{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:.62rem;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:#fff;opacity:0;transition:.2s}
.swatch:hover .lbl{opacity:1}
/* ---------- founder / about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center}
.mono{aspect-ratio:1;max-width:300px;margin:0 auto;padding:28px;display:grid;place-items:center;text-align:center}
.mono .ini{font-family:Fraunces;font-weight:900;font-size:clamp(3.4rem,13vw,6rem);line-height:1;background:linear-gradient(120deg,#7c5cff,#22d3ee 45%,#ff5ca8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono .cred{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.mono .cred span{font-size:.72rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:#cbd2ea}
.about-copy .role{color:var(--a2);font-weight:600;margin:2px 0 16px}
.about-copy p{color:#cbd2ea;font-size:1.02rem;margin-bottom:14px}
.about-copy p b{color:var(--ink)}
@media(max-width:860px){.about{grid-template-columns:1fr}}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.contact-copy h2{font-size:var(--fluid-h2);font-weight:900;margin-bottom:14px}
.contact-copy p{color:var(--muted);font-size:1.05rem;margin-bottom:22px}
.taplinks{display:flex;flex-direction:column;gap:12px}
.tap{display:flex;align-items:center;gap:14px;padding:16px 18px}
.tap .ic{font-size:1.4rem}
.tap b{display:block;font-weight:600}
.tap small{color:var(--muted)}
form.lead{padding:26px;display:flex;flex-direction:column;gap:14px}
form.lead label{font-size:.82rem;color:var(--muted)}
form.lead input,form.lead textarea,form.lead select{width:100%;background:var(--pill);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;transition:border-color .2s}
form.lead input:focus,form.lead textarea:focus,form.lead select:focus{outline:none;border-color:var(--a1)}
form.lead textarea{min-height:96px;resize:vertical}
form.lead button{margin-top:6px;border:0;cursor:pointer;font-size:1rem}
.form-msg{font-size:.9rem;text-align:center;min-height:1.2em}
.form-msg.ok{color:var(--a4)} .form-msg.err{color:#fb7185}
footer{padding:44px 0 60px;text-align:center;color:var(--muted);font-size:.85rem}
footer .logo{justify-content:center;margin-bottom:14px}
/* reveal */
.reveal{opacity:0;transition:opacity .7s ease}
.reveal:not(.lg){transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal:not(.lg).in{transform:none}
.reveal.in{opacity:1}
/* ---------- LIQUID GLASS (movement) ---------- */
.lg{position:relative;overflow:hidden;isolation:isolate;--ey:0px;
transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(calc(var(--ty,0px) + var(--ey)));
transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s;will-change:transform}
.lg:hover{--ty:-6px}
.notilt:hover{--ty:0px}
.reveal.lg{--ey:26px}
.reveal.lg.in{--ey:0px}
/* refraction glare that follows the cursor */
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 55%);
opacity:0;transition:opacity .4s}
.lg:hover::before{opacity:1}
/* light that sweeps across the glass — always-on + staggered = liquid motion */
.lg::after{content:"";position:absolute;top:-60%;left:0;width:45%;height:220%;pointer-events:none;z-index:1;
mix-blend-mode:soft-light;
background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.25) 52%,transparent 65%);
transform:translateX(-160%) rotate(8deg);
animation:sheen 7s cubic-bezier(.6,0,.4,1) infinite;animation-delay:calc(var(--i,0)*1.15s)}
@keyframes sheen{0%{transform:translateX(-160%) rotate(8deg)}14%{transform:translateX(340%) rotate(8deg)}100%{transform:translateX(340%) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.lg::after{display:none}.lg{transform:none!important;transition:opacity .5s}}
/* ---------- responsive / mobile-forward ---------- */
@media(max-width:860px){
.case-grid,.contact-grid{grid-template-columns:1fr}
.demo-body{grid-template-columns:1fr}
.wheel-col{flex-direction:row;justify-content:center;flex-wrap:wrap}
}
@media(max-width:680px){
.navlinks{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:stretch;gap:2px;padding:84px 20px 24px;background:rgba(8,10,18,.92);backdrop-filter:blur(20px);transform:translateY(-105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);height:auto;border-bottom:1px solid var(--line)}
.navlinks.open{transform:none}
.navlinks a{padding:14px;font-size:1.05rem;border-radius:12px}
.navlinks .pill{text-align:center;margin-top:8px}
.burger{display:flex;z-index:60}
.case-metrics{grid-template-columns:1fr 1fr}
.stats{gap:18px}
}
</style>
</head>
<body>
<div class="mesh" aria-hidden="true"><span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span></div>
<header>
<nav class="glass">
<a class="logo" href="#top"><span class="dot"></span>Abrams<span style="opacity:.6">Agency</span></a>
<button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
<div class="navlinks glass" id="navlinks" style="background:transparent;border:0;backdrop-filter:none">
<a href="#services">Services</a>
<a href="#work">Our Work</a>
<a href="#founder">Founder</a>
<a href="#demo">Live Demo</a>
<a class="pill" href="#contact">Start a project</a>
</div>
</nav>
</header>
<main id="top" class="wrap">
<!-- HERO -->
<section class="hero">
<span class="eyebrow glass">A one-agency digital operation · <b>we build it AND run it</b></span>
<h1 class="hero-title">We build the <span class="grad">machine</span> that runs your business.</h1>
<p class="lead">AI agents, custom sites & apps, e-commerce, and growth marketing — designed, shipped, and operated for you. Not a deck. A working system that ships every day.</p>
<div class="hero-cta">
<a class="pill" href="#contact">Start a project →</a>
<a class="btn-ghost" href="#work">See what we built for a client</a>
</div>
<div class="stats">
<div class="stat reveal"><b data-count="209">0</b><span>SITES OPERATED</span></div>
<div class="stat reveal"><b data-count="100" data-suffix="+">0</b><span>AI AGENTS RUNNING</span></div>
<div class="stat reveal"><b data-count="60" data-suffix="k+">0</b><span>PRODUCTS MANAGED</span></div>
<div class="stat reveal"><b data-count="24" data-suffix="/7">0</b><span>AUTONOMOUS OPS</span></div>
</div>
</section>
<!-- SERVICES: all 4 pillars -->
<section id="services">
<div class="sec-head reveal">
<div class="kicker">What we do</div>
<h2>Four things, done end-to-end.</h2>
<p>Most agencies hand you files and walk away. We build the system and keep it running — so the work compounds instead of decaying.</p>
</div>
<div class="pillars">
<div class="pillar glass lg p1 reveal">
<div class="ic">🤖</div>
<h3>AI Agents & Automation</h3>
<p>Autonomous software that does the repetitive work — 24/7, at a fraction of headcount cost.</p>
<ul>
<li>Custom AI agents & multi-agent fleets</li>
<li>Workflow & back-office automation</li>
<li>Data pipelines, scraping & enrichment</li>
<li>LLM apps, RAG & internal copilots</li>
</ul>
</div>
<div class="pillar glass lg p2 reveal">
<div class="ic">🧩</div>
<h3>Full-Service Digital</h3>
<p>Your entire online operation under one roof — strategy, build, and day-to-day running.</p>
<ul>
<li>End-to-end product & platform builds</li>
<li>Directories & data platforms</li>
<li>Analytics, dashboards & reporting</li>
<li>Ongoing operations & support</li>
</ul>
</div>
<div class="pillar glass lg p3 reveal">
<div class="ic">🛍️</div>
<h3>Web & E-commerce</h3>
<p>Beautiful, blazing-fast sites and stores engineered to convert on mobile first.</p>
<ul>
<li>Custom websites & landing pages</li>
<li>Shopify & headless commerce</li>
<li>Product catalogs, search & merchandising</li>
<li>Performance, SEO & Core Web Vitals</li>
</ul>
</div>
<div class="pillar glass lg p4 reveal">
<div class="ic">📈</div>
<h3>Growth & Marketing</h3>
<p>Get found, followed, and booked — content and campaigns run like clockwork.</p>
<ul>
<li>Social (Instagram, TikTok, LinkedIn)</li>
<li>SEO & AI-search (AEO/GEO)</li>
<li>Video, reels & brand creative</li>
<li>Email, paid ads & funnels</li>
</ul>
</div>
</div>
</section>
<!-- CASE STUDY: Designer Wallcoverings -->
<section id="work" class="case">
<div class="sec-head reveal">
<div class="kicker">Flagship case study</div>
<span class="case-badge glass"><span class="live"></span>LIVE & RUNNING TODAY</span>
<h2>Designer Wallcoverings</h2>
<p>A luxury wallcovering brand with 60,000+ products across 100+ vendors. We built — and now autonomously operate — its entire digital business: the store, a fleet of sister sites, the data pipelines, and the marketing.</p>
</div>
<div class="case-grid">
<div class="case-metrics reveal">
<div class="metric glass lg m1"><b>60k+</b><span>Products catalogued, priced & live</span></div>
<div class="metric glass lg m2"><b>209</b><span>Sister microsites operated</span></div>
<div class="metric glass lg m3"><b>100+</b><span>Vendor scrapers feeding the catalog</span></div>
<div class="metric glass lg m4"><b>24/7</b><span>AI agents running the back office</span></div>
</div>
<div class="built glass lg reveal">
<h3>What we built for them</h3>
<div class="sub">A complete, self-running commerce operation.</div>
<div class="row"><span class="tag">🛒</span><div><b>The Shopify storefront</b><small>60k+ SKUs with automated pricing, metafields, and a catalog kept fresh nightly.</small></div></div>
<div class="row"><span class="tag">🕸️</span><div><b>209 sister & vendor microsites</b><small>Per-line editorial storefronts (cork, silk, linen, grasscloth…) each with its own identity.</small></div></div>
<div class="row"><span class="tag">🎨</span><div><b>Signature grid controls</b><small>Color-wheel sort, density slider, list/grid toggle & per-field filters — the exact UI demoed below.</small></div></div>
<div class="row"><span class="tag">🤖</span><div><b>An AI agent fleet</b><small>Scraping, enrichment, SKU normalization, catalog QA & uptime canaries — running unattended.</small></div></div>
<div class="row"><span class="tag">📣</span><div><b>Marketing automation</b><small>Instagram, TikTok & LinkedIn content, SEO, Google Merchant feed & room-render creative.</small></div></div>
<div class="row"><span class="tag">🗂️</span><div><b>Directories & tools</b><small>Installer directories, quote flows, and internal curation viewers for the team.</small></div></div>
</div>
</div>
<!-- LIVE COLOR-WHEEL DEMO -->
<div id="demo" class="demo glass lg notilt reveal">
<div class="demo-head">
<h3>🎨 The color wheel, live</h3>
<p>The same color-sort we shipped for Designer Wallcoverings. <b style="color:var(--ink)">Drag the wheel</b> to spin the grid to any hue — plus sort & density controls, all dogfooded right here.</p>
</div>
<div class="demo-body">
<div class="wheel-col">
<canvas id="wheel" width="200" height="200" role="slider" aria-label="Color hue selector"></canvas>
<div class="wheel-read">Anchor hue<br><b id="hueread">0°</b></div>
</div>
<div>
<div class="controls">
<label class="ctrl">Sort
<select id="sortsel">
<option value="wheel">Color wheel (from anchor)</option>
<option value="light">Light → Dark</option>
<option value="dark">Dark → Light</option>
<option value="name">Name A→Z</option>
</select>
</label>
<label class="ctrl">Density
<input type="range" id="density" min="3" max="8" value="5">
</label>
</div>
<div class="pgrid" id="pgrid"></div>
</div>
</div>
</div>
<div class="sec-head reveal" style="margin:64px 0 26px">
<div class="kicker">More of our work</div>
<h2 style="font-size:clamp(1.5rem,4vw,2.3rem)">Built & run — not just designed.</h2>
<p>A few more systems we've shipped and operate. Yours could be next.</p>
</div>
<div class="morework">
<a class="mw glass lg" href="#contact">
<div class="mw-tag">AI · E-commerce</div>
<h3>Wallpaper's Back</h3>
<p>An AI-generated original-wallpaper storefront — designs created, quality-gated, and merchandised automatically, then sold direct.</p>
<div class="chips"><span>Live storefront</span><span>Auto-generated catalog</span><span>Print-on-demand</span></div>
</a>
<a class="mw glass lg" href="#contact">
<div class="mw-tag">Data · Directories</div>
<h3>Vertical Directories</h3>
<p>Searchable professional directories (legal, medical, trades) built from public records — with claim flows, reviews, and lead capture.</p>
<div class="chips"><span>100k+ listings</span><span>Compliance-checked</span><span>Self-serve claims</span></div>
</a>
<a class="mw glass lg" href="#contact">
<div class="mw-tag">Data · Platforms</div>
<h3>Real-Estate Intelligence</h3>
<p>A market-explorer over millions of property & sales records — turning raw public data into a searchable, news-driven deal feed.</p>
<div class="chips"><span>Millions of records</span><span>Live deal feed</span><span>Map + search</span></div>
</a>
</div>
</section>
<!-- FOUNDER -->
<section id="founder">
<div class="about">
<div class="mono glass lg notilt reveal">
<div>
<div class="ini">SA</div>
<div class="cred"><span>Sales & revenue</span><span>Full-stack dev</span><span>AI & automation</span></div>
</div>
</div>
<div class="about-copy reveal">
<div class="kicker" style="color:var(--a2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem">The founder</div>
<h2 style="font-size:clamp(1.9rem,5vw,3rem);font-weight:900">A salesperson who learned to build — with AI.</h2>
<div class="role">Steve Abrams · Founder</div>
<p>Abrams Agency comes from a combination that rarely lives in one person: a career in <b>sales</b> — building and running Designer Wallcoverings, a luxury wallcovering business — and a relentless obsession with <b>building the software that runs it</b>.</p>
<p>In his first <b>10 months building hand-in-hand with AI</b>, Steve shipped over <b>600 projects</b> — 370+ custom AI skills, 90 autonomous agents, 100+ live services, and 7 iOS apps — across more than <b>30,000 commits</b>. Not as a lifelong coder, but as an operator who learned to make software do the work.</p>
<p>That's the entire thesis of this agency. We don't just talk about AI — we used it to build a whole operation, for ourselves, in under a year. The Designer Wallcoverings systems above are the proof. <b>We build for you the way we built it for ourselves.</b></p>
<div class="stats" style="justify-content:flex-start;margin-top:34px">
<div class="stat"><b data-count="600" data-suffix="+">0</b><span>PROJECTS SHIPPED</span></div>
<div class="stat"><b data-count="370" data-suffix="+">0</b><span>AI SKILLS BUILT</span></div>
<div class="stat"><b data-count="90">0</b><span>AUTONOMOUS AGENTS</span></div>
<div class="stat"><b data-count="7">0</b><span>iOS APPS</span></div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact">
<div class="contact-grid">
<div class="contact-copy reveal">
<h2>Let's build yours.</h2>
<p>Tell us what you're trying to run better. We'll come back with a concrete plan — what we'd build, what it'd cost, and what it'd save.</p>
<div class="taplinks">
<a class="tap glass lg" href="mailto:info@agentabrams.com"><span class="ic">✉️</span><div><b>info@agentabrams.com</b><small>Email us — we reply same day</small></div></a>
<a class="tap glass lg" href="tel:+18883734564"><span class="ic">📞</span><div><b>(888) 373-4564</b><small>Tap to call — talk it through in 15 minutes</small></div></a>
</div>
</div>
<form class="lead glass lg notilt reveal" id="leadform" autocomplete="on">
<div><label for="name">Your name</label><input id="name" name="name" required></div>
<div><label for="email">Email</label><input id="email" name="email" type="email" required></div>
<div><label for="need">What do you need?</label>
<select id="need" name="need">
<option>AI agents / automation</option>
<option>A website or web app</option>
<option>An online store / Shopify</option>
<option>Marketing & growth</option>
<option>Not sure yet — let's talk</option>
</select>
</div>
<div><label for="msg">A few details</label><textarea id="msg" name="message" placeholder="What are you trying to build or fix?"></textarea></div>
<button class="pill" type="submit">Get started →</button>
<div class="form-msg" id="formmsg"></div>
</form>
</div>
</section>
</main>
<footer class="wrap">
<a class="logo" href="#top"><span class="dot"></span>Abrams<span style="opacity:.6">Agency</span></a>
<div>We build the machine that runs your business.</div>
<div style="margin-top:8px">© <span id="yr"></span> Abrams Agency · agentabrams.com</div>
</footer>
<script>
/* ---------- nav ---------- */
const burger=document.getElementById('burger'),navlinks=document.getElementById('navlinks');
burger.addEventListener('click',()=>{burger.classList.toggle('on');navlinks.classList.toggle('open')});
navlinks.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{burger.classList.remove('on');navlinks.classList.remove('open')}));
document.getElementById('yr').textContent=new Date().getFullYear();
/* ---------- scroll reveal ---------- */
const io=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.14});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* ---------- liquid-glass: pointer tilt + refraction glare ---------- */
(function(){
const reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
const cards=[...document.querySelectorAll('.lg')];
cards.forEach((c,i)=>c.style.setProperty('--i',i%7)); // stagger the always-on sheen
if(reduce||!matchMedia('(hover:hover) and (pointer:fine)').matches)return;
let raf;
cards.filter(c=>!c.classList.contains('notilt')).forEach(c=>{
c.addEventListener('pointermove',e=>{
const r=c.getBoundingClientRect();
const x=(e.clientX-r.left)/r.width, y=(e.clientY-r.top)/r.height;
cancelAnimationFrame(raf);
raf=requestAnimationFrame(()=>{
c.style.setProperty('--ry',((x-.5)*9).toFixed(2)+'deg');
c.style.setProperty('--rx',((.5-y)*9).toFixed(2)+'deg');
c.style.setProperty('--mx',(x*100).toFixed(1)+'%');
c.style.setProperty('--my',(y*100).toFixed(1)+'%');
});
});
c.addEventListener('pointerleave',()=>{c.style.setProperty('--rx','0deg');c.style.setProperty('--ry','0deg');});
});
// glare-only (no tilt) cards still track the cursor for the refraction highlight
cards.filter(c=>c.classList.contains('notilt')).forEach(c=>{
c.addEventListener('pointermove',e=>{
const r=c.getBoundingClientRect();
c.style.setProperty('--mx',(((e.clientX-r.left)/r.width)*100).toFixed(1)+'%');
c.style.setProperty('--my',(((e.clientY-r.top)/r.height)*100).toFixed(1)+'%');
});
});
})();
/* ---------- animated stat counters ---------- */
const cio=new IntersectionObserver((es)=>es.forEach(e=>{
if(!e.isIntersecting)return; const el=e.target.querySelector('[data-count]'); if(!el||el.dataset.done)return;
el.dataset.done=1; const end=+el.dataset.count,suf=el.dataset.suffix||'';let t0=null;
const step=(t)=>{if(!t0)t0=t;const p=Math.min((t-t0)/1100,1);el.textContent=Math.round(end*(1-Math.pow(1-p,3)))+suf;if(p<1)requestAnimationFrame(step)};
requestAnimationFrame(step); cio.unobserve(e.target);
}),{threshold:.5});
document.querySelectorAll('.stat').forEach(s=>cio.observe(s));
/* ---------- color-wheel demo ---------- */
const NAMES=["Alabaster","Oatmeal","Greige","Celadon","Ink","Terracotta","Sage","Ochre","Marine","Blush","Aubergine","Bronze","Cobalt","Fern","Coral","Slate","Saffron","Plum","Teal","Chartreuse","Rose","Indigo","Moss","Rust"];
// build a spectrum of demo products (hue-spread, varied light/sat)
const PRODUCTS=Array.from({length:24},(_,i)=>{
const h=(i*360/24+ (i%3)*7)%360, s=45+(i%4)*12, l=40+((i*37)%40);
return {name:NAMES[i%NAMES.length], h, s, l};
});
const grid=document.getElementById('pgrid'), hueread=document.getElementById('hueread');
const sortsel=document.getElementById('sortsel'), density=document.getElementById('density');
let anchor=0;
function render(){
const list=[...PRODUCTS];
const mode=sortsel.value;
if(mode==='wheel') list.sort((a,b)=>(((a.h-anchor)%360+360)%360)-(((b.h-anchor)%360+360)%360));
else if(mode==='light') list.sort((a,b)=>b.l-a.l);
else if(mode==='dark') list.sort((a,b)=>a.l-b.l);
else list.sort((a,b)=>a.name.localeCompare(b.name));
grid.style.setProperty('--cols',density.value);
grid.innerHTML=list.map(p=>`<div class="swatch" style="background:hsl(${p.h} ${p.s}% ${p.l}%)"><span class="lbl">${p.name} · ${Math.round(p.h)}°</span></div>`).join('');
}
sortsel.addEventListener('change',render); density.addEventListener('input',render);
/* draw the wheel */
const cv=document.getElementById('wheel'),ctx=cv.getContext('2d'),CX=100,CY=100,RO=92,RI=52;
function drawWheel(){
ctx.clearRect(0,0,200,200);
for(let a=0;a<360;a++){
const s=(a-90)*Math.PI/180,e=(a-89.2)*Math.PI/180;
ctx.beginPath();ctx.arc(CX,CY,RO,s,e);ctx.arc(CX,CY,RI,e,s,true);ctx.closePath();
ctx.fillStyle=`hsl(${a} 85% 55%)`;ctx.fill();
}
// anchor handle
const ah=(anchor-90)*Math.PI/180, hx=CX+Math.cos(ah)*((RO+RI)/2), hy=CY+Math.sin(ah)*((RO+RI)/2);
ctx.beginPath();ctx.arc(hx,hy,11,0,7);ctx.fillStyle='#fff';ctx.fill();
ctx.lineWidth=3;ctx.strokeStyle=`hsl(${anchor} 85% 50%)`;ctx.stroke();
// center label
ctx.beginPath();ctx.arc(CX,CY,RI-6,0,7);ctx.fillStyle='#05060a';ctx.fill();
ctx.fillStyle='#fff';ctx.font='600 13px Inter,sans-serif';ctx.textAlign='center';ctx.textBaseline='middle';
ctx.fillText('SPIN',CX,CY);
}
function setFromEvent(ev){
const r=cv.getBoundingClientRect(),cx=ev.touches?ev.touches[0].clientX:ev.clientX,cy=ev.touches?ev.touches[0].clientY:ev.clientY;
const px=(cx-r.left)*(cv.width/r.width)-CX, py=(cy-r.top)*(cv.height/r.height)-CY;
anchor=(Math.atan2(py,px)*180/Math.PI+90+360)%360;
hueread.textContent=Math.round(anchor)+'°';
if(sortsel.value!=='wheel'){sortsel.value='wheel';}
drawWheel();render();
}
let dragging=false;
const start=(e)=>{dragging=true;setFromEvent(e);e.preventDefault()};
const move=(e)=>{if(dragging)setFromEvent(e)};
const end=()=>{dragging=false};
cv.addEventListener('mousedown',start);window.addEventListener('mousemove',move);window.addEventListener('mouseup',end);
cv.addEventListener('touchstart',start,{passive:false});window.addEventListener('touchmove',move,{passive:false});window.addEventListener('touchend',end);
drawWheel();render();
/* ---------- lead form ---------- */
const form=document.getElementById('leadform'),msg=document.getElementById('formmsg');
form.addEventListener('submit',async(e)=>{
e.preventDefault();msg.className='form-msg';msg.textContent='Sending…';
const data=Object.fromEntries(new FormData(form));
try{
const r=await fetch('/api/contact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
if(!r.ok)throw 0;
msg.className='form-msg ok';msg.textContent="Got it — we'll be in touch shortly. 🎉";form.reset();
}catch(_){msg.className='form-msg err';msg.textContent='Something went wrong — email info@agentabrams.com directly.';}
});
</script>
</body>
</html>