@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/non-functional/{Heros/HeroSection.tsx → heros/HomeHero.tsx}

@@ -1,143 +1,145 @@
-"use client";
-
-import { useRef, useEffect, useState } from "react";
-import { HeroButton } from "@/components/other/button";
-import Link from "next/link";
-import SocialIcons from "@/components/other/social-icons";
-
-interface HeroSectionProps {
-  title: string;
-  subtitle: string;
-  ctaText: string;
-  ctaLink: string;
-  videoSrc: string;
-  posterSrc: string;
-  videoAriaLabel: string;
-  onVideoReady?: () => void;
-}
-
-export function GalleryHero({
-  title,
-  subtitle,
-  ctaText,
-  ctaLink,
-  videoSrc,
-  videoAriaLabel,
-  posterSrc,
-  onVideoReady,
-}: HeroSectionProps) {
-  const heroBackgroundRef = useRef<HTMLDivElement>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [isVideoLoading, setIsVideoLoading] = useState(true);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.innerWidth <= 768) return;
-      if (heroBackgroundRef.current) {
-        const scrollY = window.scrollY;
-        const parallaxSpeed = 0.9;
-        heroBackgroundRef.current.style.transform = `translateY(${scrollY * parallaxSpeed}px)`;
-      }
-    };
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    video.style.opacity = "0";
-
-    const handleCanPlay = () => {
-      setIsVideoLoading(false);
-      video.style.opacity = "1";
-      if (onVideoReady) onVideoReady();
-    };
-
-    video.addEventListener("canplaythrough", handleCanPlay);
-    video.load();
-
-    return () => {
-      video.removeEventListener("canplaythrough", handleCanPlay);
-    };
-  }, [onVideoReady, videoSrc]);
-
-  return (
-    <section className="relative h-screen w-full z-0 pt-12 sm:pt-12 overflow-hidden bg-[#1E2A44]">
-      <style jsx>{`
-        .bg-gradient-overlay {
-          position: absolute;
-          inset: 0;
-          background: linear-gradient(
-            to bottom,
-            var(--jubilee) / 0.6,
-            var(--jubilee) / 0.4
-          );
-        }
-        .video-fade-in {
-          opacity: 0;
-          transition: opacity 0.5s ease-in;
-        }
-      `}</style>
-      <div
-        className="absolute inset-0 z-[-10] overflow-hidden"
-        style={{ "--jubilee": "#F47C7C" } as React.CSSProperties}
-        ref={heroBackgroundRef}
-      >
-        <video
-          ref={videoRef}
-          autoPlay
-          loop
-          muted
-          playsInline
-          preload="metadata"
-          className="video-fade-in absolute inset-0 w-full h-screen object-cover filter brightness-75"
-          aria-label={videoAriaLabel}
-          poster={posterSrc || undefined}
-        >
-          <source src={`${videoSrc}#t=0.1`} type="video/mp4" />
-          Your browser does not support the video tag.
-        </video>
-        <div className="bg-gradient-overlay" />
-      </div>
-      <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 text-center flex flex-col justify-center items-center h-screen">
-        <div className="relative flex items-center justify-center w-full max-w-full">
-          <h1
-            className="text-5xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#ffffff] tracking-tight"
-            style={{
-              textShadow: `
-                2px 2px 4px rgba(0, 0, 0, 0.5),
-                -2px -2px 4px rgba(0, 0, 0, 0.5)
-              `,
-              fontFamily: "'Inter', sans-serif",
-            }}
-          >
-            {title}
-          </h1>
-        </div>
-        <h2
-          className="text-2xl sm:text-4xl md:text-5xl font-semibold text-white tracking-tight pt-4"
-          style={{
-            textShadow: `
-              2px 2px 4px rgba(0, 0, 0, 0.5),
-              -2px -2px 4px rgba(0, 0, 0, 0.5)
-            `,
-          }}
-        >
-          {subtitle}
-        </h2>
-        <HeroButton
-          asChild
-          size="hero"
-          className="mt-8 text-white text-base sm:text-lg lg:text-xl"
-        >
-          <Link href={ctaLink}>{ctaText}</Link>
-        </HeroButton>
-      </div>
-      <div className="absolute bottom-4 left-4 z-10">
-        <SocialIcons />
-      </div>
-    </section>
-  );
+// components/addOns/non-functional/heros/constants/HomeHero.tsx
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import { HeroButton } from "@/components/other/button";
+import Link from "next/link";
+import SocialIcons from "@/components/other/social-icons";
+import { HERO } from "./constants/hero";
+
+interface HeroSectionProps {
+  title?: string;
+  subtitle?: string;
+  ctaText?: string;
+  ctaLink?: string;
+  videoSrc?: string;
+  posterSrc?: string;
+  videoAriaLabel?: string;
+  onVideoReady?: () => void;
+}
+
+export function HomeHero({
+  title = HERO.HOME_HERO.UI.TITLE,
+  subtitle = HERO.HOME_HERO.UI.SUBTITLE,
+  ctaText = HERO.HOME_HERO.UI.CTA_TEXT,
+  ctaLink = HERO.HOME_HERO.UI.CTA_LINK,
+  videoSrc = HERO.HOME_HERO.UI.VIDEO_SRC,
+  posterSrc = HERO.HOME_HERO.UI.POSTER_SRC,
+  videoAriaLabel = HERO.HOME_HERO.UI.VIDEO_ARIA_LABEL,
+  onVideoReady,
+}: HeroSectionProps) {
+  const heroBackgroundRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.innerWidth <= 768) return;
+      if (heroBackgroundRef.current) {
+        const scrollY = window.scrollY;
+        const parallaxSpeed = 0.9;
+        heroBackgroundRef.current.style.transform = `translateY(${scrollY * parallaxSpeed}px)`;
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.style.opacity = "0";
+
+    const handleCanPlay = () => {
+      setIsVideoLoading(false);
+      video.style.opacity = "1";
+      if (onVideoReady) onVideoReady();
+    };
+
+    video.addEventListener("canplaythrough", handleCanPlay);
+    video.load();
+
+    return () => {
+      video.removeEventListener("canplaythrough", handleCanPlay);
+    };
+  }, [onVideoReady, videoSrc]);
+
+  return (
+    <section className="relative h-screen w-full z-0 pt-12 sm:pt-12 overflow-hidden bg-[#1E2A44]">
+      <style jsx>{`
+        .bg-gradient-overlay {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            to bottom,
+            var(--jubilee) / 0.6,
+            var(--jubilee) / 0.4
+          );
+        }
+        .video-fade-in {
+          opacity: 0;
+          transition: opacity 0.5s ease-in;
+        }
+      `}</style>
+      <div
+        className="absolute inset-0 z-[-10] overflow-hidden"
+        style={{ "--jubilee": "#F47C7C" } as React.CSSProperties}
+        ref={heroBackgroundRef}
+      >
+        <video
+          ref={videoRef}
+          autoPlay
+          loop
+          muted
+          playsInline
+          preload="metadata"
+          className="video-fade-in absolute inset-0 w-full h-screen object-cover filter brightness-75"
+          aria-label={videoAriaLabel}
+          poster={posterSrc || undefined}
+        >
+          <source src={`${videoSrc}#t=0.1`} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <div className="bg-gradient-overlay" />
+      </div>
+      <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 text-center flex flex-col justify-center items-center h-screen">
+        <div className="relative flex items-center justify-center w-full max-w-full">
+          <h1
+            className="text-5xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#ffffff] tracking-tight"
+            style={{
+              textShadow: `
+                2px 2px 4px rgba(0, 0, 0, 0.5),
+                -2px -2px 4px rgba(0, 0, 0, 0.5)
+              `,
+              fontFamily: "'Inter', sans-serif",
+            }}
+          >
+            {title}
+          </h1>
+        </div>
+        <h2
+          className="text-2xl sm:text-4xl md:text-5xl font-semibold text-white tracking-tight pt-4"
+          style={{
+            textShadow: `
+              2px 2px 4px rgba(0, 0, 0, 0.5),
+              -2px -2px 4px rgba(0, 0, 0, 0.5)
+            `,
+          }}
+        >
+          {subtitle}
+        </h2>
+        <HeroButton
+          asChild
+          size="hero"
+          className="mt-8 text-white text-base sm:text-lg lg:text-xl"
+        >
+          <Link href={ctaLink}>{ctaText}</Link>
+        </HeroButton>
+      </div>
+      <div className="absolute bottom-4 left-4 z-10">
+        <SocialIcons />
+      </div>
+    </section>
+  );
 }

