First stab at content

.astro/content-assets.mjs

@@ -1,9 +1,9 @@
 
 import __ASTRO_IMAGE_IMPORT_22eT4n from "/src/content/showcase/_images/astro-docs.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fastro-docs.json";
-import __ASTRO_IMAGE_IMPORT_ZGTgMV from "/src/content/showcase/_images/designcember.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdesigncember.json";
 import __ASTRO_IMAGE_IMPORT_a73F9 from "/src/content/showcase/_images/corset.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fcorset.json";
+import __ASTRO_IMAGE_IMPORT_ZGTgMV from "/src/content/showcase/_images/designcember.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdesigncember.json";
 import __ASTRO_IMAGE_IMPORT_40Ee0 from "/src/content/showcase/_images/divriots.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdivriots.json";
 import __ASTRO_IMAGE_IMPORT_kCYhf from "/src/content/showcase/_images/firebase-blog.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Ffirebase-blog.json";
 import __ASTRO_IMAGE_IMPORT_G5XYE from "/src/content/showcase/_images/polinations.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fpolinations.json";
-export default new Map([["/src/content/showcase/_images/astro-docs.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fastro-docs.json", __ASTRO_IMAGE_IMPORT_22eT4n], ["/src/content/showcase/_images/designcember.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdesigncember.json", __ASTRO_IMAGE_IMPORT_ZGTgMV], ["/src/content/showcase/_images/corset.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fcorset.json", __ASTRO_IMAGE_IMPORT_a73F9], ["/src/content/showcase/_images/divriots.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdivriots.json", __ASTRO_IMAGE_IMPORT_40Ee0], ["/src/content/showcase/_images/firebase-blog.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Ffirebase-blog.json", __ASTRO_IMAGE_IMPORT_kCYhf], ["/src/content/showcase/_images/polinations.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fpolinations.json", __ASTRO_IMAGE_IMPORT_G5XYE]]);
+export default new Map([["/src/content/showcase/_images/astro-docs.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fastro-docs.json", __ASTRO_IMAGE_IMPORT_22eT4n], ["/src/content/showcase/_images/corset.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fcorset.json", __ASTRO_IMAGE_IMPORT_a73F9], ["/src/content/showcase/_images/designcember.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdesigncember.json", __ASTRO_IMAGE_IMPORT_ZGTgMV], ["/src/content/showcase/_images/divriots.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fdivriots.json", __ASTRO_IMAGE_IMPORT_40Ee0], ["/src/content/showcase/_images/firebase-blog.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Ffirebase-blog.json", __ASTRO_IMAGE_IMPORT_kCYhf], ["/src/content/showcase/_images/polinations.png?astroContentImageFlag=&importer=src%2Fcontent%2Fshowcase%2Fpolinations.json", __ASTRO_IMAGE_IMPORT_G5XYE]]);
 		

