@devvistatech/devvista-kit 0.0.10 → 0.0.13

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: '',
+      alt: 'Gallery Image 1',
+      title: 'Image One',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    },
+    {
+      src: '',
+      alt: 'Gallery Image 2',
+      title: 'Image Two',
+      description: 'Sed do eiusmod tempor incididunt ut labore et dolore.',
+    },
+    {
+      src: '',
+      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/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",
+  },
+};