@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/non-functional/SampleCarousel.tsx

@@ -46,21 +46,21 @@ export default function SampleCarousel() {
     {
       brand: 'Lorem',
       type: 'Ipsum Dolor',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Astounding_Color_Fine Details-min.jpg',
+      src: '',
       alt: '',
       description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
     },
     {
       brand: 'Lorem',
       type: 'Sit Amet',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Dublin II_Color_Dundrum-min.jpg',
+      src: '',
       alt: '',
       description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.',
     },
     {
       brand: 'Lorem',
       type: 'Consectetur',
-      src: '/images/carpet/samples/new-samples/Dreamweaver_Gold Standard_Color_Glitter-min.jpg',
+      src: '',
       alt: '',
       description: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.',
     }

package/components/addOns/non-functional/ThreeSetGallery.tsx

@@ -13,19 +13,19 @@ interface ThreeSetGalleryProps {
 const ThreeSetGallery = ({
   images = [
     {
-      src: '/images/gallery/placeholder1.jpg',
+      src: '',
       alt: 'Gallery Image 1',
       title: 'Image One',
       description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
     {
-      src: '/images/gallery/placeholder2.jpg',
+      src: '',
       alt: 'Gallery Image 2',
       title: 'Image Two',
       description: 'Sed do eiusmod tempor incididunt ut labore et dolore.',
     },
     {
-      src: '/images/gallery/placeholder3.jpg',
+      src: '',
       alt: 'Gallery Image 3',
       title: 'Image Three',
       description: 'Ut enim ad minim veniam, quis nostrud exercitation.',

package/components/addOns/non-functional/featureSections/FeaturesSection.tsx

@@ -0,0 +1,74 @@
+// src/components/addOns/non-functional/FeaturesSection.tsx
+"use client";
+
+import { motion } from "framer-motion";
+import { ActionButton } from "@/components/other/button";
+import { CheckCircle, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { FEATURES_SECTION } from "./constants/featuresSection";
+
+interface Feature {
+  text: string;
+}
+
+export function FeaturesSection() {
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+
+  return (
+    <motion.section
+      variants={sectionVariants}
+      initial="hidden"
+      animate="visible"
+      className="w-full py-16 sm:py-24 px-4 sm:px-8 bg-blue-200 z-0"
+    >
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+        }
+      `}</style>
+      <div className="w-full pt-16 sm:pt-24 pb-16 sm:pb-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="flex flex-col md:flex-row gap-6 justify-center items-center">
+            <motion.div variants={itemVariants} className="w-full md:w-1/2 space-y-6 flex justify-center">
+              <ul className="space-y-4 text-2xl font-semibold">
+                {FEATURES_SECTION.UI.FEATURES.map((feature, index) => (
+                  <motion.li
+                    key={index}
+                    variants={itemVariants}
+                    className="flex items-center justify-start"
+                  >
+                    <CheckCircle className="mr-3 h-6 w-6 text-[#FF69B4] flex-shrink-0" />
+                    <span>{feature.text}</span>
+                  </motion.li>
+                ))}
+              </ul>
+            </motion.div>
+            <motion.div variants={itemVariants} className="w-full md:w-1/2 space-y-6 text-center pt-12">
+              <h4 className="text-4xl sm:text-5xl font-bold text-[#333] tracking-tight">
+                {FEATURES_SECTION.UI.TITLE}
+              </h4>
+              <p className="text-xl sm:text-2xl font-semibold text-[#333]">
+                {FEATURES_SECTION.UI.DESCRIPTION}
+              </p>
+              <ActionButton asChild>
+                <Link href={FEATURES_SECTION.UI.CTA_LINK} className="flex items-center justify-center">
+                  {FEATURES_SECTION.UI.CTA_TEXT}
+                  <ArrowRight className="ml-2 h-6 w-6" />
+                </Link>
+              </ActionButton>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}

package/components/addOns/non-functional/featureSections/constants/featuresSection.ts

@@ -0,0 +1,30 @@
+// src/components/addOns/non-functional/constants/featuresSection.ts
+export const FEATURES_SECTION = {
+  UI: {
+    TITLE: "Our Features",
+    DESCRIPTION: "Discover the unique features that make our fitness studio stand out.",
+    CTA_TEXT: "Join Now",
+    CTA_LINK: "/schedule",
+    FEATURES: [
+      { text: "State-of-the-art equipment" },
+      { text: "Expert trainers" },
+      { text: "Flexible class schedules" },
+      { text: "Community-driven environment" },
+      { text: "Personalized fitness plans" },
+    ],
+  },
+  ERRORS: {
+    // Add error messages if dynamic fetching or updates are implemented
+    FETCH_FAILED: "Failed to fetch features data",
+    FETCH_ERROR: "An error occurred while fetching features",
+    UNAUTHORIZED_UPDATE: "You are not authorized to update features",
+    NO_AUTH_TOKEN: "Authentication token not found",
+    UPDATE_FAILED: "Failed to update features: ${response.status}",
+    UPDATE_ERROR: "An error occurred while updating features",
+  },
+  BUTTONS: {
+    UPDATE_BUTTON: "Update Features",
+    SAVING_BUTTON: "Saving...",
+    CANCEL_BUTTON: "Cancel",
+  },
+};

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

@@ -1,29 +1,31 @@
+// 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;
+  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,
+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);

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",
+    },
+  },
+};

package/components/addOns/non-functional/imageCarousels/ProductSlider.tsx

@@ -21,37 +21,37 @@ const ProductSlider = ({
       id: '1',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
-      image: '/images/products/placeholder1.jpg',
+      image: '',
     },
     {
       id: '2',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
-      image: '/images/products/placeholder2.jpg',
+      image: '',
     },
     {
       id: '3',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
-      image: '/images/products/placeholder3.jpg',
+      image: '',
     },
     {
       id: '4',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
-      image: '/images/products/placeholder4.jpg',
+      image: '',
     },
     {
       id: '5',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
-      image: '/images/products/placeholder5.jpg',
+      image: '',
     },
     {
       id: '6',
       name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
       description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
-      image: '/images/products/placeholder6.jpg',
+      image: '',
     },
   ],
 }: ProductSliderProps) => {

package/components/addOns/non-functional/imageCarousels/ProgramCarousel.tsx

@@ -100,36 +100,36 @@ const ProgramsCarousel = ({
   programs = [
     {
       title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[0],
-      video: '/videos/placeholder1.mp4',
-      poster: '/images/placeholder1.jpg',
+      video: '',
+      poster: '',
       description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[0],
       link: '/',
     },
     {
       title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[1],
-      video: '/videos/placeholder2.mp4',
-      poster: '/images/placeholder2.jpg',
+      video: '',
+      poster: '',
       description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[1],
       link: '/',
     },
     {
       title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[2],
-      video: '/videos/placeholder3.mp4',
-      poster: '/images/placeholder3.jpg',
+      video: '',
+      poster: '',
       description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[2],
       link: '/',
     },
     {
       title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[3],
-      video: '/videos/placeholder4.mp4',
-      poster: '/images/placeholder4.jpg',
+      video: '',
+      poster: '',
       description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[3],
       link: '/',
     },
     {
       title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[4],
-      video: '/videos/placeholder5.mp4',
-      poster: '/images/placeholder5.jpg',
+      video: '',
+      poster: '',
       description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[4],
       link: '/',
     },