package/components/addOns/non-functional/heros/ProductHero.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { HeroButton, ReadMoreButton } from "@/components/other/button";
+import { useRef, useEffect, useState } from "react";
+import { HERO } from "./constants/hero";
+
+type ProductHeroProps = {
+  title?: string;
+  subtitle?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  primaryButtonText?: string;
+  primaryButtonLink?: string;
+  secondaryButtonText?: string;
+  secondaryButtonLink?: string;
+};
+
+const ProductHero = ({
+  title = HERO.PRODUCT_HERO.UI.MAIN_HEADING,
+  subtitle = HERO.PRODUCT_HERO.UI.SUBTITLE,
+  imageSrc = HERO.PRODUCT_HERO.UI.IMAGE_SRC,
+  imageAlt = HERO.PRODUCT_HERO.UI.IMAGE_ALT,
+  primaryButtonText = HERO.PRODUCT_HERO.BUTTONS.PRIMARY_TEXT,
+  primaryButtonLink = HERO.PRODUCT_HERO.BUTTONS.PRIMARY_LINK,
+  secondaryButtonText = HERO.PRODUCT_HERO.BUTTONS.SECONDARY_TEXT,
+  secondaryButtonLink = HERO.PRODUCT_HERO.BUTTONS.SECONDARY_LINK,
+}: ProductHeroProps) => {
+  const heroBackgroundRef = useRef<HTMLDivElement>(null);
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!heroBackgroundRef.current) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Product hero background ref is not assigned");
+        }
+        return;
+      }
+      const scrollPosition = window.scrollY;
+      const parallaxOffset = scrollPosition * 0.5;
+      heroBackgroundRef.current.style.transform = `translateY(${parallaxOffset}px)`;
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center w-full">
+      <div
+        className="absolute inset-0 z-10 overflow-hidden bg-gradient-to-br from-[#9b7c266c] to-[#ffffff00]"
+        style={{ backgroundColor: !imageSrc || imageFailed ? "var(--amber-fallback)" : "transparent" }}
+      >
+        <div ref={heroBackgroundRef} className="absolute inset-0 will-change-transform">
+          {imageSrc && !imageFailed && imageAlt && (
+            <Image
+              src={imageSrc}
+              alt={imageAlt}
+              fill
+              style={{ objectFit: "cover" }}
+              className="brightness-75 blur-sm"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              priority
+              onError={() => {
+                setImageFailed(true);
+              }}
+            />
+          )}
+        </div>
+        <div className="absolute inset-0 bg-gradient-to-b from-[var(--green-primary)]/85 to-[var(--green-primary)]/65" />
+      </div>
+      <div className="relative z-20 px-4 sm:px-6 lg:px-8 py-16 sm:py-24 lg:py-32 text-center text-white animate-fade-in lg:-translate-y-32">
+        <h1
+          className="text-6xl sm:text-7xl lg:text-8xl font-extrabold mb-6 sm:mb-8 tracking-tight drop-shadow-md [text-shadow:1px_1px_0_#000,-1px_-1px_0_#000,1px_-1px_0_#000,-1px_1px_0_#000]"
+        >
+          {title}
+        </h1>
+        <p
+          className="text-lg sm:text-xl lg:text-2xl mb-8 sm:mb-10 text-white/90 drop-shadow-md max-w-3xl mx-auto [text-shadow:1px_1px_0_#000,-1px_-1px_0_#000,1px_-1px_0_#000,-1px_1px_0_#000]"
+        >
+          {subtitle}
+        </p>
+        <div className="flex justify-center gap-4 sm:gap-6 lg:gap-8 flex-wrap">
+          <HeroButton
+            asChild
+            className="text-base sm:text-lg lg:text-lg py-7 sm:py-9 lg:py-9 px-10 sm:px-12 lg:px-12 rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300"
+          >
+            <Link href={primaryButtonLink ?? "/products"} aria-label={primaryButtonText}>
+              {primaryButtonText}
+            </Link>
+          </HeroButton>
+          <ReadMoreButton
+            asChild
+            className="text-base sm:text-lg lg:text-lg py-7 sm:py-9 lg:py-9 px-10 sm:px-12 lg:px-12 border-2 border-white text-white hover:bg-white/20 rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300"
+          >
+            <Link href={secondaryButtonLink ?? "/products"} aria-label={secondaryButtonText}>
+              {secondaryButtonText}
+            </Link>
+          </ReadMoreButton>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductHero;

