Add video section

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,3 @@
-# 🚀 Pull Request
-
 ## Type of Change
 
 <!-- Select the type(s) of change your PR introduces -->

.storybook/preview.tsx

@@ -58,7 +58,7 @@ const preview: Preview = {
       return isDualMode ? (
         <DualThemeWrapper>{Story(context.args, context)}</DualThemeWrapper>
       ) : (
-        <div className={`h-screen w-screen bg-background ${theme}`}>
+        <div className={`h-screen w-full bg-background ${theme}`}>
           {Story(context.args, context)}
         </div>
       );

README.md

@@ -76,6 +76,7 @@ Qupid comes with pre-built sections that you can use to create your landing page
 | Steps    | Section with title, subtitle, and multiple steps (numbered icons with title and description). |
 | FAQ      | Section with title, subtitle, and multiple questions with answers.                            |
 | Terminal | Section with title, subtitle, and terminal-like code block with optional prompt.              |
+| Video    | Section with title, subtitle, and embedded video player.                                      |
 
 > [!TIP]
 > See [Storybook](https://kungfux.github.io/qupid/storybook/) for live demo of each section and how to configure them or use [Stackblitz](https://stackblitz.com/github/kungfux/qupid?file=configuration.yaml) to play with the configuration.
@@ -252,6 +253,7 @@ jobs:
                   twitter:
                     icon: fab fa-twitter
                     href: #
+
 ```
 
 </details>
@@ -339,7 +341,7 @@ site:
 
 Use `sections` block to define which sections should display and in which order.
 
-Each section has it's own configuration entries.Most of the elements are optional. Omit property declaration in the configuration if you don't need a section to display particular element.
+Each section has it's own configuration entries. Most of the elements are optional. Omit property declaration in the configuration if you don't need a section to display particular element.
 
 ```yml
 sections:
@@ -466,7 +468,7 @@ Here are some common special characters and how to handle them:
 
 - `` ` `` (backtick)
 
-  Use quotes if the backtick is part of a string value. Example: ```code: "Here is some `inline code` in a sentence."``` or use backslash to escape it: ```code: Here is some \`inline code\` in a sentence.```.
+  Use quotes if the backtick is part of a string value. Example: ``code: "Here is some `inline code` in a sentence."`` or use backslash to escape it: ``code: Here is some \`inline code\` in a sentence.``.
 
 ## 🤝 Feedback and Contributions
 

configuration.yaml

@@ -189,6 +189,14 @@ sections:
         description: Integrate with popular analytics providers like [Google Analytics](https://analytics.google.com/) and others to track your website's performance.
         icon: fas fa-chart-line
 
+  video:
+    type: video
+    title: Watch Qupid in Action
+    subtitle: See how easy it is to create a landing page with Qupid.
+    video:
+      src: https://www.youtube.com/embed/xz5jZ1zwFC4
+      ratio: 1.7777777777778 # 16 / 9 aspect ratio
+
   build_now:
     type: hero
     title: Build Now

package.json

@@ -8,12 +8,13 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",

src/configuration/types/sections/video-section.ts

@@ -0,0 +1,15 @@
+import type { RepeatableSection } from './repeatable-section';
+
+export const VIDEO_SECTION_TYPE = 'video' as const;
+
+export interface VideoItem {
+  src: string;
+  ratio?: number;
+}
+
+export interface VideoSection extends RepeatableSection {
+  type?: typeof VIDEO_SECTION_TYPE;
+  title?: string;
+  subtitle?: string;
+  video: VideoItem;
+}

src/sections.tsx

@@ -19,11 +19,16 @@ import {
   TERMINAL_SECTION_TYPE,
   type TerminalSection,
 } from './configuration/types/sections/terminal-section';
+import {
+  VIDEO_SECTION_TYPE,
+  type VideoSection,
+} from './configuration/types/sections/video-section';
 import Cards from './ui/sections/cards';
 import Faq from './ui/sections/faq';
 import Hero from './ui/sections/hero';
 import Steps from './ui/sections/steps';
 import Terminal from './ui/sections/terminal';
+import Video from './ui/sections/video';
 
 export default function Sections({ sections }: Record<string, Section>) {
   return (
@@ -97,6 +102,19 @@ export default function Sections({ sections }: Record<string, Section>) {
           );
         }
 
+        case VIDEO_SECTION_TYPE: {
+          const video = section as VideoSection;
+          return (
+            <Video
+              id={key}
+              key={key}
+              title={video.title}
+              subtitle={video.subtitle}
+              video={video.video}
+            />
+          );
+        }
+
         default:
           return null;
       }