|
1 | 1 | import React, { useEffect, useState } from 'react'; |
2 | 2 | import LandingSection from './LandingSection'; |
3 | | -import { Code, LayoutDashboard, List } from 'lucide-react'; |
| 3 | +import { Code, LayoutDashboard, List, PlayCircle } from 'lucide-react'; |
4 | 4 | import { useTabs } from './tabs/useTabs'; |
5 | 5 | import { Framer } from './tabs/framer'; |
6 | 6 |
|
@@ -32,6 +32,7 @@ export default function HeroExample() { |
32 | 32 | }); |
33 | 33 | const framer = useTabs(hookProps); |
34 | 34 |
|
| 35 | + /* |
35 | 36 | useEffect(() => { |
36 | 37 | const video = document.getElementById('main-video') as HTMLVideoElement; |
37 | 38 |
|
@@ -65,29 +66,55 @@ export default function HeroExample() { |
65 | 66 | }; |
66 | 67 | }, []); |
67 | 68 |
|
| 69 | + <Framer.Tabs {...framer.tabProps} color="slate" /> |
| 70 | +
|
| 71 | +
|
| 72 | + */ |
| 73 | + |
| 74 | + const [played, setPlayed] = useState(false); |
| 75 | + |
| 76 | + // When played toggles to true, start the video |
| 77 | + useEffect(() => { |
| 78 | + const video = document.getElementById('main-video') as HTMLVideoElement; |
| 79 | + if (played) { |
| 80 | + video.play(); |
| 81 | + } |
| 82 | + }, [played]); |
| 83 | + |
68 | 84 | return ( |
69 | 85 | <LandingSection bgClass="bg-white"> |
70 | 86 | <div className="w-full gap-8 flex flex-col"> |
71 | 87 | <h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-slate-500 to-slate-800"> |
72 | 88 | Give your scripts Superpowers |
73 | 89 | </h1> |
74 | 90 | <p className="text-gray-600 max-w-5xl"> |
75 | | - Make your scripts production grade and build all of your internal tools |
76 | | - with Python, Typescript, Go, Bash, Sql. Compose your scripts as workflows |
77 | | - using low-code. <br />Share an autogenerated UI or build one using low-code. Run |
78 | | - it reliably at scale on your infra or ours, with permissioning and monitoring included. |
79 | | - Fully open-source and easy to deploy on small and large infra. Any dependency with zero-config. |
| 91 | + Make your scripts production grade and build all of your internal tools with Python, |
| 92 | + Typescript, Go, Bash, Sql. Compose your scripts as workflows using low-code. <br /> |
| 93 | + Share an autogenerated UI or build one using low-code. Run it reliably at scale on your |
| 94 | + infra or ours, with permissioning and monitoring included. Fully open-source and easy to |
| 95 | + deploy on small and large infra. Any dependency with zero-config. |
80 | 96 | </p> |
81 | | - <Framer.Tabs {...framer.tabProps} color="slate" /> |
82 | 97 |
|
83 | | - <video |
84 | | - className="border-2 rounded-xl object-cover w-full h-full" |
85 | | - autoPlay |
86 | | - loop |
87 | | - controls |
88 | | - id="main-video" |
89 | | - src="/videos/main.mp4" |
90 | | - /> |
| 98 | + <div className="relative"> |
| 99 | + {!played && ( |
| 100 | + <div className="absolute top-0 bottom-0 left-0 right-0 bg-black opacity-75 rounded-xl z-50 flex justify-center items-center flex-col gap-2"> |
| 101 | + <PlayCircle |
| 102 | + size={80} |
| 103 | + onClick={() => setPlayed(true)} |
| 104 | + className="text-white hover:text-blue-400 cursor-pointer transition-all" |
| 105 | + /> |
| 106 | + <span className="text-white font-bold text-2xl">Windmill in 58 secs</span> |
| 107 | + </div> |
| 108 | + )} |
| 109 | + |
| 110 | + <video |
| 111 | + className="border-2 rounded-xl object-cover w-full h-full" |
| 112 | + loop |
| 113 | + controls={played} |
| 114 | + id="main-video" |
| 115 | + src="/videos/main.mp4" |
| 116 | + /> |
| 117 | + </div> |
91 | 118 | </div> |
92 | 119 | </LandingSection> |
93 | 120 | ); |
|
0 commit comments