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

src/components/sections/hero/HeroLogoBillboardSplit.tsx

@@ -1,172 +1,187 @@
-"use client";
+'use client';
 
-import MediaContent from "@/components/shared/MediaContent";
-import FillWidthText from "@/components/shared/FillWidthText/FillWidthText";
-import TextAnimation from "@/components/text/TextAnimation";
-import Button from "@/components/button/Button";
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
-import { cls } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { Plus } from "lucide-react";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import React, { useState } from 'react';
+import Image from 'next/image';
 
-type HeroLogoBillboardSplitBackgroundProps = Extract<
-  HeroBackgroundVariantProps,
-  | { variant: "plain" }
-  | { variant: "animated-grid" }
-  | { variant: "canvas-reveal" }
-  | { variant: "cell-wave" }
-  | { variant: "downward-rays-animated" }
-  | { variant: "downward-rays-animated-grid" }
-  | { variant: "downward-rays-static" }
-  | { variant: "downward-rays-static-grid" }
-  | { variant: "glowing-orb" }
-  | { variant: "gradient-bars" }
-  | { variant: "radial-gradient" }
-  | { variant: "rotated-rays-animated" }
-  | { variant: "rotated-rays-animated-grid" }
-  | { variant: "rotated-rays-static" }
-  | { variant: "rotated-rays-static-grid" }
-  | { variant: "sparkles-gradient" }
->;
+interface Button {
+  text: string;
+  href: string;
+}
+
+interface Background {
+  variant: 'radial-gradient' | 'linear-gradient' | 'solid';
+}
 
 interface HeroLogoBillboardSplitProps {
   logoText: string;
   description: string;
-    background: HeroLogoBillboardSplitBackgroundProps;
-    buttons: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    layoutOrder: "default" | "reverse";
-    mediaAnimation: ButtonAnimationType;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    frameStyle?: "card" | "browser";
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    logoContainerClassName?: string;
-    descriptionClassName?: string;
-    buttonContainerClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    logoClassName?: string;
-    mediaWrapperClassName?: string;
-    imageClassName?: string;
-    browserBarClassName?: string;
-    addressBarClassName?: string;
+  background: Background;
+  buttons: Button[];
+  layoutOrder: 'default' | 'reverse';
+  imageSrc: string;
+  imageAlt: string;
+  frameStyle: 'card' | 'none';
+  buttonAnimation: 'slide-up' | 'fade' | 'none';
+  mediaAnimation: 'opacity' | 'scale' | 'none';
 }
 
