update try it out component

Author: tyrelchambers

src/components/CodeSample/CodeSampleReact.tsx

@@ -13,7 +13,7 @@ export const CodeSampleReact: React.FC<CodeSampleReactProps> = ({ src, showButto
 
   const isSolidityFile = src.match(/\.sol/)
   const isSample = isSolidityFile && (src.indexOf("samples/") === 0 || src.indexOf("/samples/") === 0)
-
+  console.log(!isSample || !showButtonOnly || !remixUrl)
   if (!isSample || !showButtonOnly || !remixUrl) return null
 
   return (

src/components/LeftSidebar/leftSidebar.module.css

@@ -9,6 +9,7 @@
 
 .navGroups {
   padding: 0 var(--space-10x) var(--space-10x) 0;
+  height: calc(100vh - var(--space-16x) - var(--space-16x)); /* Subtract header and footer height */
 
   overflow-y: auto;
   scrollbar-width: thin;

src/components/TryItOut/TryItOut.astro

@@ -0,0 +1,25 @@
+---
+import { Button, Typography } from "@chainlink/blocks"
+import styles from "./styles.module.css"
+import CodeSample from "../CodeSample/CodeSample.astro"
+import { TryItOutAccordion } from "./TryItOutAccordion"
+---
+
+<div class={styles.container}>
+  <section class={styles.body}>
+    <Typography variant="h2" className={styles.title}> Try it out </Typography>
+
+    <section class={styles.content}>
+      <div>
+        <TryItOutAccordion client:only="react" />
+
+        <footer class={styles.contentFooter}>
+          <Button>Create CRE account</Button>
+          <Button variant="tertiary" className={styles.secondaryBtn}> Get the SDK </Button>
+        </footer>
+      </div>
+
+      <!-- <CodeSample src="/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol" /> -->
+    </section>
+  </section>
+</div>

src/components/TryItOut/TryItOut.tsx

@@ -0,0 +1,39 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Typography } from "@chainlink/blocks"
+import styles from "./styles.module.css"
+
+export const TryItOutAccordion = () => {
+  const tabs = [
+    {
+      title: "Transfer Tokens Between Chains",
+      text: "Use Chainlink CCIP to transfer tokens from a smart contract to an account on a different blockchain.",
+    },
+    {
+      title: "Leverage MVR feeds",
+      text: "Use Multiple-Variable Response (MVR) feeds data in your consumer contracts on EVM chains using Solidity.",
+    },
+    {
+      title: "Fetch and Decode Real World Asset Streams",
+      text: "Use the Data Streams SDK for Go/Rust to fetch and decode reports from the Data Streams Aggregation Network.",
+    },
+    {
+      title: "Automate your Functions",
+      text: "Use Chainlink Automation to trigger the same functions regularly, such as fetching weather data daily or fetching an asset price on every block.",
+    },
+  ]
+
+  return (
+    <Accordion collapsible type="single">
+      {tabs.map((tab, idx) => (
+        <AccordionItem key={idx} value={String(idx)} className={styles.accordionItem}>
+          <AccordionTrigger className={styles.accordionTrigger}>
+            {tab.title}{" "}
+            <Typography variant="code" className={styles.indicator}>
+              0{idx + 1}
+            </Typography>
+          </AccordionTrigger>
+          <AccordionContent className={styles.text}>{tab.text}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}

src/components/TryItOut/TryItOutAccordion.tsx

@@ -1,6 +1,7 @@
 .container {
   background-color: var(--tertiary-foreground);
   padding: var(--space-10x) var(--space-16x);
+  margin: 86px 0;
 }
 
 .title {
@@ -30,7 +31,10 @@
   border-top: 1px solid var(--segment-button-foreground);
   display: flex;
   flex-direction: column;
-  transition: all 0.3s ease-in-out;
+
+  * {
+    transition: all 0.2s linear;
+  }
 }
 
 .text {

src/components/TryItOut/styles.module.css

@@ -7,7 +7,7 @@ import * as CONFIG from "../config"
 import Demos from "~/components/Demos.astro"
 import { Typography } from "@chainlink/blocks"
 import LandingHero from "~/components/LandingHero/LandingHero.astro"
-import TryItOut from "~/components/TryItOut/TryItOut"
+import TryItOut from "~/components/TryItOut/TryItOut.astro"
 
 const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
 ---
@@ -20,7 +20,7 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
       <JourneyCards />
     </div>
 
-    <TryItOut client:only="react" />
+    <TryItOut />
 
     <div class="wrapper">
       <Demos />