package/components/addOns/non-functional/heros/constants/hero.ts

@@ -0,0 +1,62 @@
+// Constants for ProductHero and HomeHero components
+
+// Interface for ProductHero constants
+interface ProductHeroConstants {
+  UI: {
+    MAIN_HEADING: string;
+    SUBTITLE: string;
+    IMAGE_SRC: string;
+    IMAGE_ALT: string;
+  };
+  BUTTONS: {
+    PRIMARY_TEXT: string;
+    PRIMARY_LINK: string;
+    SECONDARY_TEXT: string;
+    SECONDARY_LINK: string;
+  };
+}
+
+// Interface for HomeHero constants
+interface HomeHeroConstants {
+  UI: {
+    TITLE: string;
+    SUBTITLE: string;
+    CTA_TEXT: string;
+    CTA_LINK: string;
+    VIDEO_SRC: string;
+    VIDEO_ARIA_LABEL: string;
+    POSTER_SRC: string;
+  };
+}
+
+// Main HERO constants object
+export const HERO: {
+  PRODUCT_HERO: ProductHeroConstants;
+  HOME_HERO: HomeHeroConstants;
+} = {
+  PRODUCT_HERO: {
+    UI: {
+      MAIN_HEADING: "Discover Our Products",
+      SUBTITLE: "Explore innovative solutions designed to meet your needs.",
+      IMAGE_SRC: "/images/product-hero-bg.jpg",
+      IMAGE_ALT: "Product hero background image",
+    },
+    BUTTONS: {
+      PRIMARY_TEXT: "Shop Now",
+      PRIMARY_LINK: "/products",
+      SECONDARY_TEXT: "Learn More",
+      SECONDARY_LINK: "/about",
+    },
+  },
+  HOME_HERO: {
+    UI: {
+      TITLE: "Welcome to Our World",
+      SUBTITLE: "Experience the journey with stunning visuals and immersive content.",
+      CTA_TEXT: "Get Started",
+      CTA_LINK: "/explore",
+      VIDEO_SRC: "/videos/home-hero-video.mp4",
+      VIDEO_ARIA_LABEL: "Home page hero background video",
+      POSTER_SRC: "/images/home-hero-poster.jpg",
+    },
+  },
+};