@devvistatech/devvista-kit 0.0.10 → 0.0.12

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

@@ -1,64 +1,64 @@
-interface GalleryItem {
-  src: string;
-  alt: string;
-  title: string;
-  description: string;
-}
-
-interface ThreeSetGalleryProps {
-  images?: GalleryItem[];
-  columns?: '1' | '2' | '3' | '4'; 
-}
-
-const ThreeSetGallery = ({
-  images = [
-    {
-      src: '/images/gallery/placeholder1.jpg',
-      alt: 'Gallery Image 1',
-      title: 'Image One',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      src: '/images/gallery/placeholder2.jpg',
-      alt: 'Gallery Image 2',
-      title: 'Image Two',
-      description: 'Sed do eiusmod tempor incididunt ut labore et dolore.',
-    },
-    {
-      src: '/images/gallery/placeholder3.jpg',
-      alt: 'Gallery Image 3',
-      title: 'Image Three',
-      description: 'Ut enim ad minim veniam, quis nostrud exercitation.',
-    },
-  ],
-  columns = '3',
-}: ThreeSetGalleryProps) => {
-  const gridCols = {
-    '1': 'grid-cols-1',
-    '2': 'grid-cols-2',
-    '3': 'grid-cols-3',
-    '4': 'grid-cols-4',
-  };
-
-  return (
-    <section className="w-full h-full">
-      <div className={`grid ${gridCols[columns]} gap-0`}>
-        {images.map((image, index) => (
-          <div key={index} className="relative overflow-hidden group">
-            <img
-              src={image.src}
-              alt={image.alt}
-              className="w-full h-[400px] sm:h-[900px] object-cover object-top transform transition-all duration-300 group-hover:scale-105 group-hover:blur-sm"
-            />
-            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-              <h3 className="text-2xl font-bold">{image.title}</h3>
-              <p className="text-lg">{image.description}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-};
-
+interface GalleryItem {
+  src: string;
+  alt: string;
+  title: string;
+  description: string;
+}
+
+interface ThreeSetGalleryProps {
+  images?: GalleryItem[];
+  columns?: '1' | '2' | '3' | '4'; 
+}
+
+const ThreeSetGallery = ({
+  images = [
+    {
+      src: '/images/gallery/placeholder1.jpg',
+      alt: 'Gallery Image 1',
+      title: 'Image One',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    },
+    {
+      src: '/images/gallery/placeholder2.jpg',
+      alt: 'Gallery Image 2',
+      title: 'Image Two',
+      description: 'Sed do eiusmod tempor incididunt ut labore et dolore.',
+    },
+    {
+      src: '/images/gallery/placeholder3.jpg',
+      alt: 'Gallery Image 3',
+      title: 'Image Three',
+      description: 'Ut enim ad minim veniam, quis nostrud exercitation.',
+    },
+  ],
+  columns = '3',
+}: ThreeSetGalleryProps) => {
+  const gridCols = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-2',
+    '3': 'grid-cols-3',
+    '4': 'grid-cols-4',
+  };
+
+  return (
+    <section className="w-full h-full">
+      <div className={`grid ${gridCols[columns]} gap-0`}>
+        {images.map((image, index) => (
+          <div key={index} className="relative overflow-hidden group">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="w-full h-[400px] sm:h-[900px] object-cover object-top transform transition-all duration-300 group-hover:scale-105 group-hover:blur-sm"
+            />
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <h3 className="text-2xl font-bold">{image.title}</h3>
+              <p className="text-lg">{image.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
 export default ThreeSetGallery;

package/components/addOns/non-functional/aboutSections/AboutSection.tsx

@@ -1,63 +1,63 @@
-// src/components/AboutSection.tsx
-"use client";
-
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-import { EditToggleButton } from '@/components/other/button';
-import { ABOUT_SECTION } from './constants/aboutSection'; 
-
-export default function AboutSection() {
-  const [isReadMore, setIsReadMore] = useState(false);
-
-  const toggleReadMore = () => {
-    setIsReadMore(!isReadMore);
-  };
-
-  return (
-    <section className="relative py-16 sm:py-24 md:py-32 bg-white w-full flex justify-center">
-      <div className="w-full px-4 sm:px-6 md:px-12 text-center">
-        <motion.h2
-          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-8 md:mb-16 text-blue-900"
-          initial={{ opacity: 0, y: 40 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: 'easeOut' }}
-          viewport={{ once: true }}
-        >
-          {ABOUT_SECTION.UI.LOREM_IPSUM_DOLOR}
-        </motion.h2>
-        <div className="max-w-4xl mx-auto space-y-6 md:space-y-8">
-          <p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700">
-            {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
-          </p>
-          {isReadMore && (
-            <>
-              <motion.p
-                className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700"
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                transition={{ duration: 0.5, ease: 'easeOut' }}
-              >
-                {ABOUT_SECTION.UI.AT_VERO_PARAGRAPH}
-              </motion.p>
-              <motion.p
-                className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700"
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                transition={{ duration: 0.5, ease: 'easeOut', delay: 0.2 }}
-              >
-                {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
-              </motion.p>
-            </>
-          )}
-          <EditToggleButton
-            onClick={toggleReadMore}
-            size="lg"
-            className="mt-4 bg-teal-600 hover:bg-teal-700 text-white rounded-full text-base sm:text-lg md:text-xl shadow-xl transform active:scale-95 transition-transform"
-          >
-            {isReadMore ? ABOUT_SECTION.BUTTONS.MINUS_LEGERE_BUTTON : ABOUT_SECTION.BUTTONS.PLUS_LEGERE_BUTTON}
-          </EditToggleButton>
-        </div>
-      </div>
-    </section>
-  );
+// src/components/AboutSection.tsx
+"use client";
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { EditToggleButton } from '@/components/other/button';
+import { ABOUT_SECTION } from './constants/aboutSection'; 
+
+export default function AboutSection() {
+  const [isReadMore, setIsReadMore] = useState(false);
+
+  const toggleReadMore = () => {
+    setIsReadMore(!isReadMore);
+  };
+
+  return (
+    <section className="relative py-16 sm:py-24 md:py-32 bg-white w-full flex justify-center">
+      <div className="w-full px-4 sm:px-6 md:px-12 text-center">
+        <motion.h2
+          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-8 md:mb-16 text-blue-900"
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1.2, ease: 'easeOut' }}
+          viewport={{ once: true }}
+        >
+          {ABOUT_SECTION.UI.LOREM_IPSUM_DOLOR}
+        </motion.h2>
+        <div className="max-w-4xl mx-auto space-y-6 md:space-y-8">
+          <p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700">
+            {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
+          </p>
+          {isReadMore && (
+            <>
+              <motion.p
+                className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700"
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                transition={{ duration: 0.5, ease: 'easeOut' }}
+              >
+                {ABOUT_SECTION.UI.AT_VERO_PARAGRAPH}
+              </motion.p>
+              <motion.p
+                className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700"
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                transition={{ duration: 0.5, ease: 'easeOut', delay: 0.2 }}
+              >
+                {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
+              </motion.p>
+            </>
+          )}
+          <EditToggleButton
+            onClick={toggleReadMore}
+            size="lg"
+            className="mt-4 bg-teal-600 hover:bg-teal-700 text-white rounded-full text-base sm:text-lg md:text-xl shadow-xl transform active:scale-95 transition-transform"
+          >
+            {isReadMore ? ABOUT_SECTION.BUTTONS.MINUS_LEGERE_BUTTON : ABOUT_SECTION.BUTTONS.PLUS_LEGERE_BUTTON}
+          </EditToggleButton>
+        </div>
+      </div>
+    </section>
+  );
 }

package/components/addOns/non-functional/aboutSections/constants/aboutSection.ts

@@ -1,25 +1,25 @@
-// components/addOns/non-functional/aboutSections/constants/aboutSection.ts
-// Constants for hardcoded text in AboutSection.tsx, organized by purpose
-
-export const ABOUT_SECTION = {
-  // UI Text for AboutSection
-  UI: {
-    // Heading for the section
-    LOREM_IPSUM_DOLOR: "Lorem Ipsum Dolor",
-    // Paragraph text (used for first and third paragraphs)
-    LOREM_IPSUM_PARAGRAPH: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-    // Second paragraph text (shown when read more is toggled)
-    AT_VERO_PARAGRAPH: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.",
-  },
-  // Button Text for AboutSection
-  BUTTONS: {
-    // EditToggleButton text when read more is active
-    MINUS_LEGERE_BUTTON: "Minus Legere",
-    // EditToggleButton text when read more is inactive
-    PLUS_LEGERE_BUTTON: "Plus Legere",
-  },
-  // Error Messages for AboutSection
-  ERRORS: {
-    // No hardcoded errors
-  },
+// components/addOns/non-functional/aboutSections/constants/aboutSection.ts
+// Constants for hardcoded text in AboutSection.tsx, organized by purpose
+
+export const ABOUT_SECTION = {
+  // UI Text for AboutSection
+  UI: {
+    // Heading for the section
+    LOREM_IPSUM_DOLOR: "Lorem Ipsum Dolor",
+    // Paragraph text (used for first and third paragraphs)
+    LOREM_IPSUM_PARAGRAPH: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    // Second paragraph text (shown when read more is toggled)
+    AT_VERO_PARAGRAPH: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.",
+  },
+  // Button Text for AboutSection
+  BUTTONS: {
+    // EditToggleButton text when read more is active
+    MINUS_LEGERE_BUTTON: "Minus Legere",
+    // EditToggleButton text when read more is inactive
+    PLUS_LEGERE_BUTTON: "Plus Legere",
+  },
+  // Error Messages for AboutSection
+  ERRORS: {
+    // No hardcoded errors
+  },
 };

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

@@ -1,118 +1,118 @@
-// src/components/ProductSlider.tsx
-'use client'; 
-
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { PROGRAM_SLIDER } from './constants/programSlider'; 
-
-interface Product {
-  id: string;
-  name: string;
-  description: string;
-  image: string;
-}
-
-interface ProductSliderProps {
-  products?: Product[];
-}
-
-const ProductSlider = ({
-  products = [
-    {
-      id: '1',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
-      image: '/images/products/placeholder1.jpg',
-    },
-    {
-      id: '2',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
-      image: '/images/products/placeholder2.jpg',
-    },
-    {
-      id: '3',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
-      image: '/images/products/placeholder3.jpg',
-    },
-    {
-      id: '4',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
-      image: '/images/products/placeholder4.jpg',
-    },
-    {
-      id: '5',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
-      image: '/images/products/placeholder5.jpg',
-    },
-    {
-      id: '6',
-      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
-      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
-      image: '/images/products/placeholder6.jpg',
-    },
-  ],
-}: ProductSliderProps) => {
-  const scrollLeft = () => {
-    document.getElementById('scroll-container')?.scrollBy({ left: -300, behavior: 'smooth' });
-  };
-
-  const scrollRight = () => {
-    document.getElementById('scroll-container')?.scrollBy({ left: 300, behavior: 'smooth' });
-  };
-
-  return (
-    <section className="bg-white">
-      <div className="w-full px-0">
-        <div className="relative w-full">
-          <button
-            onClick={scrollLeft}
-            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
-            aria-label={PROGRAM_SLIDER.BUTTONS.PREVIOUS_PRODUCT_ARIA}
-          >
-            <ChevronLeft size={24} />
-          </button>
-          <div
-            id="scroll-container"
-            className="flex overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide"
-            style={{
-              scrollSnapType: 'x mandatory',
-              scrollbarWidth: 'none',
-              msOverflowStyle: 'none',
-            }}
-          >
-            {products.map((product) => (
-              <div
-                key={product.id}
-                className="min-w-full md:min-w-[50%] lg:min-w-[33.3333%] snap-start relative"
-              >
-                <div className="relative w-full h-[500px] sm:h-[600px] md:h-[800px] lg:h-[1200px]">
-                  <img
-                    src={product.image}
-                    alt={product.name}
-                    className="w-full h-full object-cover"
-                  />
-                  <div className="absolute bottom-0 w-full bg-black/50 text-white text-center py-4">
-                    <h3 className="text-2xl font-bold">{product.name}</h3>
-                    <p className="text-lg">{product.description}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <button
-            onClick={scrollRight}
-            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
-            aria-label={PROGRAM_SLIDER.BUTTONS.NEXT_PRODUCT_ARIA}
-          >
-            <ChevronRight size={24} />
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-};
-
+// src/components/ProductSlider.tsx
+'use client'; 
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { PROGRAM_SLIDER } from './constants/programSlider'; 
+
+interface Product {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+}
+
+interface ProductSliderProps {
+  products?: Product[];
+}
+
+const ProductSlider = ({
+  products = [
+    {
+      id: '1',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
+      image: '/images/products/placeholder1.jpg',
+    },
+    {
+      id: '2',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
+      image: '/images/products/placeholder2.jpg',
+    },
+    {
+      id: '3',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
+      image: '/images/products/placeholder3.jpg',
+    },
+    {
+      id: '4',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
+      image: '/images/products/placeholder4.jpg',
+    },
+    {
+      id: '5',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
+      image: '/images/products/placeholder5.jpg',
+    },
+    {
+      id: '6',
+      name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
+      description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
+      image: '/images/products/placeholder6.jpg',
+    },
+  ],
+}: ProductSliderProps) => {
+  const scrollLeft = () => {
+    document.getElementById('scroll-container')?.scrollBy({ left: -300, behavior: 'smooth' });
+  };
+
+  const scrollRight = () => {
+    document.getElementById('scroll-container')?.scrollBy({ left: 300, behavior: 'smooth' });
+  };
+
+  return (
+    <section className="bg-white">
+      <div className="w-full px-0">
+        <div className="relative w-full">
+          <button
+            onClick={scrollLeft}
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
+            aria-label={PROGRAM_SLIDER.BUTTONS.PREVIOUS_PRODUCT_ARIA}
+          >
+            <ChevronLeft size={24} />
+          </button>
+          <div
+            id="scroll-container"
+            className="flex overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide"
+            style={{
+              scrollSnapType: 'x mandatory',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+            }}
+          >
+            {products.map((product) => (
+              <div
+                key={product.id}
+                className="min-w-full md:min-w-[50%] lg:min-w-[33.3333%] snap-start relative"
+              >
+                <div className="relative w-full h-[500px] sm:h-[600px] md:h-[800px] lg:h-[1200px]">
+                  <img
+                    src={product.image}
+                    alt={product.name}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute bottom-0 w-full bg-black/50 text-white text-center py-4">
+                    <h3 className="text-2xl font-bold">{product.name}</h3>
+                    <p className="text-lg">{product.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <button
+            onClick={scrollRight}
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300"
+            aria-label={PROGRAM_SLIDER.BUTTONS.NEXT_PRODUCT_ARIA}
+          >
+            <ChevronRight size={24} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
 export default ProductSlider;