diff --git a/public/assets/FloatingSVGs/music-block-1.svg b/public/assets/FloatingSVGs/music-block-1.svg new file mode 100644 index 00000000..c5fa699f --- /dev/null +++ b/public/assets/FloatingSVGs/music-block-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/FloatingSVGs/music-block-2.svg b/public/assets/FloatingSVGs/music-block-2.svg new file mode 100644 index 00000000..d5b5d3bd --- /dev/null +++ b/public/assets/FloatingSVGs/music-block-2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/FloatingSVGs/music-block-3.svg b/public/assets/FloatingSVGs/music-block-3.svg new file mode 100644 index 00000000..b0768053 --- /dev/null +++ b/public/assets/FloatingSVGs/music-block-3.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/FloatingSVGs/sugarizer-1.svg b/public/assets/FloatingSVGs/sugarizer-1.svg new file mode 100644 index 00000000..271e3814 --- /dev/null +++ b/public/assets/FloatingSVGs/sugarizer-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/FloatingSVGs/turtle-blocks-1.svg b/public/assets/FloatingSVGs/turtle-blocks-1.svg new file mode 100644 index 00000000..1367efda --- /dev/null +++ b/public/assets/FloatingSVGs/turtle-blocks-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/FloatingSVGs/turtle-blocks-2.svg b/public/assets/FloatingSVGs/turtle-blocks-2.svg new file mode 100644 index 00000000..d3e3f2f0 --- /dev/null +++ b/public/assets/FloatingSVGs/turtle-blocks-2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/LinksLogos/sugarizer-1.svg b/public/assets/LinksLogos/sugarizer-1.svg new file mode 100644 index 00000000..898781c0 --- /dev/null +++ b/public/assets/LinksLogos/sugarizer-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/TryNow/FeatureSection.tsx b/src/components/TryNow/FeatureSection.tsx index 34def42b..2e4b1d68 100644 --- a/src/components/TryNow/FeatureSection.tsx +++ b/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 */} - - - {/* Dotted Navigation */} -
- {data.images.map((_, index) => ( - setCurrentImage(index)} - className={`h-3 w-3 rounded-full ${ - index === currentImage ? 'bg-blue-600' : 'bg-gray-400' - }`} + setCurrentImage(index)} + showThumbs={false} + showStatus={false} + infiniteLoop + autoPlay + interval={3000} + transitionTime={600} // Smooth transition + emulateTouch + dynamicHeight + > + {data.images.map((image, index) => ( + + - ))} -
- + + ))} + ) : ( { - 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 (
@@ -16,79 +13,52 @@ const StepsToUse = () => { Steps to Boot Sugar on a Stick - {/* Carousel Container */} -
- {/* Left Arrow */} - - - {/* Step Content */} - + setCurrentStep(index)} + showArrows={false} + showThumbs={false} + showStatus={false} + showIndicators={true} + useKeyboardArrows + infiniteLoop > - {/* Step Number */} -
- Step {activeStep + 1} -
+ {steps.map((step, index) => ( +
+ {index > 0 && ( + + )} - {/* Title */} -

- {steps[activeStep].title} -

- - {/* Description */} -

{steps[activeStep].description}

- - {/* Step Image */} - - - - {/* Right Arrow */} - -
+
+ Step {index + 1} +
+

+ {step.title} +

+

{step.description}

+ {step.title} - {/* Navigation Dots */} -
- {steps.map((_, index) => ( - + )} +
+ ))} +
); diff --git a/src/pages/TryNow/BootableSoas.tsx b/src/pages/TryNow/BootableSoas.tsx index 3696ad2c..224e93e2 100644 --- a/src/pages/TryNow/BootableSoas.tsx +++ b/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 = () => {
- TurtleMockup +
diff --git a/src/pages/TryNow/MusicBlocks.tsx b/src/pages/TryNow/MusicBlocks.tsx index a8fd53e3..ff92f422 100644 --- a/src/pages/TryNow/MusicBlocks.tsx +++ b/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 ( -
+
+ {/* Floating SVGs */} + + Music Block 1 + + + + Music Block 2 + + + + Music Block 3 + + + {/* Main Content */}
@@ -39,7 +82,14 @@ const MusicBlocksPage = () => {
- TurtleMockup +

diff --git a/src/pages/TryNow/Sugarizer.tsx b/src/pages/TryNow/Sugarizer.tsx index d433e5ba..0eb9c393 100644 --- a/src/pages/TryNow/Sugarizer.tsx +++ b/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 = () => {

- TurtleMockup + {/* Floating SVGs */} + + Turtle Blocks 1 + + +

Try it now! diff --git a/src/pages/TryNow/TurtleBlocks.tsx b/src/pages/TryNow/TurtleBlocks.tsx index 8a458b48..bc751199 100644 --- a/src/pages/TryNow/TurtleBlocks.tsx +++ b/src/pages/TryNow/TurtleBlocks.tsx @@ -2,6 +2,8 @@ import Header from '@/sections/Header'; import Footer from '@/sections/Footer'; import FeatureSection from '@/components/TryNow/FeatureSection'; import Paragraph from '@/components/TryNow/Paragraph'; +import { motion } from 'framer-motion'; +import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts'; import { turtleBlocksData, turtleBlocksSections, @@ -13,6 +15,33 @@ const TurtleBlocksPage = () => {
+ {/* Floating SVGs */} + + Turtle Blocks 1 + + + + Turtle Blocks 2 + +

@@ -21,7 +50,14 @@ const TurtleBlocksPage = () => { probably want to use Turtle Blocks rather than Turtle Blocks JS.

- TurtleMockup + {/* Render Paragraph components dynamically */} {turtleBlocksSections.map((section, index) => ( diff --git a/src/styles/Animations.ts b/src/styles/Animations.ts index 908f0fa4..963f8e06 100644 --- a/src/styles/Animations.ts +++ b/src/styles/Animations.ts @@ -1023,3 +1023,27 @@ export const buttonAnimation: Variants = { transition: { type: 'spring', stiffness: 400, damping: 10 }, }, }; +export const fadeInUpAnimation: Variants = { + initial: { opacity: 0, y: 30 }, + animate: { + opacity: 1, + y: 0, + transition: { + delay: 0.7, // ⏳ Adds a delay of 1.5 seconds before animation starts + duration: 1.5, + ease: 'easeOut', + }, + }, +}; +export const zoomFadeInAnimation: Variants = { + initial: { opacity: 0, scale: 0.9 }, // Start with a slight shrink and hidden + animate: { + opacity: 1, + scale: 1, // Smoothly zoom to normal size + transition: { + delay: 1, // Starts after 2 seconds (optional, tweak as needed) + duration: 1.5, // Takes 1.5 seconds + ease: 'easeOut', + }, + }, +};