https://astro-sanity-ten.vercel.app/contact

1<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4> <head><!-- Essential Meta Tags --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="generator" content="Astro v5.13.7"><!-- SEO Component --><!-- Primary Meta Tags --><title>Contact</title><meta name="title" content="Contact"><meta name="description" content="It's a cool boilerplate"><!-- Canonical URL --><link rel="canonical" href="https://astro-sanity-ten.vercel.app/contact"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://astro-sanity-ten.vercel.app/contact"><meta property="og:title" content="Contact"><meta property="og:description" content="It's a cool boilerplate"><meta property="og:site_name" content="Astro Sanity"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://astro-sanity-ten.vercel.app/contact"><meta property="twitter:title" content="Contact"><meta property="twitter:description" content="It's a cool boilerplate"><!-- Article specific (for blog posts) --><!-- Robots --><meta name="robots" content="index, follow"><!-- Site Verification (add these to site settings if needed) --><!-- <meta name="google-site-verification" content="verification-code" /> --><!-- <meta name="msvalidate.01" content="verification-code" /> --><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><!-- PWA & Mobile --><meta name="theme-color" content="#000000"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><!-- Sitemap & RSS --><link rel="sitemap" href="/sitemap-index.xml"><link rel="alternate" type="application/rss+xml" title="Astro Sanity" href="/rss.xml"><!-- Performance Hints --><link rel="preconnect" href="https://cdn.sanity.io"><link rel="dns-prefetch" href="https://cdn.sanity.io"><!-- Google Analytics (if configured) --><!-- Client Router --><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="swap">

1<script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.U4jOVs4w.js"></script>

1<link rel="stylesheet" href="/_astro/_slug_.DaTsX5Z_.css">
2<style>main[data-astro-cid-fzx4jmue]{min-height:100vh}
3[data-astro-cid-2fqemqy3][data-sticky-vertical]{min-height:40em;transition:0s;will-change:transform}@media screen and (min-width: 992px){[data-astro-cid-2fqemqy3][data-sticky-vertical]{height:100vh}}
4[data-astro-cid-nuuvwxy4][data-sticky-horizontal]{min-height:40em;transition:0s;will-change:transform}@media screen and (min-width: 992px){[data-astro-cid-nuuvwxy4][data-sticky-horizontal]{height:100vh}}
5.parallax-2up[data-astro-cid-vyyoyxvt]{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1em}@media (min-width: 768px){.parallax-2up[data-astro-cid-vyyoyxvt]{grid-template-columns:repeat(2,minmax(0,1fr))}}.parallax-2up[data-astro-cid-vyyoyxvt],.parallax-2up__col[data-astro-cid-vyyoyxvt]{width:100%}.parallax-2up__image[data-astro-cid-vyyoyxvt]{height:30em}
6.parallax-image[data-astro-cid-vf5ole2s]{position:relative;overflow:hidden;width:100%;height:30em}@media screen and (min-width: 992px){.parallax-image[data-astro-cid-vf5ole2s]{height:40em}}.parallax-image__img[data-astro-cid-vf5ole2s]{position:absolute;bottom:0;left:0;width:100%;height:170%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;padding:0;will-change:transform}
7</style>
8<link rel="stylesheet" href="/_astro/_slug_.Cd5jxFP5.css"></head> <body data-astro-cid-sckkx6r4> <!-- Skip to Content Link --> <a href="#main" class="skip-to-content" data-astro-cid-sckkx6r4>Skip to content</a> <!-- Navigation --> <!-- <Navigation /> --> <header class="absolute top-8 left-0 w-full outer-margins z-30"> <nav class="grid grid-cols-1 lg:grid-cols-2 w-full gap-4" aria-label="Main navigation"> <!-- Logo/Site Name --> <div> <a href="/" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text">  <span data-button-animate-chars class="btn-animate-chars__text">Astro Sanity</span> </a> 

8<script type="module">function s(){const a=document.querySelectorAll("[data-button-animate-chars]"),l=document.querySelectorAll("[data-button-animate-word]");console.log("Found stagger buttons:",a.length),console.log("Found word buttons:",l.length),a.forEach(t=>{if(t.querySelector("span")){console.log("Already initialized");return}const e=t.textContent?.trim()||"";console.log("Button text:",e),t.innerHTML="",[...e].forEach((n,o)=>{const r=document.createElement("span");r.textContent=n,r.style.transitionDelay=`${o*.01}s`,n===" "&&(r.style.whiteSpace="pre"),t.appendChild(r)})}),l.forEach(t=>{if(t.querySelector("span")){console.log("Already initialized");return}const e=t.textContent?.trim()||"";console.log("Word button text:",e),t.innerHTML="",[...e].forEach(n=>{const o=document.createElement("span");o.textContent=n,n===" "&&(o.style.whiteSpace="pre"),t.appendChild(o)})})}s();document.addEventListener("astro:page-load",()=>{s()});</script>

