Update src/components/sections/hero/HeroBillboard.tsx

src/components/sections/hero/HeroBillboard.tsx

@@ -1,93 +1,29 @@
-"use client";
+import React from 'react';
 
-import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig } from "@/types/button";
-
-interface HeroBillboardProps {
-  title: string;
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  buttons?: ButtonConfig[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  videoAriaLabel?: string;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  mediaWrapperClassName?: string;
-  imageClassName?: string;
-}
-
-const HeroBillboard = ({
-  title,
-  description,
-  tag,
-  tagIcon,
-  buttons,
-  imageSrc,
-  videoSrc,
-  imageAlt = "",
-  videoAriaLabel = "Hero video",
-  ariaLabel = "Hero section",
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  mediaWrapperClassName = "",
-  imageClassName = "",
-}: HeroBillboardProps) => {
+const HeroBillboard = () => {
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls("w-full py-hero-page-padding", className)}
-    >
-      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15", containerClassName)}>
-        <TextBox
-          title={title}
-          description={description}
-          tag={tag}
-          tagIcon={tagIcon}
-          buttons={buttons}
-          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
-          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
-          descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
-          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
-          buttonContainerClassName={cls("flex gap-4 mt-3", buttonContainerClassName)}
-          buttonClassName={buttonClassName}
-          buttonTextClassName={buttonTextClassName}
-          center={true}
-        />
-        <div className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
-          <MediaContent
-            imageSrc={imageSrc}
-            videoSrc={videoSrc}
-            imageAlt={imageAlt}
-            videoAriaLabel={videoAriaLabel}
-            imageClassName={cls("z-1", imageClassName)}
-          />
+    <section className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="text-center">
+          <h1 className="text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            Build Beautiful Components
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
+            Create stunning web applications with our modern component library.
+            Fast, reliable, and beautiful.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
+              Get Started
+            </button>
+            <button className="bg-white text-gray-900 px-8 py-3 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
+              Learn More
+            </button>
+          </div>
         </div>
       </div>
     </section>
   );
 };
 
-HeroBillboard.displayName = "HeroBillboard";
-
 export default HeroBillboard;