-const HeroLogoBillboardSplit = ({
+export default function HeroLogoBillboardSplit({
   logoText,
   description,
   background,
   buttons,
-    buttonAnimation = "none",
   layoutOrder,
-    mediaAnimation,
   imageSrc,
-    videoSrc,
-    imageAlt = "",
-    videoAriaLabel = "Hero video",
-    frameStyle = "card",
-    ariaLabel = "Hero section",
-    className = "",
-    containerClassName = "",
-    logoContainerClassName = "",
-    descriptionClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    logoClassName = "",
-    mediaWrapperClassName = "",
-    imageClassName = "",
-    browserBarClassName = "",
-    addressBarClassName = "",
-}: HeroLogoBillboardSplitProps) => {
-    const theme = useTheme();
-    const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
-    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  imageAlt,
+  frameStyle,
+  buttonAnimation,
+  mediaAnimation,
+}: HeroLogoBillboardSplitProps) {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  const getBackgroundClass = () => {
+    switch (background.variant) {
+      case 'radial-gradient':
+        return 'bg-gradient-to-br from-blue-50 via-white to-purple-50';
+      case 'linear-gradient':
+        return 'bg-gradient-to-r from-blue-50 to-purple-50';
+      case 'solid':
+        return 'bg-white';
+      default:
+        return 'bg-white';
+    }
+  };
+
+  const getButtonAnimationClass = () => {
+    switch (buttonAnimation) {
+      case 'slide-up':
+        return 'transform transition-all duration-500 hover:translate-y-[-4px]';
+      case 'fade':
+        return 'transition-opacity duration-300 hover:opacity-80';
+      case 'none':
+        return '';
+      default:
+        return '';
+    }
+  };
+
+  const getMediaAnimationClass = () => {
+    switch (mediaAnimation) {
+      case 'opacity':
+        return 'transition-opacity duration-500 hover:opacity-90';
+      case 'scale':
+        return 'transition-transform duration-500 hover:scale-105';
+      case 'none':
+        return '';
+      default:
+        return '';
+    }
+  };
+
+  const getFrameClass = () => {
+    switch (frameStyle) {
+      case 'card':
+        return 'rounded-2xl shadow-lg overflow-hidden';
+      case 'none':
+        return '';
+      default:
+        return '';
+    }
+  };
+
+  const isReverse = layoutOrder === 'reverse';
 
   return (
-        <section
-            aria-label={ariaLabel}
-            className={cls("relative w-full py-hero-page-padding", className)}
-        >
-            <HeroBackgrounds {...background} />
-            <div className={cls("w-content-width mx-auto flex flex-col gap-6 md:gap-15 relative z-10", containerClassName)}>
-                <div className={cls(
-                    "w-full flex gap-6 md:gap-8",
-                    layoutOrder === "default" ? "flex-col" : "flex-col-reverse",
-                    logoContainerClassName
-                )}>
-                    <div className="relative flex flex-col gap-3 md:flex-row justify-between md:items-end w-full" >
-                        <div className="relative flex flex-col gap-4 w-full md:w-1/2" >
-                            <TextAnimation
-                                type={theme.defaultTextAnimation}
-                                text={description}
-                                variant="words-trigger"
-                                start="top 100%"
-                                className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-start leading-[1.2]", descriptionClassName)}
-                            />
+    <section className={`w-full min-h-screen flex items-center justify-center ${getBackgroundClass()} py-20 px-4 sm:px-6 lg:px-8`}>
+      <div className="max-w-7xl w-full mx-auto">
+        <div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${isReverse ? 'lg:grid-flow-dense' : ''}`}>
+          {/* Content Section */}
+          <div className={`flex flex-col justify-center space-y-8 ${isReverse ? 'lg:col-start-2' : ''}`}>
+            <div className="space-y-4">
+              <h1 className="text-5xl sm:text-6xl font-bold text-gray-900 leading-tight">
+                {logoText}
+              </h1>
+              <p className="text-xl text-gray-600 leading-relaxed max-w-lg">
+                {description}
+              </p>
             </div>
-                        <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
-                            {buttons.slice(0, 2).map((button, index) => (
-                                <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+
+            {/* Buttons */}
+            <div className="flex flex-wrap gap-4 pt-4">
+              {buttons.map((button, index) => (
+                <a
+                  key={index}
+                  href={button.href}
+                  className={`px-8 py-3 rounded-lg font-semibold transition-all duration-300 ${
+                    index === 0
+                      ? 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg'
+                      : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
+                  } ${getButtonAnimationClass()}`}
+                >
+                  {button.text}
+                </a>
               ))}
             </div>
           </div>
-                    <div className="relative w-full flex">
-                        <FillWidthText className={cls("text-foreground", logoClassName)}>
-                            {logoText}
-                        </FillWidthText>
-                    </div>
+
+          {/* Image Section with Flip Card */}
+          <div className={`flex justify-center items-center ${isReverse ? 'lg:col-start-1' : ''}`}>
+            <div
+              className="w-full max-w-md h-96 cursor-pointer perspective"
+              onMouseEnter={() => setIsFlipped(true)}
+              onMouseLeave={() => setIsFlipped(false)}
+            >
+              <div
+                className={`relative w-full h-full transition-transform duration-500 ${getFrameClass()} ${getMediaAnimationClass()}`}
+                style={{
+                  transformStyle: 'preserve-3d',
+                  transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+                }}
+              >
+                {/* Front Side - Image */}
+                <div
+                  className={`absolute w-full h-full ${getFrameClass()}`}
+                  style={{
+                    backfaceVisibility: 'hidden',
+                  }}
+                >
+                  <Image
+                    src={imageSrc}
+                    alt={imageAlt}
+                    fill
+                    className="object-cover"
+                    priority
+                  />
                 </div>
 
-                {frameStyle === "browser" ? (
-                    <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card", mediaWrapperClassName)}>
-                        <div className={cls("relative z-1 bg-background border-b border-foreground/10 px-4 py-3 flex items-center gap-4", browserBarClassName)}>
-                            <div className="flex items-center gap-2">
-                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
-                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
-                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
-                            </div>
-                            <div className="flex items-center gap-2 flex-1">
-                                <div className={cls("w-15 md:w-10 h-8 rounded-theme bg-accent/10", addressBarClassName)} />
-                                <div className="w-15 md:w-10 h-8 rounded-theme bg-accent/10" />
-                                <div className="hidden md:block w-10 h-8 rounded-theme bg-accent/10" />
-                            </div>
-                            <Plus className="h-[var(--text-sm)] w-auto text-foreground" />
-                        </div>
-                        <div className="relative z-1 p-0">
-                            <MediaContent
-                                imageSrc={imageSrc}
-                                videoSrc={videoSrc}
-                                imageAlt={imageAlt}
-                                videoAriaLabel={videoAriaLabel}
-                                imageClassName={cls("z-1 rounded-none! aspect-square md:aspect-video!", imageClassName)}
-                            />
+                {/* Back Side - Testimonial */}
+                <div
+                  className={`absolute w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 p-8 flex flex-col justify-center items-center text-white ${getFrameClass()}`}
+                  style={{
+                    backfaceVisibility: 'hidden',
+                    transform: 'rotateY(180deg)',
+                  }}
+                >
+                  <div className="text-center space-y-4">
+                    <svg
+                      className="w-12 h-12 mx-auto opacity-80"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M3 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
+                      <path d="M15 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
+                    </svg>
+                    <p className="text-lg font-semibold leading-relaxed">
+                      "CompClub has transformed how I connect with fellow tech enthusiasts. The projects are innovative and the community is incredibly supportive!"
+                    </p>
+                    <p className="text-sm opacity-90">- Sarah Chen, Tech Innovator</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-                ) : (
-                    <div ref={mediaContainerRef} 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 aspect-square md:aspect-video", imageClassName)}
-                        />
         </div>
-                )}
       </div>
     </section>
   );
-};
-
-HeroLogoBillboardSplit.displayName = "HeroLogoBillboardSplit";
-
-export default HeroLogoBillboardSplit;
+}