8 </div> <div class="flex items-center hidden lg:flex"> <!-- Navigation Menu --> <ul id="navigation-menu" class="nav-menu"> <a href="/about" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text mr-1">  <span data-button-animate-chars class="btn-animate-chars__text">About</span> </a> <a href="/blog" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text mr-1">  <span data-button-animate-chars class="btn-animate-chars__text">Blog</span> </a> <a href="/contact" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text mr-1">  <span data-button-animate-chars class="btn-animate-chars__text">Contact</span> </a> <a href="/components" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text mr-1">  <span data-button-animate-chars class="btn-animate-chars__text">Components</span> </a>  </ul> </div> </nav> </header> 

8<script type="module" src="/_astro/TopBar.astro_astro_type_script_index_0_lang.DJ4PQ75S.js"></script>

8 <div class="fixed z-50 top-4 right-0 flex items-center gap-4 outer-margins" data-astro-cid-sckkx6r4> <div data-astro-cid-sckkx6r4> <button class="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" title="Toggle theme"> <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path> </svg> <svg class="moon-icon hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"></path> </svg> </button> 

8<script type="module" src="/_astro/DarkModeToggle.astro_astro_type_script_index_0_lang.Di96WfMm.js"></script>

8 </div> <button data-menu-button="burger" class="menu-button-wrapper text-[0.8em]" aria-expanded="false" aria-label="Toggle navigation menu"> <div class="menu-button"> <div class="menu-button-line"></div> <div class="menu-button-line"></div> <div class="menu-button-line"></div> </div> </button> 

8<script type="module" src="/_astro/MenuHamburgerOsmo.astro_astro_type_script_index_0_lang.CfZ1mqAy.js"></script>

8 </div> <div class="fullscreen-menu" data-fullscreen-menu aria-hidden="true" role="dialog" aria-modal="true"> <div class="fullscreen-menu-background" data-menu-background></div> <nav class="fullscreen-menu-nav" aria-label="Full screen navigation"> <ul class="fullscreen-menu-list"> <li class="fullscreen-menu-item" data-menu-item> <a href="/about" class="fullscreen-menu-link "> About  </a> </li><li class="fullscreen-menu-item" data-menu-item> <a href="/blog" class="fullscreen-menu-link "> Blog  </a> </li><li class="fullscreen-menu-item" data-menu-item> <a href="/contact" class="fullscreen-menu-link active"> Contact  </a> </li><li class="fullscreen-menu-item" data-menu-item> <a href="/components" class="fullscreen-menu-link "> Components  </a> </li> </ul> </nav> </div>  

8<script type="module" src="/_astro/MenuFullScreen.astro_astro_type_script_index_0_lang.baWg_NwA.js"></script>

8 <!-- Transition Overlay --> <div id="transition-overlay" class="transition-overlay" aria-hidden="true" data-astro-cid-sckkx6r4></div> <!-- Main Content -->  <main id="main" data-astro-cid-fzx4jmue> <section class="hero-section min-h-[100vh] flex items-end justify-center relative overflow-hidden outer-margins py-16 md:py-24 ">  <div class="relative z-10 w-full text-left "> <h1 class="text-text-primary mb-2"> Contact </h1> <p class="text-text-primary mb-6 "> Talk to me? </p>  </div> </section> 

8<script type="module" src="/_astro/Hero.astro_astro_type_script_index_0_lang.UKyiJk7l.js"></script>