.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.16.8","content-config-digest","fc4115b61b0d3e7a","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://astro-moon-landing.netlify.app/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":false,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/dev\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/ryan/Documents/Work/Sejour/landing-page/node_modules/.astro/sessions\"}}}","showcase",["Map",11,12,22,23,33,34,44,45,55,56,66,67],"astro-docs",{"id":11,"data":13,"filePath":18,"assetImports":19,"digest":21},{"title":14,"image":15,"url":16,"featured":17},"Astro Docs","__ASTRO_IMAGE_/src/content/showcase/_images/astro-docs.png","https://docs.astro.build/",2,"src/content/showcase/astro-docs.json",[20],"/src/content/showcase/_images/astro-docs.png","565da181a771e118","designcember",{"id":22,"data":24,"filePath":29,"assetImports":30,"digest":32},{"title":25,"image":26,"url":27,"featured":28},"Designcember","__ASTRO_IMAGE_/src/content/showcase/_images/designcember.png","https://designcember.com/",4,"src/content/showcase/designcember.json",[31],"/src/content/showcase/_images/designcember.png","038c08e5dc948c2d","corset",{"id":33,"data":35,"filePath":40,"assetImports":41,"digest":43},{"title":36,"image":37,"url":38,"featured":39},"Corset","__ASTRO_IMAGE_/src/content/showcase/_images/corset.png","https://corset.dev/",6,"src/content/showcase/corset.json",[42],"/src/content/showcase/_images/corset.png","704af0fd13a7f2e9","divriots",{"id":44,"data":46,"filePath":51,"assetImports":52,"digest":54},{"title":47,"image":48,"url":49,"featured":50},"\u003Cdiv>RIOTS","__ASTRO_IMAGE_/src/content/showcase/_images/divriots.png","https://divriots.com/",3,"src/content/showcase/divriots.json",[53],"/src/content/showcase/_images/divriots.png","3f4f047e23cbf6ee","firebase-blog",{"id":55,"data":57,"filePath":62,"assetImports":63,"digest":65},{"title":58,"image":59,"url":60,"featured":61},"The Firebase Blog","__ASTRO_IMAGE_/src/content/showcase/_images/firebase-blog.png","https://firebase.blog/",5,"src/content/showcase/firebase-blog.json",[64],"/src/content/showcase/_images/firebase-blog.png","9c5ac30a72c8bb94","polinations",{"id":66,"data":68,"filePath":73,"assetImports":74,"digest":76},{"title":69,"image":70,"url":71,"featured":72},"PoliNations","__ASTRO_IMAGE_/src/content/showcase/_images/polinations.png","https://polinations.com/",1,"src/content/showcase/polinations.json",[75],"/src/content/showcase/_images/polinations.png","df48a1c862f54778"]
+[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.16.8","content-config-digest","fc4115b61b0d3e7a","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://astro-moon-landing.netlify.app/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":false,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/dev\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/ryan/Documents/Work/Sejour/landing-page/node_modules/.astro/sessions\"}}}","showcase",["Map",11,12,22,23,33,34,44,45,55,56,66,67],"astro-docs",{"id":11,"data":13,"filePath":18,"assetImports":19,"digest":21},{"title":14,"image":15,"url":16,"featured":17},"Astro Docs","__ASTRO_IMAGE_/src/content/showcase/_images/astro-docs.png","https://docs.astro.build/",2,"src/content/showcase/astro-docs.json",[20],"/src/content/showcase/_images/astro-docs.png","565da181a771e118","corset",{"id":22,"data":24,"filePath":29,"assetImports":30,"digest":32},{"title":25,"image":26,"url":27,"featured":28},"Corset","__ASTRO_IMAGE_/src/content/showcase/_images/corset.png","https://corset.dev/",6,"src/content/showcase/corset.json",[31],"/src/content/showcase/_images/corset.png","704af0fd13a7f2e9","designcember",{"id":33,"data":35,"filePath":40,"assetImports":41,"digest":43},{"title":36,"image":37,"url":38,"featured":39},"Designcember","__ASTRO_IMAGE_/src/content/showcase/_images/designcember.png","https://designcember.com/",4,"src/content/showcase/designcember.json",[42],"/src/content/showcase/_images/designcember.png","038c08e5dc948c2d","divriots",{"id":44,"data":46,"filePath":51,"assetImports":52,"digest":54},{"title":47,"image":48,"url":49,"featured":50},"\u003Cdiv>RIOTS","__ASTRO_IMAGE_/src/content/showcase/_images/divriots.png","https://divriots.com/",3,"src/content/showcase/divriots.json",[53],"/src/content/showcase/_images/divriots.png","3f4f047e23cbf6ee","firebase-blog",{"id":55,"data":57,"filePath":62,"assetImports":63,"digest":65},{"title":58,"image":59,"url":60,"featured":61},"The Firebase Blog","__ASTRO_IMAGE_/src/content/showcase/_images/firebase-blog.png","https://firebase.blog/",5,"src/content/showcase/firebase-blog.json",[64],"/src/content/showcase/_images/firebase-blog.png","9c5ac30a72c8bb94","polinations",{"id":66,"data":68,"filePath":73,"assetImports":74,"digest":76},{"title":69,"image":70,"url":71,"featured":72},"PoliNations","__ASTRO_IMAGE_/src/content/showcase/_images/polinations.png","https://polinations.com/",1,"src/content/showcase/polinations.json",[75],"/src/content/showcase/_images/polinations.png","df48a1c862f54778"]

src/components/call-to-action.astro

@@ -0,0 +1,9 @@
+---
+import ContentSection from "~/components/content-section.astro";
+---
+
+<ContentSection title="Try it out!" id="book">
+  <a slot="lead" href='javascript:alert("This is not ready yet.")'
+    >Book a session</a
+  >
+</ContentSection>

src/components/content-section.astro

@@ -13,9 +13,7 @@ const { title, id } = Astro.props;
 >
   <div class="flex flex-col items-center gap-4">
     <slot name="eyebrow" />
-    <h2
+    <h2 class="text-center font-extrabold tracking-tight text-6xl">
-      class="gradient-text text-center font-extrabold tracking-tight text-6xl"
-    >
       {title}
     </h2>
   </div>

src/components/features.astro

@@ -1,66 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import ContentSection from "~/components/content-section.astro";
-import type { FeatureItem } from "~/types";
-
-const features: Array<FeatureItem> = [
-  {
-    title: "Bring Your Own Framework",
-    description:
-      "Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.",
-    icon: "mdi:handshake",
-  },
-  {
-    title: "100% Static HTML, No JS",
-    description:
-      "Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.",
-    icon: "mdi:feather",
-  },
-  {
-    title: "On-Demand Components",
-    description:
-      "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.",
-    icon: "mdi:directions-fork",
-  },
-  {
-    title: "Broad Integration",
-    description:
-      "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.",
-    icon: "mdi:graph",
-  },
-  {
-    title: "SEO Enabled",
-    description:
-      "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.",
-    icon: "mdi:search-web",
-  },
-  {
-    title: "Community",
-    description:
-      "Astro is an open source project powered by hundreds of contributors making thousands of individual contributions.",
-    icon: "mdi:account-group",
-  },
-];
----
-
-<ContentSection title="Features" id="features">
-  <Fragment slot="lead">
-    Astro comes <span class="text-primary">batteries included</span>. It takes
-    the best parts of
-    <span class="text-primary">state-of-the-art</span>
-    tools and adds its own <span class="text-primary">innovations</span>.
-  </Fragment>
-  <ul class="grid max-w-6xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-    {
-      features.map(({ title, description, icon }) => (
-        <li class="flex flex-col items-center gap-4 border border-default bg-offset p-6">
-          <div class="size-16 rounded-full border-2 border-current p-3">
-            <Icon name={icon} class="size-full" />
-          </div>
-          <p class="text-center font-extrabold text-xl">{title}</p>
-          <p class="text-center text-offset text-sm">{description}</p>
-        </li>
-      ))
-    }
-  </ul>
-</ContentSection>

