Floating SVGs Added

Author: FirePheonix

public/assets/FloatingSVGs/music-block-1.svg

@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion';
+import { fadeInUpAnimation } 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} />

public/assets/FloatingSVGs/music-block-2.svg

@@ -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 } from '@/styles/Animations.ts';
 import {
   logoCardsData,
   sugarizerData,
@@ -15,6 +17,20 @@ const SugarizerPage = () => {
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         <FeatureSection data={sugarizerData} />
 
+        {/* 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>
+
         <img src={mockupImage.path} alt="TurtleMockup" />
 
         <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">

public/assets/FloatingSVGs/music-block-3.svg

@@ -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 } from '@/styles/Animations.ts';
 import {
   turtleBlocksData,
   turtleBlocksSections,
@@ -13,6 +15,33 @@ const TurtleBlocksPage = () => {
     <div>
       <Header />
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
+        {/* Floating SVGs */}
+        <motion.div
+          className="absolute top-25 left-5 sm:left-120"
+          variants={fadeInUpAnimation}
+          initial="initial"
+          animate="animate"
+        >
+          <img
+            src="assets/FloatingSVGs/turtle-blocks-1.svg"
+            alt="Turtle Blocks 1"
+            className="w-30 sm:w-40"
+          />
+        </motion.div>
+
+        <motion.div
+          className="absolute top-95 right-10 sm:right-155"
+          variants={fadeInUpAnimation}
+          initial="initial"
+          animate="animate"
+        >
+          <img
+            src="assets/FloatingSVGs/turtle-blocks-2.svg"
+            alt="Turtle Blocks 2"
+            className="w-12 sm:w-25"
+          />
+        </motion.div>
+
         <FeatureSection data={turtleBlocksData} />
 
         <p className="w-[80%] mx-auto flex justify-center font-bold">