Floating SVGs Added

src/components/TryNow/FeatureSection.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
+import { Carousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css'; // Import carousel styles
 import { featureSectionAnimations } from '@/styles/Animations';
 
 interface FeatureData {
@@ -39,34 +41,32 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
         variants={featureSectionAnimations.imageContainer}
       >
         {data.images && data.images.length > 0 ? (
-          <>
-            {/* Display Active Image */}
-            <motion.img
-              key={currentImage} // Ensures animation triggers on image change
-              src={data.images[currentImage].src}
-              alt={data.images[currentImage].alt}
-              className="w-full max-w-lg rounded-lg shadow-md"
-              initial="hidden"
-              animate="visible"
-              whileHover="hover"
-              variants={featureSectionAnimations.image}
-            />
-
-            {/* Dotted Navigation */}
-            <div className="flex mt-4 space-x-2">
-              {data.images.map((_, index) => (
-                <motion.button
-                  key={index}
-                  onClick={() => setCurrentImage(index)}
-                  className={`h-3 w-3 rounded-full ${
-                    index === currentImage ? 'bg-blue-600' : 'bg-gray-400'
-                  }`}
+          <Carousel
+            selectedItem={currentImage}
+            onChange={(index) => setCurrentImage(index)}
+            showThumbs={false}
+            showStatus={false}
+            infiniteLoop
+            autoPlay
+            interval={3000}
+            transitionTime={600} // Smooth transition
+            emulateTouch
+            dynamicHeight
+          >
+            {data.images.map((image, index) => (
+              <motion.div key={index} className="w-full max-w-lg">
+                <motion.img
+                  src={image.src}
+                  alt={image.alt}
+                  className="w-full rounded-lg shadow-md"
+                  initial="hidden"
+                  animate="visible"
                   whileHover="hover"
-                  variants={featureSectionAnimations.button}
+                  variants={featureSectionAnimations.image}
                 />
-              ))}
-            </div>
-          </>
+              </motion.div>
+            ))}
+          </Carousel>
         ) : (
           <motion.div
             className="w-full max-w-lg h-64 bg-gray-300 rounded-lg flex items-center justify-center"

src/components/TryNow/StepsToUse.tsx

@@ -1,94 +1,64 @@
-import { useState } from 'react';
-import { motion } from 'framer-motion';
+import 'react-responsive-carousel';
+import { Carousel } from 'react-responsive-carousel';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import { steps } from '@/constants/TryNowData/bootableSoasData';
+import { useState } from 'react';
 
 const StepsToUse = () => {
-  const [activeStep, setActiveStep] = useState(0);
-
-  const nextStep = () =>
-    setActiveStep((prev) => Math.min(prev + 1, steps.length - 1));
-  const prevStep = () => setActiveStep((prev) => Math.max(prev - 1, 0));
+  const [currentStep, setCurrentStep] = useState(0);
 
   return (
     <section className="w-[90%] mx-auto py-8">
       <h2 className="text-3xl font-bold text-center text-black mb-6">
         Steps to Boot Sugar on a Stick
       </h2>
 
-      {/* Carousel Container */}
-      <div className="relative flex items-center justify-center">
-        {/* Left Arrow */}
-        <button
-          className={`absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition ${
-            activeStep === 0
-              ? 'opacity-50 cursor-not-allowed'
-              : 'hover:bg-gray-400'
-          }`}
-          onClick={prevStep}
-          disabled={activeStep === 0}
-        >
-          <ArrowLeft size={30} />
-        </button>
-
-        {/* Step Content */}
-        <motion.div
-          key={activeStep}
-          initial={{ opacity: 0, x: 50 }}
-          animate={{ opacity: 1, x: 0 }}
-          exit={{ opacity: 0, x: -50 }}
-          transition={{ duration: 0.3 }}
-          className="w-full sm:w-[80%] md:w-[70%] lg:w-[60%] text-center"
+      <div className="relative w-full sm:w-[80%] md:w-[70%] lg:w-[60%] mx-auto">
+        <Carousel
+          selectedItem={currentStep}
+          onChange={(index) => setCurrentStep(index)}
+          showArrows={false}
+          showThumbs={false}
+          showStatus={false}
+          showIndicators={true}
+          useKeyboardArrows
+          infiniteLoop
         >
-          {/* Step Number */}
-          <div className="text-lg font-semibold text-gray-600">
-            Step {activeStep + 1}
-          </div>
+          {steps.map((step, index) => (
+            <div key={index} className="text-center relative">
+              {index > 0 && (
+                <button
+                  className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition hover:bg-gray-400"
+                  onClick={() => setCurrentStep(currentStep - 1)}
+                >
+                  <ArrowLeft size={30} />
+                </button>
+              )}
 
-          {/* Title */}
-          <h3 className="text-2xl font-semibold text-black mt-1">
-            {steps[activeStep].title}
-          </h3>
-
-          {/* Description */}
-          <p className="text-gray-700 mt-2">{steps[activeStep].description}</p>
-
-          {/* Step Image */}
-          <motion.img
-            src={steps[activeStep].image}
-            alt={steps[activeStep].title}
-            className="mx-auto mt-4 rounded-lg shadow-lg w-3/4 sm:w-2/3 md:w-1/2 h-auto"
-            initial={{ scale: 0.8, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.4 }}
-          />
-        </motion.div>
-
-        {/* Right Arrow */}
-        <button
-          className={`absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition ${
-            activeStep === steps.length - 1
-              ? 'opacity-50 cursor-not-allowed'
-              : 'hover:bg-gray-400'
-          }`}
-          onClick={nextStep}
-          disabled={activeStep === steps.length - 1}
-        >
-          <ArrowRight size={30} />
-        </button>
-      </div>
+              <div className="text-lg font-semibold text-gray-600">
+                Step {index + 1}
+              </div>
+              <h3 className="text-2xl font-semibold text-black mt-1">
+                {step.title}
+              </h3>
+              <p className="text-gray-700 mt-2">{step.description}</p>
+              <img
+                src={step.image}
+                alt={step.title}
+                className="mx-auto mt-4 rounded-lg shadow-lg w-3/4 sm:w-2/3 md:w-1/2 h-auto"
+              />
 
-      {/* Navigation Dots */}
-      <div className="flex justify-center mt-6 gap-2">
-        {steps.map((_, index) => (
-          <button
-            key={index}
-            className={`w-3 h-3 rounded-full transition-all ${
-              index === activeStep ? 'bg-[#FF4F00] w-5' : 'bg-gray-300'
-            }`}
-            onClick={() => setActiveStep(index)}
-          />
-        ))}
+              {index < steps.length - 1 && (
+                <button
+                  className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition hover:bg-gray-400"
+                  onClick={() => setCurrentStep(currentStep + 1)}
+                >
+                  <ArrowRight size={30} />
+                </button>
+              )}
+            </div>
+          ))}
+        </Carousel>
       </div>
     </section>
   );

src/pages/TryNow/BootableSoas.tsx

@@ -1,6 +1,8 @@
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
+import { motion } from 'framer-motion';
+import { zoomFadeInAnimation } from '@/styles/Animations';
 import {
   bootableSoasData,
   mockupImage,
@@ -14,7 +16,14 @@ const BootableSoasPage = () => {
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         <FeatureSection data={bootableSoasData} />
 
-        <img src={mockupImage.path} alt="TurtleMockup" />
+        <motion.img
+          src={mockupImage.path}
+          alt="BootableSoasMockup"
+          variants={zoomFadeInAnimation}
+          initial="initial"
+          animate="animate"
+          className="w-[80%] mx-auto"
+        />
 
         <StepsToUse />
       </main>

src/pages/TryNow/MusicBlocks.tsx

@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion';
+import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
@@ -19,7 +21,48 @@ import {
 
 const MusicBlocksPage = () => {
   return (
-    <div>
+    <div className="relative">
+      {/* Floating SVGs */}
+      <motion.div
+        className="absolute top-25 left-5 sm:left-128"
+        variants={fadeInUpAnimation}
+        initial="initial"
+        animate="animate"
+      >
+        <img
+          src="assets/FloatingSVGs/music-block-1.svg"
+          alt="Music Block 1"
+          className="w-30 sm:w-40"
+        />
+      </motion.div>
+
+      <motion.div
+        className="absolute top-95 right-10 sm:right-150"
+        variants={fadeInUpAnimation}
+        initial="initial"
+        animate="animate"
+      >
+        <img
+          src="assets/FloatingSVGs/music-block-2.svg"
+          alt="Music Block 2"
+          className="w-12 sm:w-35"
+        />
+      </motion.div>
+
+      <motion.div
+        className="absolute top-16 rigth-16 sm:right-23"
+        variants={fadeInUpAnimation}
+        initial="initial"
+        animate="animate"
+      >
+        <img
+          src="/assets/FloatingSVGs/music-block-3.svg"
+          alt="Music Block 3"
+          className="w-18 sm:w-28"
+        />
+      </motion.div>
+
+      {/* Main Content */}
       <Header />
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         <FeatureSection data={musicBlocksData} />
@@ -39,7 +82,14 @@ const MusicBlocksPage = () => {
         </div>
 
         <div className="w-[80%] mx-auto flex justify-center">
-          <img src={mockupImage.path} alt="TurtleMockup" />
+          <motion.img
+            src={mockupImage.path}
+            alt="MusicBlocksMockup"
+            variants={zoomFadeInAnimation}
+            initial="initial"
+            animate="animate"
+            className="w-[80%] mx-auto"
+          />
         </div>
 
         <p className="w-[80%] mx-auto flex justify-center">

src/pages/TryNow/Sugarizer.tsx

@@ -2,6 +2,8 @@ import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
 import LogoCards from '@/components/TryNow/LogoCards';
+import { motion } from 'framer-motion';
+import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts';
 import {
   logoCardsData,
   sugarizerData,
@@ -15,7 +17,28 @@ const SugarizerPage = () => {
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         <FeatureSection data={sugarizerData} />
 
-        <img src={mockupImage.path} alt="TurtleMockup" />
+        {/* Floating SVGs */}
+        <motion.div
+          className="absolute top-35 left-5 sm:left-110"
+          variants={fadeInUpAnimation}
+          initial="initial"
+          animate="animate"
+        >
+          <img
+            src="assets/FloatingSVGs/sugarizer-1.svg"
+            alt="Turtle Blocks 1"
+            className="w-30 sm:w-40"
+          />
+        </motion.div>
+
+        <motion.img
+          src={mockupImage.path}
+          alt="SugarizerMockup"
+          variants={zoomFadeInAnimation}
+          initial="initial"
+          animate="animate"
+          className="w-[80%] mx-auto"
+        />
 
         <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
           Try it now!