src/components/footer.astro

@@ -5,24 +5,14 @@ import type { FooterLink } from "~/types";
 
 const links: Array<FooterLink> = [
   {
-    url: "https://astro.build/",
+    url: "https://sejournyc.com/",
-    description: "Astro's official website",
+    description: "Sejour NYC's main website",
     icon: "mdi:home",
   },
   {
-    url: "https://github.com/mhyfritz/astro-landing-page",
+    url: "https://instagram.com/sejournyc",
-    description: "View source on GitHub",
+    description: "Instagram",
-    icon: "fa-brands:github-alt",
+    icon: "fa-brands:instagram",
-  },
-  {
-    url: "https://astro.build/chat",
-    description: "Astro on Discord",
-    icon: "fa-brands:discord",
-  },
-  {
-    url: "https://twitter.com/astrodotbuild",
-    description: "Astro on Twitter",
-    icon: "fa-brands:twitter",
   },
 ];
 ---
@@ -31,7 +21,7 @@ const links: Array<FooterLink> = [
   <div class="absolute inset-0 overflow-hidden opacity-40">
     <HeroImage />
   </div>
-  <ul class="relative grid grid-cols-2 gap-4 sm:grid-cols-4">
+  <ul class="relative flex gap-4">
     {
       links.map((link) => (
         <li>

src/components/header.astro

@@ -1,12 +1,14 @@
 ---
 import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
+import logo from "~/assets/logo-temp.png";
 import ThemeSwitcher from "~/components/theme-switcher.astro";
 import type { NavItem } from "~/types";
 
 const navItems: Array<NavItem> = [
-  { title: "Features", url: "#features" },
+  { title: "How it works", url: "/#how-it-works" },
-  { title: "Compatibility", url: "#compatibility" },
+  { title: "Book a session", url: "/book-a-session" },
-  { title: "Showcase", url: "#showcase" },
+  { title: "Members", url: "/login" },
 ];
 ---
 
@@ -14,10 +16,14 @@ const navItems: Array<NavItem> = [
   id="page-header"
   class="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white"
 >
-  <a class="flex items-center gap-3 hover:!text-default" href="#">
+  <a class="flex items-center gap-3 hover:!text-default" href="/">
-    <h1 class="sr-only">Astro</h1>
+    <Image
-    <Icon name="logomark" class="size-10" />
+      src={logo}
-    <Icon name="wordmark" class="hidden h-4 sm:block" />
+      alt="Logo"
+      class="size-8"
+      style="filter: brightness(0) invert(1);"
+    />
+    <h1 class="font-bold tracking-wider">sejour</h1>
   </a>
   <div>
     <div class="flex items-center gap-6">
@@ -42,7 +48,7 @@ const navItems: Array<NavItem> = [
       >
         <Icon name="mdi:menu" class="size-8" />
       </button>
-      <ThemeSwitcher />
+      <!-- <ThemeSwitcher /> -->
     </div>
     <div id="menu-modal" class="modal hidden" aria-hidden="true">
       <div class="fixed inset-0 bg-default px-8 py-4 text-default">
@@ -58,7 +64,7 @@ const navItems: Array<NavItem> = [
             </button>
           </header>
           <div class="flex justify-center">
-            <Icon name="logomark" class="size-16" />
+            <Image src={logo} alt="Logo" class="size-16" />
           </div>
           <nav>
             <ul class="flex flex-col">
@@ -130,7 +136,7 @@ const navItems: Array<NavItem> = [
 <style>
   .fixed-header {
     @apply fixed bottom-auto top-0;
-    @apply border-default bg-default text-default;
+    /* @apply border-default bg-default text-default; */
   }
   .modal.is-open {
     @apply block;

src/components/how-it-works.astro

@@ -0,0 +1,61 @@
+---
+import { Icon } from "astro-icon/components";
+import ContentSection from "~/components/content-section.astro";
+import type { FeatureItem } from "~/types";
+
+const features: Array<FeatureItem> = [
+  {
+    title: "Shop",
+    description:
+      "The fun part! Buy from anywhere you like. And members enjoy expert designer advice and special discounts with top brands.",
+    icon: "mdi:store",
+  },
+  {
+    title: "Ship to Sejour",
+    description:
+      "We'll securely receive your package, unpack it, and keep your items ready for you in your dressing room. Never worry about package theft again.",
+    icon: "mdi:truck-check",
+  },
+  {
+    title: "Book a session",
+    description:
+      "We have four gorgeous, private dressing rooms in our Flatiron showroom. Book a session online to try on your items in person.",
+    icon: "mdi:calendar-clock",
+  },
+  {
+    title: "Make yourself at home",
+    description:
+      "During your session, the space is yours. Test outfits in the huge mirrors with natural lighting, borrow our professional cameras to snap some pictures of your fit, and enjoy some champagne or a freshly baked cookie from the kitchen.",
+    icon: "mdi:face-woman-shimmer",
+  },
+  {
+    title: "Go on your merry way",
+    description:
+      "Everything you tried on is already yours &mdash; just take what you like and leave. Our team will secure, pack, and ship out your unwanted items, same-day, with tracking info.",
+    icon: "mdi:reiterate",
+  },
+  {
+    title: "Join the community",
+    description:
+      "Sejour is bringing back the humanity that online shopping took away. Join a community of fashion lovers, share your style, and get personalized recommendations from our expert stylists.",
+    icon: "mdi:dance-ballroom",
+  },
+];
+---
+
+<ContentSection title="How It Works" id="how-it-works">
+  <Fragment slot="lead"> Quick blurb here? </Fragment>
+  <ul class="grid max-w-6xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    {
+      features.map(({ title, description, icon }) => (
+        <li class="flex flex-col items-center gap-4 border border-default bg-offset p-6">
+          <div class="size-16 rounded-full border-2 border-current p-3 text-primary">
+            <Icon name={icon} class="size-full" />
+          </div>
+          <p class="text-center font-extrabold text-xl ">{title}</p>
+          <p class="text-center text-offset text-sm">{description}</p>
+        </li>
+      ))
+    }
+  </ul>
+</ContentSection>

src/components/intro.astro

@@ -1,29 +1,29 @@
 ---
 import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
+import logo from "~/assets/logo-temp.png";
 import ContentSection from "~/components/content-section.astro";
 ---
 
-<ContentSection title="Just ship less" id="intro">
+<ContentSection title="All luxury, no cardboard." id="intro">
-  <Icon slot="eyebrow" name="logomark" class="size-32" />
+  <Image slot="eyebrow" src={logo} alt="Logo" class="size-24" />
   <Fragment slot="lead">
-    Astro is a new kind of site builder for the
+    Try on your online orders at Sejour, a beautiful new analog fitting room in
-    <span class="text-primary">modern</span> web.
+    Flatiron. We'll handle the boxes, you focus on the fit.
-    <span class="text-primary">Lightning-fast</span>
-    performance meets <span class="text-primary">powerful</span> developer experience.
   </Fragment>
   <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
     <a
-      href="https://docs.astro.build/"
+      href="/learn-more"
       class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
     >
-      <Icon name="mdi:telescope" class="size-8" />
+      <Icon name="mdi:list-box-outline" class="size-8" />
-      <span>Read the docs</span>
+      <span>Learn more</span>
     </a>
     <a
-      href="https://astro.new/"
+      href="/book-a-session"
       class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
     >
-      <Icon name="mdi:rocket" class="size-8" />
+      <Icon name="mdi:arrow-right" class="size-8" />
       <span>Try it out</span>
     </a>
   </div>

src/components/showcase-card.astro

@@ -1,35 +0,0 @@
----
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-
-export interface Props {
-  site: CollectionEntry<"showcase">;
-}
-
-const { site } = Astro.props;
-
-const widths = [450, 800];
-const sizes = "(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw";
----
-
-<a class="group aspect-video hover:!text-default" href={site.data.url}>
-  <figure class="relative h-full w-full overflow-hidden">
-    <Image
-      class="h-full w-full bg-cover object-cover transition-all duration-300 group-hover:scale-110 group-hover:opacity-20 group-focus:scale-110 group-focus:opacity-20"
-      src={site.data.image}
-      widths={widths}
-      sizes={sizes}
-      alt={`A screenshot of ${site.data.url}`}
-    />
-    <figcaption class="absolute inset-0">
-      <div
-        class="flex h-full flex-col items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:opacity-100 group-focus:opacity-100"
-      >
-        <h3 class="text-center font-extrabold uppercase text-xl">
-          {site.data.title}
-        </h3>
-        <p class="border border-current px-4 py-2">{site.data.url}</p>
-      </div>
-    </figcaption>
-  </figure>
-</a>

src/components/showcase.astro

@@ -1,31 +0,0 @@
----
-import { getCollection } from "astro:content";
-import ContentSection from "~/components/content-section.astro";
-import ShowcaseCard from "~/components/showcase-card.astro";
-
-const featuredSites = await getCollection(
-  "showcase",
-  ({ data }) => "featured" in data,
-);
-const orderedSites = featuredSites.sort(
-  (a, b) => a.data.featured! - b.data.featured!,
-);
----
-
-<ContentSection title="Showcase" id="showcase">
-  <Fragment slot="lead">
-    Astro is <span class="text-primary">versatile</span>.{" "}
-    <span class="text-primary">Explore</span> what's possible and get{" "}
-    <span class="text-primary">inspired</span>.
-  </Fragment>
-  <div class="max-w-6xl space-y-2">
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {orderedSites.map((site) => <ShowcaseCard site={site} />)}
-    </div>
-    <p class="text-right text-sm">
-      <a class="text-primary" href="https://astro.build/showcase/">
-        ...and more &rarr;
-      </a>
-    </p>
-  </div>
-</ContentSection>

src/components/splash.astro

@@ -1,58 +1,36 @@
 ---
 import { Image } from "astro:assets";
+import logo from "~/assets/logo-temp.png";
 import { Icon } from "astro-icon/components";
 import astronautImage from "~/assets/astronaut.png";
 import HeroImage from "~/components/hero-image.astro";
 import Starfield from "~/components/starfield.astro";
-import GitHubCorner from "./github-corner.astro";
 
 const widths = [450, 800];
 const sizes = "(min-width: 640px) 42vw, 67vw";
 ---
 
 <section class="relative h-full bg-black">
-  <Starfield />
+  
-  <GitHubCorner />
+  <div id="splash-bg" class="absolute inset-0 opacity-40">
-  <div id="splash-bg-fallback" class="absolute inset-0 hidden opacity-40">
     <HeroImage />
   </div>
   <div class="relative grid h-full place-items-center sm:grid-cols-2">
     <h2
       class="flex flex-col items-center gap-2 self-end sm:gap-4 sm:self-auto sm:justify-self-end"
     >
-      <Icon name="logomark" class="size-20 text-white md:size-32" />
       <div
-        class="gradient-text text-center font-extrabold tracking-tighter text-6xl md:text-8xl"
+        class="text-center text-white font-extrabold tracking-tighter text-6xl md:text-8xl"
       >
-        Build fast
+        The closet
-        <br /> websites,
+	<br/> you wish
-        <br /> faster.
+	<br/> you had.
       </div>
     </h2>
-    <div
+    <div></div>
-      id="astronaut"
-      class="w-2/3 max-w-3xl self-start sm:w-10/12 sm:self-auto sm:justify-self-start"
-    >
-      <Image
-        class="h-full w-full object-cover"
-        src={astronautImage}
-        widths={widths}
-        sizes={sizes}
-        loading="eager"
-        alt="A floating astronaut in a space suit"
-      />
-    </div>
   </div>
 </section>
 
-<noscript>
-  <style>
-    #splash-bg-fallback {
-      display: block;
-    }
-  </style>
-</noscript>
-
 <style>
   @keyframes float {
     0% {
@@ -77,7 +55,7 @@ const sizes = "(min-width: 640px) 42vw, 67vw";
       @apply hidden;
     }
 
-    #splash-bg-fallback {
+    #splash-bg {
       @apply block;
     }
   }

src/pages/book-a-session.astro

@@ -0,0 +1,79 @@
+---
+import "@fontsource-variable/inter";
+import Footer from "~/components/footer.astro";
+import Header from "~/components/header.astro";
+import Splash from "~/components/splash.astro";
+import "~/styles/index.css";
+
+const { generator, site } = Astro;
+const image = new URL("social.jpg", site);
+const description =
+    "Build fast websites, faster. Astro is a new kind of site builder for the modern web. Lightning-fast performance meets powerful developer experience.";
+---
+
+<!doctype html>
+<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <meta name="generator" content={generator} />
+
+        <title>Sejour</title>
+        <meta name="description" content={description} />
+
+        <!-- social media -->
+        <meta property="og:title" content="Astro" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+        <meta property="og:url" content={site} />
+        <meta name="twitter:card" content="summary_large_image" />
+
+        <!-- initialize theme -->
+        <script is:inline>
+            const themeSaved = localStorage.getItem("theme");
+
+            if (themeSaved) {
+                document.documentElement.dataset.theme = themeSaved;
+            } else {
+                const prefersDark = window.matchMedia(
+                    "(prefers-color-scheme: dark)",
+                ).matches;
+                document.documentElement.dataset.theme = prefersDark
+                    ? "dark"
+                    : "light";
+            }
+
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", (event) => {
+                    if (!localStorage.getItem("theme")) {
+                        document.documentElement.dataset.theme = event.matches
+                            ? "dark"
+                            : "light";
+                    }
+                });
+        </script>
+    </head>
+    <body
+        class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
+    >
+        <Header />
+
+        <div class="space-y-24 px-8 py-32">
+            <h1>Book a Session</h1>
+            <div>Not ready yet.</div>
+        </div>
+        <Footer />
+    </body>
+</html>
+
+<style is:global>
+    #page-header {
+        background-color: var(--color-primary);
+        top: 0;
+        @apply fixed bottom-auto top-0;
+        @apply border-default;
+    }
+</style>

src/pages/index.astro

@@ -1,11 +1,10 @@
 ---
 import "@fontsource-variable/inter";
-import Compatibility from "~/components/compatibility.astro";
+import CallToAction from "~/components/call-to-action.astro";
-import Features from "~/components/features.astro";
+import HowItWorks from "~/components/how-it-works.astro";
 import Footer from "~/components/footer.astro";
 import Header from "~/components/header.astro";
 import Intro from "~/components/intro.astro";
-import Showcase from "~/components/showcase.astro";
 import Splash from "~/components/splash.astro";
 import "~/styles/index.css";
 
@@ -23,7 +22,7 @@ const description =
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <meta name="generator" content={generator} />
 
-    <title>Astro Landing Page</title>
+    <title>Sejour</title>
     <meta name="description" content={description} />
 
     <!-- social media -->
@@ -65,9 +64,8 @@ const description =
     <Splash />
     <div class="space-y-24 px-8 py-32">
       <Intro />
-      <Features />
+      <HowItWorks />
-      <Compatibility />
+      <CallToAction />
-      <Showcase />
     </div>
     <Footer />
   </body>

src/pages/learn-more.astro

@@ -0,0 +1,84 @@
+---
+import "@fontsource-variable/inter";
+import Footer from "~/components/footer.astro";
+import Header from "~/components/header.astro";
+import Splash from "~/components/splash.astro";
+import "~/styles/index.css";
+
+const { generator, site } = Astro;
+const image = new URL("social.jpg", site);
+const description =
+    "Build fast websites, faster. Astro is a new kind of site builder for the modern web. Lightning-fast performance meets powerful developer experience.";
+---
+
+<!doctype html>
+<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <meta name="generator" content={generator} />
+
+        <title>Sejour</title>
+        <meta name="description" content={description} />
+
+        <!-- social media -->
+        <meta property="og:title" content="Astro" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+        <meta property="og:url" content={site} />
+        <meta name="twitter:card" content="summary_large_image" />
+
+        <!-- initialize theme -->
+        <script is:inline>
+            const themeSaved = localStorage.getItem("theme");
+
+            if (themeSaved) {
+                document.documentElement.dataset.theme = themeSaved;
+            } else {
+                const prefersDark = window.matchMedia(
+                    "(prefers-color-scheme: dark)",
+                ).matches;
+                document.documentElement.dataset.theme = prefersDark
+                    ? "dark"
+                    : "light";
+            }
+
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", (event) => {
+                    if (!localStorage.getItem("theme")) {
+                        document.documentElement.dataset.theme = event.matches
+                            ? "dark"
+                            : "light";
+                    }
+                });
+        </script>
+    </head>
+    <body
+        class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
+    >
+        <Header />
+
+        <div class="space-y-24 px-8 py-32">
+            <h1>Learn More</h1>
+            <div>Some more stuff here.</div>
+            <div>Some more stuff here.</div>
+            <div>Some more stuff here.</div>
+            <div>Some more stuff here.</div>
+            <div>Some more stuff here.</div>
+            <div>Some more stuff here.</div>
+        </div>
+        <Footer />
+    </body>
+</html>
+
+<style is:global>
+    #page-header {
+        background-color: var(--color-primary);
+        top: 0;
+        @apply fixed bottom-auto top-0;
+        @apply border-default;
+    }
+</style>

src/styles/theme.css

@@ -1,7 +1,7 @@
 [data-theme="light"] {
-  --color-primary: theme("colors.pink.500");
+  --color-primary: #6c492a;
-  --color-secondary: theme("colors.indigo.500");
+  --color-secondary: #200D06;
-  --color-text: theme("colors.gray.900");
+  --color-text: #0C0503;
   --color-text-offset: theme("colors.gray.600");
   --color-background: theme("colors.gray.50");
   --color-background-offset: theme("colors.gray.100");
@@ -10,10 +10,10 @@
 
 [data-theme="dark"] {
   --color-primary: theme("colors.pink.400");
-  --color-secondary: theme("colors.indigo.400");
+  --color-secondary: #f07941;
   --color-text: theme("colors.gray.50");
   --color-text-offset: theme("colors.gray.400");
   --color-background: theme("colors.gray.900");
   --color-background-offset: theme("colors.gray.800");
   --color-border: theme("colors.gray.50" / 10%);
-}
+}