@@ -158,25 +158,25 @@ const LandingTryItOptionsSection = ({
158158 "relative" ,
159159 "flex" ,
160160 "flex-col landing-md:flex-row" ,
161+ "gap-1" ,
161162 className ,
162163 ) }
163164 >
164165 < div
165166 className = { clsx (
166167 "flex-1" ,
167- "rounded-2xl landing-md:rounded-3xl" ,
168- "landing-md:rounded-tr-none landing-md:rounded-br-none" ,
169168 "flex" ,
170169 "flex-col" ,
171170 "gap-6 landing-sm:gap-10" ,
172- "pt-4 landing-sm:pt-8" ,
173- "pb-4 landing-sm:pb-8" ,
174- "px-4 landing-sm:px-10" ,
175- "bg-zinc-800" ,
171+ "pt-10" ,
172+ "pb-20" ,
173+ "px-10" ,
174+ "bg-zinc-800 landing-md:bg-transparent" ,
175+ "rounded-tl-[0.75rem]" ,
176+ "rounded-tr-[0.75rem]" ,
177+ "rounded-br-[0.75rem]" ,
178+ "rounded-bl-[3rem]" ,
176179 ) }
177- style = { {
178- backgroundRepeat : "no-repeat, repeat" ,
179- } }
180180 >
181181 < div
182182 className = { clsx (
@@ -221,59 +221,37 @@ const LandingTryItOptionsSection = ({
221221 </ div >
222222 < div
223223 className = { clsx (
224- "h-4 landing-md:h-full" ,
225- "w-full landing-md:w-0" ,
226- "relative" ,
227- "flex-shrink-0" ,
224+ "landing-md:hidden" ,
225+ "absolute" ,
226+ "top-1/2" ,
227+ "left-20" ,
228+ "-translate-x-1/2" ,
229+ "-translate-y-1/2" ,
230+ "text-white" ,
231+ "w-20 h-20" ,
232+ "rounded-full" ,
233+ "text-xl" ,
234+ "uppercase" ,
235+ "flex items-center justify-center" ,
236+ "bg-zinc-900" ,
228237 ) }
229238 >
230- < div
231- className = { clsx (
232- "hidden" ,
233- "landing-md:block" ,
234- "absolute" ,
235- "-left-2" ,
236- "skew-x-[14deg]" ,
237- "top-0" ,
238- "h-[272px]" ,
239- "w-2" ,
240- "bg-gray-900" ,
241- ) }
242- />
243- < div
244- className = { clsx (
245- "absolute" ,
246- "-top-6 left-8" ,
247- "landing-md:top-32 landing-md:-left-1" ,
248- "landing-md:-translate-x-1/2" ,
249- "landing-md:-translate-y-1/2" ,
250- "bg-zinc-900" ,
251- "text-white" ,
252- "w-16 h-16 landing-md:w-[78px] landing-md:h-[78px]" ,
253- "rounded-full" ,
254- "text-base" ,
255- "uppercase" ,
256- "flex items-center justify-center" ,
257- ) }
258- >
259- or
260- </ div >
239+ or
261240 </ div >
262241 < div
263242 className = { clsx (
264- "flex-1" ,
265- "rounded-2xl landing-md:rounded-3xl" ,
266243 "flex flex-col" ,
267- "landing-md:rounded-tl-none landing-md:rounded-bl-none" ,
268- "pt-4 landing-sm:pt-8" ,
269- "pb-4 landing-sm:pb-8" ,
270- "px-4 landing-sm:px-10" ,
271- "bg-zinc-800" ,
244+ "flex-1" ,
245+ "pt-20" ,
246+ "pb-10" ,
247+ "px-10" ,
272248 "landing-md:items-end" ,
249+ "bg-zinc-800 landing-md:bg-transparent" ,
250+ "rounded-tl-[0.75rem]" ,
251+ "rounded-tr-[3rem]" ,
252+ "rounded-br-[0.75rem]" ,
253+ "rounded-bl-[0.75rem]" ,
273254 ) }
274- style = { {
275- backgroundRepeat : "no-repeat, repeat" ,
276- } }
277255 >
278256 < div
279257 className = { clsx (
@@ -294,7 +272,7 @@ const LandingTryItOptionsSection = ({
294272 < div > Run the npm command in Terminal and</ div >
295273 < div > follow the wizard instructions.</ div >
296274 </ div >
297- < LandingCopyCommandButton className = { "!bg-zinc-700" } />
275+ < LandingCopyCommandButton />
298276 </ div >
299277 </ div >
300278 </ div >
@@ -344,25 +322,13 @@ const LandingTryItWizardSection = ({
344322 "landing-md:flex" ,
345323 ) }
346324 >
347- < div
348- className = { clsx (
349- "flex-1" ,
350- "bg-zinc-900" ,
351- "opacity-0" ,
352- visible && "opacity-100" ,
353- "transition-[background-color,background,opacity]" ,
354- "duration-150" ,
355- "ease-in-out" ,
356- "bg-no-repeat" ,
357- ) }
358- />
325+ { ! visible && < BackgroundGraphicDesktop /> }
359326 < div
360327 ref = { ref }
361328 className = { clsx (
362329 "box-content" ,
363330 "flex-shrink-0" ,
364331 "rounded-2xl landing-md:rounded-3xl" ,
365- "bg-zinc-800" ,
366332 "border border-solid" ,
367333 "transition-[border-color,width,height,opacity,background-color]" ,
368334 "mx-auto" ,
@@ -372,7 +338,7 @@ const LandingTryItWizardSection = ({
372338 "scrollbar-hidden" ,
373339 ! visible && [ "pointer-events-none" , "select-none" ] ,
374340 ! visible && [ "landing-md:border-transparent" ] ,
375- visible && [ "landing-md:border-zinc-700" , "landing-md:bg-zinc-800" ] ,
341+ visible && [ "landing-md:border-zinc-700" ] ,
376342 ! visible && [
377343 "landing-md:opacity-0" ,
378344 "landing-md:h-0" ,
@@ -408,18 +374,56 @@ const LandingTryItWizardSection = ({
408374 />
409375 ) : null }
410376 </ div >
377+ </ div >
378+ ) ;
379+ } ;
380+
381+ const BackgroundGraphicDesktop = ( props ) => {
382+ return (
383+ < div
384+ className = { clsx (
385+ "absolute" ,
386+ "top-0" ,
387+ "left-0" ,
388+ "w-full" ,
389+ "h-full" ,
390+ "overflow-hidden" ,
391+ "pointer-events-none" ,
392+ "z-0" ,
393+ ) }
394+ >
395+ < svg
396+ xmlns = "http://www.w3.org/2000/svg"
397+ width = "100%"
398+ height = "100%"
399+ viewBox = "0 0 1200 208"
400+ fill = "none"
401+ preserveAspectRatio = "none"
402+ { ...props }
403+ >
404+ < path
405+ fill = "#27272A"
406+ d = "M640.76 196.648c2.447 5.3-1.425 11.352-7.263 11.352H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h476.576c37.445 0 71.473 21.772 87.164 55.77l65.02 140.878ZM1200 196c0 6.627-5.37 12-12 12H711.424c-37.445 0-71.473-21.772-87.164-55.77L559.24 11.353C556.793 6.051 560.665 0 566.503 0H1188c6.63 0 12 5.373 12 12v184Z"
407+ />
408+ </ svg >
411409 < div
412410 className = { clsx (
413- "flex-1" ,
411+ "absolute" ,
412+ "top-1/2" ,
413+ "left-1/2" ,
414+ "-translate-x-1/2" ,
415+ "-translate-y-1/2" ,
416+ "text-white" ,
417+ "w-20 h-20" ,
418+ "rounded-full" ,
419+ "text-xl" ,
420+ "uppercase" ,
421+ "flex items-center justify-center" ,
414422 "bg-zinc-900" ,
415- "opacity-0" ,
416- visible && "opacity-100" ,
417- "transition-[background-color,background,opacity]" ,
418- "duration-150" ,
419- "ease-in-out" ,
420- "bg-no-repeat" ,
421423 ) }
422- />
424+ >
425+ or
426+ </ div >
423427 </ div >
424428 ) ;
425429} ;
0 commit comments