1- import React , { useEffect } from ' react'
1+ import React , { useEffect } from " react" ;
22import {
33 useStoryblok ,
44 storyblokInit ,
55 apiPlugin ,
6- StoryblokComponent
7- } from ' @storyblok/react'
8- import Layout from ' @theme/Layout'
6+ StoryblokComponent ,
7+ } from " @storyblok/react" ;
8+ import Layout from " @theme/Layout" ;
99
10- import Page from ' ../../components/sbComponents/Page'
11- import { render } from ' storyblok-rich-text-react-renderer'
12- import useDocusaurusContext from ' @docusaurus/useDocusaurusContext'
13- import Architecture from ' ../../components/composer/Architecture'
14- import Feature from ' ../../components/composer/Feature'
15- import GetStarted from ' ../../components/composer/GetStarted'
16- import LearnPlatformatic from ' ../../components/composer/Learnplatformatic'
10+ import Page from " ../../components/sbComponents/Page" ;
11+ import { render } from " storyblok-rich-text-react-renderer" ;
12+ import useDocusaurusContext from " @docusaurus/useDocusaurusContext" ;
13+ import Architecture from " ../../components/composer/Architecture" ;
14+ import Feature from " ../../components/composer/Feature" ;
15+ import GetStarted from " ../../components/composer/GetStarted" ;
16+ import LearnPlatformatic from " ../../components/composer/Learnplatformatic" ;
1717
1818storyblokInit ( {
1919 accessToken : process . env . STORYBLOK_ACCESS_TOKEN ,
2020 use : [ apiPlugin ] ,
2121 components : {
22- page : Page
22+ page : Page ,
2323 } ,
2424 apiOptions : {
25- region : 'eu'
26- }
27- } )
25+ region : "eu" ,
26+ } ,
27+ } ) ;
2828
29- function PageHeader ( { blok } ) {
29+ function PageHeader ( { blok } ) {
3030 return (
31- < header className = ' h-full dark overflow-hidden' >
32- < div className = ' w-full flex flex-col lg:flex-row items-center overflow-x-hidden' >
33- < div className = ' relative px-[2%] lg:px-0 lg:pl-[6rem] pt-[4rem]' >
31+ < header className = " h-full dark overflow-hidden" >
32+ < div className = " w-full flex flex-col lg:flex-row items-center overflow-x-hidden" >
33+ < div className = " relative px-[2%] lg:px-0 lg:pl-[6rem] pt-[4rem]" >
3434 < img
3535 src = { blok . hero [ 0 ] . gradient_left . filename }
36- className = ' absolute -z-10 left-0 lg:-top-[50%]'
37- alt = ' gradient'
36+ className = " absolute -z-10 left-0 lg:-top-[50%]"
37+ alt = " gradient"
3838 />
39- < div className = ' w-[90%] lg:w-[42.8rem] flex flex-col z-40' >
40- < a className = ' mb-[2rem]' href = { blok . hero [ 0 ] . github_link . url } >
41- < button className = ' h-[2.5rem] bg-[#2192FA] px-5 rounded-[6.25rem] flex items-center justify-center gap-1' >
39+ < div className = " w-[90%] lg:w-[42.8rem] flex flex-col z-40" >
40+ < a className = " mb-[2rem]" href = { blok . hero [ 0 ] . github_link . url } >
41+ < button className = " h-[2.5rem] bg-[#2192FA] px-5 rounded-[6.25rem] flex items-center justify-center gap-1" >
4242 < img
4343 src = { blok . hero [ 0 ] . github_logo }
44- className = ' w-[1rem] h-[1rem]'
45- alt = ' github'
44+ className = " w-[1rem] h-[1rem]"
45+ alt = " github"
4646 />
47- < span className = ' text-[#00050B] text-[0.8rem] uppercase' >
47+ < span className = " text-[#00050B] text-[0.8rem] uppercase" >
4848 { blok . hero [ 0 ] . github_text }
4949 </ span >
5050 </ button >
5151 </ a >
52- < span className = ' text-white lg:w-auto text-[30px] lg:text-[3.5rem] font-[700] leading-[36.57px] lg:leading-[4.26rem] mb-[2rem]' >
52+ < span className = " text-white lg:w-auto text-[30px] lg:text-[3.5rem] font-[700] leading-[36.57px] lg:leading-[4.26rem] mb-[2rem]" >
5353 { render ( blok . hero [ 0 ] . hero_title ) }
5454 </ span >
55- < span className = ' text-[#FFFFFFB2] md:w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]' >
55+ < span className = " text-[#FFFFFFB2] md:w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]" >
5656 { render ( blok . hero [ 0 ] . hero_subtitle ) }
5757 </ span >
58- < div className = ' flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]' >
58+ < div className = " flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]" >
5959 { blok . hero [ 0 ] . cta_buttons . map ( ( cta ) => (
6060 < a
6161 key = { cta . _uid }
6262 href = { cta . cta_url . url }
6363 className = { `${
64- cta . btn_variant == ' filled'
65- ? ' text-[#00283D]'
66- : ' hover:text-white'
64+ cta . btn_variant == " filled"
65+ ? " text-[#00283D]"
66+ : " hover:text-white"
6767 } `}
6868 >
6969 < button
7070 className = { `${
71- cta . btn_variant == ' filled'
72- ? ' bg-[#FFFFFF] text-[#00283D]'
73- : ' border border-[#FFFFFF]'
71+ cta . btn_variant == " filled"
72+ ? " bg-[#FFFFFF] text-[#00283D]"
73+ : " border border-[#FFFFFF]"
7474 } rounded-[4px] h-[2.5rem] w-[8rem] lg:w-[9.28rem] text-[1rem] font-[600]`}
7575 >
7676 { cta . btn_caption }
@@ -80,95 +80,109 @@ function PageHeader ({ blok }) {
8080 </ div >
8181 </ div >
8282 </ div >
83- < div className = '' >
84- < img src = { blok . hero [ 0 ] . hero_image } alt = 'hero_image' />
83+ < div className = "" >
84+ < iframe
85+ width = "560"
86+ height = "315"
87+ src = { blok . hero [ 0 ] . hero_embed . url }
88+ title = "YouTube video player"
89+ frameBorder = "0"
90+ allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
91+ allowFullScreen
92+ > </ iframe >
8593 </ div >
8694 </ div >
8795 </ header >
88- )
96+ ) ;
8997}
9098
91- export default function Composer ( ) {
92- const { siteConfig } = useDocusaurusContext ( )
93- let slug = ' composer'
94- const story = useStoryblok ( slug , { version : ' draft' } )
99+ export default function Composer ( ) {
100+ const { siteConfig } = useDocusaurusContext ( ) ;
101+ let slug = " composer" ;
102+ const story = useStoryblok ( slug , { version : " draft" } ) ;
95103
96104 useEffect ( ( ) => {
97- const script = document . createElement ( ' script' )
98- script . src = ' https://js.hsforms.net/forms/v2.js'
99- document . body . appendChild ( script )
105+ const script = document . createElement ( " script" ) ;
106+ script . src = " https://js.hsforms.net/forms/v2.js" ;
107+ document . body . appendChild ( script ) ;
100108
101- script . addEventListener ( ' load' , ( ) => {
109+ script . addEventListener ( " load" , ( ) => {
102110 if ( window . hbspt ) {
103111 window . hbspt . forms . create ( {
104- portalId : ' 22380288' ,
105- formId : ' 63b16ade-bdfb-475d-b40e-f017f7278e1a' ,
106- target : ' #composer' ,
107- region : ' na1' ,
108- cssClass : ' light-mode' ,
112+ portalId : " 22380288" ,
113+ formId : " 63b16ade-bdfb-475d-b40e-f017f7278e1a" ,
114+ target : " #composer" ,
115+ region : " na1" ,
116+ cssClass : " light-mode" ,
109117 onFormReady : function ( $form ) {
110- const iframe = document . querySelector ( ' iframe' )
118+ const iframe = document . querySelector ( " iframe" ) ;
111119 if ( iframe ) {
112- const observer = new MutationObserver ( ( mutationsList , observer ) => {
113- for ( const mutation of mutationsList ) {
114- if ( mutation . type === 'childList' && iframe . contentDocument ) {
115- const doc =
116- iframe . contentDocument || iframe . contentWindow ?. document
117- if ( doc ) {
118- // Set the background color of the iframe's body
119- doc . body . style . backgroundColor = '#040607'
120- // doc.body.style.backgroundColor = darkMode
121- // ? '#00050b'
122- // : '#FAFAFA'
120+ const observer = new MutationObserver (
121+ ( mutationsList , observer ) => {
122+ for ( const mutation of mutationsList ) {
123+ if (
124+ mutation . type === "childList" &&
125+ iframe . contentDocument
126+ ) {
127+ const doc =
128+ iframe . contentDocument ||
129+ iframe . contentWindow ?. document ;
130+ if ( doc ) {
131+ // Set the background color of the iframe's body
132+ doc . body . style . backgroundColor = "#040607" ;
133+ // doc.body.style.backgroundColor = darkMode
134+ // ? '#00050b'
135+ // : '#FAFAFA'
123136
124- const labels = doc . querySelectorAll ( 'label' )
125- labels . forEach ( ( label ) => {
126- // label.style.color = darkMode ? 'white' : '#00050b'
127- label . style . color = '#ffffff'
128- } )
129- observer . disconnect ( ) // Stop observing after labels and background are adjusted
137+ const labels = doc . querySelectorAll ( "label" ) ;
138+ labels . forEach ( ( label ) => {
139+ // label.style.color = darkMode ? 'white' : '#00050b'
140+ label . style . color = "#ffffff" ;
141+ } ) ;
142+ observer . disconnect ( ) ; // Stop observing after labels and background are adjusted
143+ }
130144 }
131145 }
132146 }
133- } )
147+ ) ;
134148
135149 observer . observe ( iframe . contentDocument , {
136150 childList : true ,
137- subtree : true
138- } )
151+ subtree : true ,
152+ } ) ;
139153 } else {
140- console . error ( ' Iframe not found.' )
154+ console . error ( " Iframe not found." ) ;
141155 }
142- }
143- } )
156+ } ,
157+ } ) ;
144158 } else {
145- console . error ( ' hbspt not available.' )
159+ console . error ( " hbspt not available." ) ;
146160 }
147- } )
161+ } ) ;
148162
149- script . addEventListener ( ' error' , ( ) => {
150- console . error ( ' Failed to load the script.' )
151- } )
152- } , [ story ] )
163+ script . addEventListener ( " error" , ( ) => {
164+ console . error ( " Failed to load the script." ) ;
165+ } ) ;
166+ } , [ story ] ) ;
153167
154- if ( globalThis . window && globalThis . window . location . pathname !== '/' ) {
155- slug = globalThis . window . location . pathname . replace ( '/' , '' )
168+ if ( globalThis . window && globalThis . window . location . pathname !== "/" ) {
169+ slug = globalThis . window . location . pathname . replace ( "/" , "" ) ;
156170 }
157171 if ( ! story || ! story . content ) {
158- return < div > Loading...</ div >
172+ return < div > Loading...</ div > ;
159173 }
160174
161175 return (
162- < Layout title = ' Hello' description = ' Hello React Page' >
176+ < Layout title = " Hello" description = " Hello React Page" >
163177 < PageHeader blok = { story . content } />
164178 < Architecture blok = { story . content } />
165179 < Feature blok = { story . content } />
166180 < GetStarted blok = { story . content } />
167181 < LearnPlatformatic blok = { story . content } />
168182 < div
169- className = ' !text-[#00050b] dark:!text-white w-[90%] lg:w-[35%] mx-auto border border-[#FFFFFF26] rounded-[6px] my-4 px-[1rem] py-8'
170- id = ' composer'
183+ className = " !text-[#00050b] dark:!text-white w-[90%] lg:w-[35%] mx-auto border border-[#FFFFFF26] rounded-[6px] my-4 px-[1rem] py-8"
184+ id = " composer"
171185 />
172186 </ Layout >
173- )
187+ ) ;
174188}
0 commit comments