8<section class="content-block"> <div class=""> <div class="content-wrapper grid-cols-4 lg:grid-cols-4"> <div class="col-span-5 md:col-span-2">Something</div>
9          <div class="col-span-5 md:col-span-2"> <h2 class="mb-4">Talk to me</h2> <div class="rich-text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a magna ipsum. Vestibulum eu tortor in erat sollicitudin venenatis. Nunc convallis nisl bibendum pulvinar ultricies. Donec sed purus est. Phasellus feugiat euismod lacus, sed tempor diam fermentum a. Nullam id quam ac metus facilisis commodo nec eu libero. Proin ut ex enim. Nunc rutrum luctus auctor. Donec fringilla eleifend porta. Fusce congue pellentesque purus, a suscipit urna fermentum ut.</p> </div> </div> </div> </div> </section><div data-sticky-vertical class="py-16 md:py-20 outer-margins relative" data-astro-cid-2fqemqy3> <div class="flex items-center w-full h-full" data-astro-cid-2fqemqy3> <div class="w-full lg:h-[30em] mt-[-6em]" data-astro-cid-2fqemqy3> <h2 class="pb-4" data-astro-cid-2fqemqy3>Sticky Vertical (GSAP)</h2> <div class="relative" data-astro-cid-2fqemqy3> <div class="lg:absolute right-0 left-0" data-astro-cid-2fqemqy3> <div class="bg-background-primary dark:bg-background-primary" data-astro-cid-2fqemqy3> <div class="border-solid border-t border-border-secondary pt-6 pb-12 grid grid-cols-1 md:grid-cols-2 gap-4" data-astro-cid-2fqemqy3> <div class="left" data-astro-cid-2fqemqy3> <div class="section-label mb-4" data-astro-cid-2fqemqy3>( A )</div> </div> <div class="right" data-astro-cid-2fqemqy3> <h2 class="section-heading mb-2" data-astro-cid-2fqemqy3>Very Good Design</h2> <p class="section-text mb-8 max-w-3xl" data-astro-cid-2fqemqy3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui purus, dictum vel pharetra et, ornare quis nisl. Proin a diam vel risus dapibus pretium. Aliquam imperdiet libero eros, sed pharetra orci venenatis dignissim. Nam molestie, ex id commodo tincidunt, augue felis varius est, vitae accumsan eros nunc tempus eros. Etiam et rhoncus nunc. Proin a condimentum enim, ac sodales ligula. Duis purus ligula, dapibus vel turpis ut, tempor dapibus lorem. Phasellus a lacus sit amet ante sollicitudin pretium. Integer eu magna nibh. Aliquam et euismod augue. Sed vulputate semper nunc, non finibus sapien mollis non.</p> </div> </div> </div> </div><div data-sticky-vertical-subsection class="lg:absolute right-0 left-0" data-astro-cid-2fqemqy3> <div class="bg-background-primary dark:bg-background-primary" data-astro-cid-2fqemqy3> <div class="border-solid border-t border-border-secondary pt-6 pb-12 grid grid-cols-1 md:grid-cols-2 gap-4" data-astro-cid-2fqemqy3> <div class="left" data-astro-cid-2fqemqy3> <div class="section-label mb-4" data-astro-cid-2fqemqy3>( B )</div> </div> <div class="right" data-astro-cid-2fqemqy3> <h2 class="section-heading mb-2" data-astro-cid-2fqemqy3>Great Development</h2> <p class="section-text mb-8 max-w-3xl" data-astro-cid-2fqemqy3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui purus, dictum vel pharetra et, ornare quis nisl. Proin a diam vel risus dapibus pretium. Aliquam imperdiet libero eros, sed pharetra orci venenatis dignissim. Nam molestie, ex id commodo tincidunt, augue felis varius est, vitae accumsan eros nunc tempus eros. Etiam et rhoncus nunc. Proin a condimentum enim, ac sodales ligula. Duis purus ligula, dapibus vel turpis ut, tempor dapibus lorem. Phasellus a lacus sit amet ante sollicitudin pretium. Integer eu magna nibh. Aliquam et euismod augue. Sed vulputate semper nunc, non finibus sapien mollis non.</p> </div> </div> </div> </div><div data-sticky-vertical-subsection class="lg:absolute right-0 left-0" data-astro-cid-2fqemqy3> <div class="bg-background-primary dark:bg-background-primary" data-astro-cid-2fqemqy3> <div class="border-solid border-t border-border-secondary pt-6 pb-12 grid grid-cols-1 md:grid-cols-2 gap-4" data-astro-cid-2fqemqy3> <div class="left" data-astro-cid-2fqemqy3> <div class="section-label mb-4" data-astro-cid-2fqemqy3>( C )</div> </div> <div class="right" data-astro-cid-2fqemqy3> <h2 class="section-heading mb-2" data-astro-cid-2fqemqy3>Burma Shave</h2> <p class="section-text mb-8 max-w-3xl" data-astro-cid-2fqemqy3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui purus, dictum vel pharetra et, ornare quis nisl. Proin a diam vel risus dapibus pretium. Aliquam imperdiet libero eros, sed pharetra orci venenatis dignissim. Nam molestie, ex id commodo tincidunt, augue felis varius est, vitae accumsan eros nunc tempus eros. Etiam et rhoncus nunc. Proin a condimentum enim, ac sodales ligula. Duis purus ligula, dapibus vel turpis ut, tempor dapibus lorem. Phasellus a lacus sit amet ante sollicitudin pretium. Integer eu magna nibh. Aliquam et euismod augue. Sed vulputate semper nunc, non finibus sapien mollis non.</p> </div> </div> </div> </div> </div> </div> </div> 

