ref(website): Adjust 30 seconds to liftoff (#193)

getsentry · Dec 1, 2023 · 68ec4a9 · 68ec4a9
1 parent e700ebf
commit 68ec4a9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/website/src/components/FeatureCard.astro b/packages/website/src/components/FeatureCard.astro
@@ -1,5 +1,5 @@
 ---
-const { title, description, accentColor, reverse, linkText, linkUrl } = Astro.props;
+const { title, description, accentColor, reverse, linkText, linkUrl, imageUrl } = Astro.props;
 import { LinkCard } from '@astrojs/starlight/components';
 ---
 
@@ -68,6 +68,7 @@ import { LinkCard } from '@astrojs/starlight/components';
     <h5 class="mb-2 heading">{title}</h5>
     <p>{description}</p>
     {linkUrl && linkText ? <a href={linkUrl} class="link">{linkText}</a> : null}
+    <slot name="image"/>
   </div>
   <div class="flex-1 max-w-xl h-max" style={{margin: 0}}>
     <slot />

diff --git a/packages/website/src/components/LandingPage.astro b/packages/website/src/components/LandingPage.astro
@@ -27,9 +27,10 @@ import { Content as CodeBlock } from './codeblock.mdx';
     linkUrl="/setup"
     linkText="Setup"
   >
+    <img slot="image" class="!hidden md:!block lg:w-8/12 mt-12 mx-auto " src="/images/simple-event-flow.png"  />
     <CodeBlock />
+    <img class="md:!hidden mx-auto !mt-12 w-8/12" src="/images/simple-event-flow.png"  />
   </FeatureCard>
-  <img class="centered lg:w-4/12 w-10/12" src="/images/simple-event-flow.png"  />
 </Section>
 
 

diff --git a/packages/website/src/components/codeblock.mdx b/packages/website/src/components/codeblock.mdx
@@ -2,14 +2,18 @@
 title: Setup Codeblock
 ---
 
-```ts
+```shell title="1. Install Spotlight"
+npm install @spotlightjs/spotlight
+```
+
+```ts title="2. Init the Overlay" frame="terminal"
 import * as Spotlight from '@spotlightjs/spotlight';
 
 if (process.env.NODE_ENV === 'development') {
   Spotlight.init();
 }
 ```
 
-```shell
+```shell title="3. Start the Sidecar"
 npx spotlight-sidecar
 ```