feat: Create ExternalScript component

nextjs/src/app/[locale]/theme/page.tsx

@@ -21,6 +21,7 @@ import {
   whitepaperSection,
   twoColumnMarkdownSection,
   calendlySection,
+  youtubeSection,
 } from "./texts"
 import Container from "@/components/container"
 import CardSlider from "@/components/cards/card-slider"
@@ -42,6 +43,7 @@ import GetStartedForm from "@/components/form/get-started-form"
 import { type Locale } from "@/hooks/useLocale"
 import SectionWhitepaper from "@/components/sections/section-whitepaper"
 import SectionCalendly from "@/components/sections/section-calendly"
+import ExternalScript from "@/components/external-script"
 
 export default function Theme({
   params: { locale },
@@ -304,6 +306,15 @@ export default function Theme({
           <SectionCalendly url={calendlySection.url} />
         </SectionGroup>
       </Container>
+
+      <Container id="youtube" background="neutral" padding="both-padding">
+        <SectionGroup title="Youtube">
+          <ExternalScript
+            html={youtubeSection.html}
+            className="w-full h-auto"
+          />
+        </SectionGroup>
+      </Container>
     </main>
   )
 }

nextjs/src/app/[locale]/theme/texts.ts

@@ -541,6 +541,11 @@ export const calendlySection = {
   url: "https://calendly.com/embed-demo-sales/discovery-call",
 }
 
+export const youtubeSection = {
+  // html: `<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/byPYe4Fccww?si=-OiyW_1hWx-cVAic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
+  html: `<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//byPYe4Fccww' frameborder='0' allowfullscreen></iframe></div>`,
+}
+
 export const footer = {
   columns: [
     {

nextjs/src/components/external-script.tsx

@@ -0,0 +1,15 @@
+"use client"
+import React from "react"
+
+interface ExternalScriptProps {
+  html: string
+  className?: string
+}
+
+const ExternalScript: React.FC<ExternalScriptProps> = ({ html, className }) => {
+  return (
+    <div dangerouslySetInnerHTML={{ __html: html }} className={className} />
+  )
+}
+
+export default ExternalScript