9<script type="module" src="/_astro/StickySectionsVerticalGsap.astro_astro_type_script_index_0_lang.CBJlz1HB.js"></script>

9  </div><section class="content-block"> <div class=""> <div class="content-wrapper grid-cols-4 lg:grid-cols-4"> <div class="col-span-5 md:col-span-2">Something</div>
10          <div class="col-span-5 md:col-span-2"> <h2 class="mb-4">Talk to me</h2> <div class="rich-text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a magna ipsum. Vestibulum eu tortor in erat sollicitudin venenatis. Nunc convallis nisl bibendum pulvinar ultricies. Donec sed purus est. Phasellus feugiat euismod lacus, sed tempor diam fermentum a. Nullam id quam ac metus facilisis commodo nec eu libero. Proin ut ex enim. Nunc rutrum luctus auctor. Donec fringilla eleifend porta. Fusce congue pellentesque purus, a suscipit urna fermentum ut.</p><p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a magna ipsum. Vestibulum eu tortor in erat sollicitudin venenatis. Nunc convallis nisl bibendum pulvinar ultricies. Donec sed purus est. Phasellus feugiat euismod lacus, sed tempor diam fermentum a. Nullam id quam ac metus facilisis commodo nec eu libero. Proin ut ex enim. Nunc rutrum luctus auctor. Donec fringilla eleifend porta. Fusce congue pellentesque purus, a suscipit urna fermentum ut.</p><p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a magna ipsum. Vestibulum eu tortor in erat sollicitudin venenatis. Nunc convallis nisl bibendum pulvinar ultricies. Donec sed purus est. Phasellus feugiat euismod lacus, sed tempor diam fermentum a. Nullam id quam ac metus facilisis commodo nec eu libero. Proin ut ex enim. Nunc rutrum luctus auctor. Donec fringilla eleifend porta. Fusce congue pellentesque purus, a suscipit urna fermentum ut.</p> </div> </div> </div> </div> </section><section class="cta-section py-16 md:py-20 outer-margins relative overflow-hidden dark:bg-background-secondary text-white dark:text-white"> <div> <div class="flex w-full gap-4 justify-between flex-wrap text-left"> <div> <h2>Do something</h2> <p class="text-lg">For real.</p> </div> <a href="#" class="btn-primary"> Click here </a>  </div> </div> </section> </main>  <!-- Footer --> <footer class="bg-surface-secondary outer-margins pt-20 pb-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> <div class="footer-col"> <!-- Logo/Site Name --> <div> <a href="/" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text btn-animate-chars--no-stagger">  <span data-button-animate-word class="btn-animate-chars__text">Astro Sanity</span> </a>  </div> <p class="text-text-secondary">123 Street Name. <br>City, State, Zip</p> </div> <div class="footer-col"> <ul class="space-y-2 !pl-0"> <li class="nav-item"> <a href="/about" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text btn-animate-chars--no-stagger mr-1">  <span data-button-animate-word class="btn-animate-chars__text">About</span> </a>  </li><li class="nav-item"> <a href="/blog" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text btn-animate-chars--no-stagger mr-1">  <span data-button-animate-word class="btn-animate-chars__text">Blog</span> </a>  </li><li class="nav-item"> <a href="/contact" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text btn-animate-chars--no-stagger mr-1">  <span data-button-animate-word class="btn-animate-chars__text">Contact</span> </a>  </li><li class="nav-item"> <a href="/components" aria-label="Staggering button" class="btn-animate-chars btn-animate-chars--text btn-animate-chars--no-stagger mr-1">  <span data-button-animate-word class="btn-animate-chars__text">Components</span> </a>  </li> </ul> </div> </div> <div class="border-t border-border-primary mt-20 pt-6"> <p class="text-text-secondary text-sm">
11&copy; 2026 Astro Sanity | All rights reserved.
12</p> </div> </footer> <!-- GSAP Animation Script --> 

12<script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.C4YeR4xp.js"></script>

12 </body> </html>