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

src/components/sections/hero/HeroBillboard.tsx

@@ -1,93 +1,42 @@
-"use client";
+import React from 'react';
+import { ArrowRight, Play } from 'lucide-react';
 
-import TextBox from "@/components/Textbox";
+const HeroBillboard: React.FC = () => {
-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) => {
   return (
-    <section
+    <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
-      aria-label={ariaLabel}
+      <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
-      className={cls("w-full py-hero-page-padding", className)}
+      
-    >
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15", containerClassName)}>
+        <div className="space-y-8">
-        <TextBox
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight">
-          title={title}
+            Build the Future
-          description={description}
+            <span className="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-          tag={tag}
+              Today
-          tagIcon={tagIcon}
+            </span>
-          buttons={buttons}
+          </h1>
-          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          
-          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          <p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-600 leading-relaxed">
-          descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+            Transform your ideas into reality with our cutting-edge technology solutions. 
-          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            Experience the power of innovation at your fingertips.
-          buttonContainerClassName={cls("flex gap-4 mt-3", buttonContainerClassName)}
+          </p>
-          buttonClassName={buttonClassName}
+          
-          buttonTextClassName={buttonTextClassName}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          center={true}
+            <button className="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200 group">
-        />
+              Get Started
-        <div className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
+              <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform duration-200" />
-          <MediaContent
+            </button>
-            imageSrc={imageSrc}
+            
-            videoSrc={videoSrc}
+            <button className="inline-flex items-center px-8 py-4 bg-white text-gray-900 font-semibold rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors duration-200 group">
-            imageAlt={imageAlt}
+              <Play className="mr-2 h-5 w-5" />
-            videoAriaLabel={videoAriaLabel}
+              Watch Demo
-            imageClassName={cls("z-1", imageClassName)}
+            </button>
-          />
+          </div>
         </div>
       </div>
+      
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div>
     </section>
   );
 };
 
-HeroBillboard.displayName = "HeroBillboard";
-
 export default HeroBillboard;