# Your New Business > URL: https://act-as-world-class-principal-111f6525.onrender.com > Act as a World-Class Principal UI/UX Engineer and Creative Front-End Developer. Your mission is to build a hyper-polished, ultra-professional, single-file HTML/CSS/JS website (⁠ index.html ⁠) for *Edge of AI* (⁠ edgeofai.xyz ⁠). The site must merge the bespoke Dark Editorial design system of Stripe/Vercel with 100% of the authentic content, media assets, advisory framework, podcast details, and insights from Edge of AI. --- ### I. ASSET & LOGO BINDING MATRIX You MUST link local image assets accurately using crisp container sizing, ⁠ object-fit: contain ⁠/⁠ cover ⁠, and hover states:  1.⁠ ⁠PRIMARY BRAND LOGO: - File: ⁠ Logo.png ⁠ - Header Placement: Sticky nav, max-height 38px, left-aligned. - Footer Placement: Max-height 48px, opacity 0.9.  2.⁠ ⁠EXECUTIVE HEADSHOTS: - Josh Kriger Card: ⁠ Josh_Kriger.jpeg ⁠ — CSS container ratio ⁠ aspect-ratio: 4/5 ⁠, ⁠ object-fit: cover ⁠, micro-zoom on hover (⁠ transform: scale(1.03) ⁠). - Audrey Pichy Card: ⁠ Audrey.jpeg ⁠ — CSS container ratio ⁠ aspect-ratio: 4/5 ⁠, ⁠ object-fit: cover ⁠, micro-zoom on hover (⁠ transform: scale(1.03) ⁠).  3.⁠ ⁠CLIENT MONOCHROME LOGO TILES (Inside Case Study Cards): - Embed these exact local PNG filenames at the top-left of each case study card (max-height 32px, ⁠ filter: brightness(0) invert(0.85) ⁠ for monochromatic contrast on ⁠ #111111 ⁠): * Card 01 (Robot.com): ⁠ Robot.png ⁠ * Card 02 (Willo.ai): ⁠ Willo.png ⁠ * Card 03 (The Edge of Company): ⁠ Logo.png ⁠ * Card 04 (GBA): ⁠ GBA.png ⁠ * Card 05 (Zuber Lawler): ⁠ ZuberLawler.png ⁠ * Card 06 (TSAS Summit): ⁠ TSAS.png ⁠ * Card 07 (Paza Labs): ⁠ PazaLabs.png ⁠ * Card 08 (Grants Gardens): ⁠ GrantsGardens.png ⁠ --- ### II. ADVANCED DESIGN SYSTEM & DESIGN TOKENS •⁠ ⁠Color Palette (Dark Editorial Specification): * Canvas Surface: ⁠ #0A0A0A ⁠ (Deep Void Black) * Elevated Card Surface: ⁠ #111111 ⁠ (Raised Charcoal) with ⁠ #222222 ⁠ hairline borders * Interactive Hover Surface: ⁠ #1A1A1A ⁠ with subtle border ⁠ #333333 ⁠ * Paper Accent Bands: ⁠ #F5F5F0 ⁠ (Used for 1 out of every 3 sections to break dark rhythm; text on paper uses ⁠ #111111 ⁠) * Warm White Text (Ink): ⁠ #F5F5F0 ⁠ (Headlines and key figures) * Muted Secondary Text: ⁠ #C4C4BC ⁠ (Body copy) * Quiet Metadata: ⁠ #9A9A93 ⁠ (Eyebrows, captions, table headers) * Accent Signal: ⁠ #00E5FF ⁠ (Electric Cyan) — STRICTLY CAPPED (<5% of viewport). Use strictly for primary CTA fills (⁠ #00E5FF ⁠ background with ⁠ #0A0A0A ⁠ text) and active UI indicators. •⁠ ⁠Typography Architecture: * Display & Headlines: Google Font ⁠ Archivo Black ⁠ — ALL-CAPS, heavy weight, authoritative letter-spacing (⁠ letter-spacing: 0.01em ⁠). * Body Copy & Data: Google Font ⁠ Inter ⁠ — clean sans-serif. Mandatory ⁠ font-variant-numeric: tabular-nums ⁠ across all tables, counters, and pricing tiers. •⁠ ⁠Visual Depth & Texture: * Glassmorphism Sticky Header: ⁠ background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); ⁠ * Subtle Noise Background: Inline SVG turbulence overlay (⁠ opacity: 0.025 ⁠) across ⁠ #0A0A0A ⁠ canvas. * Signature Device (⁠ .measure-mark ⁠): Hairline border ⁠ #222222 ⁠ with a 2px Cyan indicator tick. --- ### III. MOTION ENGINE & INTERACTIVE FEATURES (VANILLA JS)  1.⁠ ⁠Scroll-Triggered Reveal Animations: ⁠ IntersectionObserver ⁠ adding ⁠ .is-visible ⁠ to elements (⁠ opacity: 1; transform: translateY(0) ⁠).  2.⁠ ⁠Dynamic Animated Number Counters: Animate metrics from 0 to target values (⁠ $5,900 ⁠, ⁠ 100+ ⁠, ⁠ 54 ⁠, ⁠ 23.1% ⁠, ⁠ $1M+ ⁠) when scrolled into view.  3.⁠ ⁠Interactive Case Study Category Filter: Filter pills ⁠ [ All Work ] ⁠, ⁠ [ BD & Outreach ] ⁠, ⁠ [ Legal & Web3 ] ⁠, ⁠ [ Infrastructure ] ⁠ with smooth CSS fade/scale transitions.  4.⁠ ⁠Smooth Accordion FAQs: Height grid expansion (⁠ grid-template-rows: 0fr ⁠ to ⁠ 1fr ⁠) with ⁠ + ⁠ rotating to ⁠ × ⁠. --- ### IV. COMPLETE PAGE ARCHITECTURE & INTEGRATED CONTENT  1.⁠ ⁠STICKY HEADER - Brand Logo (⁠ Logo.png ⁠, left). - Navigation Links: "Advisory", "Podcast", "Insights", "About". - Primary CTA Button: "Book a 15-min call" (⁠ href="https://advisory.edgeof.xyz" ⁠, background ⁠ #00E5FF ⁠, text ⁠ #0A0A0A ⁠, bold).  2.⁠ ⁠HERO SECTION - Eyebrow: "AI ADVISORY & MEDIA" (Inter 600, tracking 0.18em, uppercase). - Headline H1: "AI THAT ACTUALLY SHIPS TO PRODUCTION." - Subheadline: "Your AI pilot worked. Now it needs to scale past the PowerPoint. Edge of AI identifies the systems worth building, implements them, and stays through adoption — so the work actually sticks." - Action Bar: Primary CTA ("Book a free 15-min call") + Secondary quiet link ("Browse the archive →"). - Signature Measure Mark: Hairline with cyan tick: "Two weeks to a plan · thirty days to working systems". - Fact Strip with Animated Counters: * Fact 1: ⁠ 100+ ⁠ — Episodes published * Fact 2: ⁠ 3yr+ ⁠ — Archive depth * Fact 3: ⁠ AI x Ops ⁠ — Founders, investors & operators * Fact 4: ⁠ $5,900 ⁠ — Edge Audit (credited to build) - Guest Strip Badges: "AI Founders", "Crypto Operators", "VC Investors", "SaaS Builders", "Automation Engineers", "Growth Leaders".  3.⁠ ⁠THE ADVISORY PRACTICE (PROBLEM & PROMISE) - Eyebrow: "THE ADVISORY PRACTICE" | Headline: "THE PILOT WORKED. NOW WHAT?" - Lead: "Most teams have run an AI experiment. A few have run three. Almost none have shipped something that survived long enough to matter — because the hard part is never the demo." - Split 2-Column Grid: * Left (Where teams get stuck): 1. "No clear owner after the pilot" (Vendor built it, consultant left, lives in Notion). 2. "Fragmented, costly workflows" (4 steps instead of 1, error-prone repetitive work). 3. "Tool sprawl, no system" (ChatGPT, Make, Zapier not talking to each other). * Right (Our Promise & Principles): - Quote Card: "We identify the systems worth building, implement them, support adoption, and measure the result. You own the work. We stay until it sticks." — Josh Rosenthal, Founder. - Principles: Implementation-first | Operator lens | Vendor independence | You own everything. - CTA Link: "Take the free AI Readiness Score →"  4.⁠ ⁠THE ENGAGEMENT PATH (OFFER LADDER) - Eyebrow: "THE ENGAGEMENT PATH" | Headline: "THREE PHASES. ONE CLEAR PATH." - 3-Card Grid: * Phase 01: Edge Audit | Price: ⁠ $5,900 ⁠ | Duration: ⁠ ~2 weeks ⁠ | Note: ⁠ Credited toward your build ⁠ | Scope: Workflow map + AI-readiness scan, prioritized opportunity backlog, solution blueprint, 90-day roadmap, executive readout session. * Phase 02 (Featured Card - Cyan Hairline Border): System Build | Price: ⁠ From $9,000 ⁠ | Duration: ⁠ 4 to 8 weeks ⁠ | Tiers: ⁠ Foundation · Momentum · Transformation ⁠ | Scope: Custom AI workflow implementation, integration with existing tools, staff training + adoption support, measurement framework setup, full handover (code, docs, decisions). * Phase 03: Edge Care | Price: ⁠ Retainer (From $1,800/mo) ⁠ | Note: ⁠ Optional ongoing partnership to operate, measure, and extend what was built. ⁠  5.⁠ ⁠6-STEP OPERATIONAL PROCESS - Headline: "SIX STEPS. NO AMBIGUITY." - 6 Sequential Cards with step numbers (⁠ 01 ⁠ to ⁠ 06 ⁠), tags, and animated progress track: 1. Fit Call (15 min, free) | 2. Discover & Diagnose (Week 1–2) | 3. Prioritize & Blueprint (Week 2) | 4. Build & Implement (4–8 weeks) | 5. Make It Stick (Final 2 weeks) | 6. Operate or Improve (Ongoing).  6.⁠ ⁠VERIFIED PROOF GRID (ALL 8 CASE STUDIES) - Headline: "PROVEN IN PRODUCTION" | Subhead: "Every metric states a baseline, a result, and a measurement window." - 2-Column Grid with Client Logos and HTML Comparison Tables: * Card 01: Robot.com | Logo: ⁠ Robot.png ⁠ | Headline: "50 qualified leads requested. 54 delivered that we can defend." | Table: Qualified leads (0 -> 54), Excluded orgs (0 -> 288), Revenue ($0 -> $15,000 pilot). * Card 02: Willo.ai | Logo: ⁠ Willo.png ⁠ | Headline: "Two channels tested side by side over 43 active days." | Table: Direct email reply (Unknown -> 23.1%), Automated reply (Unknown -> 2.5%), Investor pipeline ($0 -> $1M+). * Card 03: The Edge of Company | Logo: ⁠ Logo.png ⁠ | Headline: "Seven campaigns, eleven people, one persistent agent." | Table: Memory retention (Session -> 4 months), Active jobs (0 -> 47), Wake-ups (0 -> ~135/day). * Card 04: GBA | Logo: ⁠ GBA.png ⁠ | Headline: "AI outreach exceeding prior-year revenue goals." | Table: Sponsors secured (Manual -> 22+), Media partners (Manual -> 25), Revenue goal (Target -> Exceeded). * Card 05: Zuber Lawler | Logo: ⁠ ZuberLawler.png ⁠ | Headline: "Full front-office rebuild for an emerging tech law practice." | Table: Duration (Project -> 18+ months), Parallel workstreams (Ad hoc -> 6 active), SEO pillar pages (0 -> 4). * Card 06: TSAS Summit | Logo: ⁠ TSAS.png ⁠ | Headline: "Go-to-market demand engine built on OpenMax end to end." | Table: Orgs reached (Hand-worked -> 3,000+), Form intake (Manual -> Automated), Demand engine (None -> Rebuilt). * Card 07: Paza Labs | Logo: ⁠ PazaLabs.png ⁠ | Headline: "Independent audit scoring and automated partner outreach." | Table: Audit score (85 -> 92.5/100 Grade A), Brand assets (0 -> 39 preserved), Outreach streams (Ad hoc -> 3 segmented). * Card 08: Grants Gardens | Logo: ⁠ GrantsGardens.png ⁠ | Headline: "Enterprise-grade business development engine for a boutique SMB." | Table: BD automation (Referral -> 4 workstreams), Client profile (Manual -> High-end owner-operated), Workflow scope (Ad hoc -> Research, leads, proposals).  7.⁠ ⁠THE PODCAST SECTION - Eyebrow: "THE PODCAST" | Headline: "EDGE OF AI — THE SHOW" - Subhead: "Conversations at the edge of what is possible with AI. Founders, investors, and operators share what is actually working." - Episode Cards Grid (4 Cards with prominent EP number badges): * EP 63 (Media + AI · 44 min): "Digital Twins and the Future of News" — Tim Draper & Mark Scarpa (Legendary VC · Founder, Defiance.TV) * EP 62 (Robotics + AI · 49 min): "From Loneliness to Connection: How RIA the Humanoid Robot is Changing Lives" — Manju Kesani (CEO, Machani Robotics) * EP 41 (Future of Work · 55 min): "Amplifying the Human Mind by the Millions — Get Ahead of AI" — Shelly Palmer (Media Technologist & Author) * EP 28 (Creative AI · 48 min): "When AI becomes a true creative collaborator, not a tool" — Claire Silver (AI Collaborative Artist) - Subscribe Bar: Badges for Apple Podcasts, Spotify, and YouTube.  8.⁠ ⁠INSIGHTS & AUTOMATION TEARDOWNS - Eyebrow: "INSIGHTS" | Headline: "THE THINKING BEHIND THE WORK" - 3-Card Grid: * Article 1: "How we automated a 12-step client onboarding into a single trigger" (Automation Teardown) * Article 2: "What a $45K/month operations problem actually looks like in Notion" (Live Audit Recap) * Article 3: "The real reason enterprise AI adoption stalls at the pilot stage" (Episode Write-up) - Flagship Banner Card: "Automation Teardowns — We pick a real workflow from a real company, break it down step by step, and show exactly what we would automate and why."  9.⁠ ⁠PRACTICE LEADERSHIP & BENCH - Eyebrow: "THE PEOPLE" | Headline: "YOU WORK WITH THE PRINCIPALS." - Lead: "No handoff to a junior team. Joshua and Audrey are in your engagement from the first scoping call to the last measured outcome." - Card 1: Joshua Kriger (Practice Lead) | Embed ⁠ Josh_Kriger.jpeg ⁠ (vertical 4:5 ratio) | Bio: Co-founded The Edge of Company. Built commercial relationships across professional services, robotics, events, and law. Investor-side perspective on AI valuation and diligence. - Card 2: Audrey Pichy (Client Service Lead) | Embed ⁠ Audrey.jpeg ⁠ (vertical 4:5 ratio) | Bio: Defines advisory offering: scope, sequencing, success criteria. Owns delivery record, document operations, and single source of truth. - Card 3: The Team / Global Bench | Copy: 11 people, 7 outreach campaigns, 4 continents. Close to 500 episodes published, global events run. Metric: "3 Concurrent Projects Maximum" capacity cap. - Pull Quote: "The advisory practice exists because operators kept asking the same question after every conversation: how do we actually do this? We stopped answering it for free." — Joshua Kriger & Audrey Pichy. 10.⁠ ⁠FREQUENTLY ASKED QUESTIONS (ACCORDION) - Interactive accordions answering: * "How is Edge of AI different from larger consulting firms?" * "Do I have to do the Audit before a Build?" * "What does the Edge Audit include?" * "Do you work with firms that have never deployed AI before?" * "How do you handle confidentiality and data security?" * "How does the advisory practice relate to the podcast?" 11.⁠ ⁠CLOSING CTA BAND & FOOTER - Headline: "LET'S FIND OUT IF WE ARE A FIT." - Subhead: "A free 15-minute call. No pitch deck, no qualification form. Just a direct conversation about what you are trying to solve." - Primary CTA: "Book my free 15-min call" (⁠ href="https://advisory.edgeof.xyz" ⁠). - Ladder Text: 01 AI Readiness Score (5 min) · 02 Free 15-min fit call · 03 Edge Audit $5,900 - Footer: Embed ⁠ Logo.png ⁠, Advisory links, Media links, copyright 2026 Edge of Company, and ⁠ advisory.edgeof.xyz ⁠ link. --- ### V. TECHNICAL & COMPLIANCE REQUIREMENTS •⁠ ⁠Return ONE fully working ⁠ index.html ⁠ file containing CSS in ⁠