diff --git a/public/assets/TryMoreSvgs/android.svg b/public/assets/TryMoreSvgs/android.svg new file mode 100644 index 00000000..258a846e --- /dev/null +++ b/public/assets/TryMoreSvgs/android.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/TryMoreSvgs/deploy.svg b/public/assets/TryMoreSvgs/deploy.svg new file mode 100644 index 00000000..0146e63b --- /dev/null +++ b/public/assets/TryMoreSvgs/deploy.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/TryMoreSvgs/ios.svg b/public/assets/TryMoreSvgs/ios.svg new file mode 100644 index 00000000..a4c80fa0 --- /dev/null +++ b/public/assets/TryMoreSvgs/ios.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/TryMoreSvgs/linux.svg b/public/assets/TryMoreSvgs/linux.svg new file mode 100644 index 00000000..3135e513 --- /dev/null +++ b/public/assets/TryMoreSvgs/linux.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/TryMoreSvgs/mac.svg b/public/assets/TryMoreSvgs/mac.svg new file mode 100644 index 00000000..6d33cd97 --- /dev/null +++ b/public/assets/TryMoreSvgs/mac.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/TryMoreSvgs/trisquel-community.svg b/public/assets/TryMoreSvgs/trisquel-community.svg new file mode 100644 index 00000000..b0468274 --- /dev/null +++ b/public/assets/TryMoreSvgs/trisquel-community.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/TryMoreSvgs/trisquel-desktop.svg b/public/assets/TryMoreSvgs/trisquel-desktop.svg new file mode 100644 index 00000000..60312f4a --- /dev/null +++ b/public/assets/TryMoreSvgs/trisquel-desktop.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/TryMoreSvgs/trisquel-documentation.svg b/public/assets/TryMoreSvgs/trisquel-documentation.svg new file mode 100644 index 00000000..2989ff7a --- /dev/null +++ b/public/assets/TryMoreSvgs/trisquel-documentation.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/TryMoreSvgs/web.svg b/public/assets/TryMoreSvgs/web.svg new file mode 100644 index 00000000..c8b606c3 --- /dev/null +++ b/public/assets/TryMoreSvgs/web.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/TryMoreSvgs/windows.svg b/public/assets/TryMoreSvgs/windows.svg new file mode 100644 index 00000000..863d49dd --- /dev/null +++ b/public/assets/TryMoreSvgs/windows.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/TryNowImages/boatsoasMockup.png b/public/assets/TryNowImages/boatsoasMockup.png new file mode 100644 index 00000000..887e4adb Binary files /dev/null and b/public/assets/TryNowImages/boatsoasMockup.png differ diff --git a/public/assets/TryNowImages/devin.png b/public/assets/TryNowImages/devin.png new file mode 100644 index 00000000..95f7e1a3 Binary files /dev/null and b/public/assets/TryNowImages/devin.png differ diff --git a/public/assets/TryNowImages/mbLogoCard1.png b/public/assets/TryNowImages/mbLogoCard1.png new file mode 100644 index 00000000..fb6aa454 Binary files /dev/null and b/public/assets/TryNowImages/mbLogoCard1.png differ diff --git a/public/assets/TryNowImages/mbLogoCard2.png b/public/assets/TryNowImages/mbLogoCard2.png new file mode 100644 index 00000000..f458c333 Binary files /dev/null and b/public/assets/TryNowImages/mbLogoCard2.png differ diff --git a/public/assets/TryNowImages/mbLogoCard3.png b/public/assets/TryNowImages/mbLogoCard3.png new file mode 100644 index 00000000..593ecaf2 Binary files /dev/null and b/public/assets/TryNowImages/mbLogoCard3.png differ diff --git a/public/assets/TryNowImages/mbLogoCard4.png b/public/assets/TryNowImages/mbLogoCard4.png new file mode 100644 index 00000000..a0d88525 Binary files /dev/null and b/public/assets/TryNowImages/mbLogoCard4.png differ diff --git a/public/assets/TryNowImages/mbNumberedCard1.png b/public/assets/TryNowImages/mbNumberedCard1.png new file mode 100644 index 00000000..6de0afc8 Binary files /dev/null and b/public/assets/TryNowImages/mbNumberedCard1.png differ diff --git a/public/assets/TryNowImages/mbNumberedCard2.png b/public/assets/TryNowImages/mbNumberedCard2.png new file mode 100644 index 00000000..b994798f Binary files /dev/null and b/public/assets/TryNowImages/mbNumberedCard2.png differ diff --git a/public/assets/TryNowImages/mbNumberedCard3.png b/public/assets/TryNowImages/mbNumberedCard3.png new file mode 100644 index 00000000..8dfbefe7 Binary files /dev/null and b/public/assets/TryNowImages/mbNumberedCard3.png differ diff --git a/public/assets/TryNowImages/mbText.png b/public/assets/TryNowImages/mbText.png new file mode 100644 index 00000000..e4f60a02 Binary files /dev/null and b/public/assets/TryNowImages/mbText.png differ diff --git a/public/assets/TryNowImages/musicBlocks1.png b/public/assets/TryNowImages/musicBlocks1.png new file mode 100644 index 00000000..18d6565e Binary files /dev/null and b/public/assets/TryNowImages/musicBlocks1.png differ diff --git a/public/assets/TryNowImages/musicBlocks2.png b/public/assets/TryNowImages/musicBlocks2.png new file mode 100644 index 00000000..49c964da Binary files /dev/null and b/public/assets/TryNowImages/musicBlocks2.png differ diff --git a/public/assets/TryNowImages/musicBlocks3.png b/public/assets/TryNowImages/musicBlocks3.png new file mode 100644 index 00000000..c9221f2a Binary files /dev/null and b/public/assets/TryNowImages/musicBlocks3.png differ diff --git a/public/assets/TryNowImages/musicBlocks4.png b/public/assets/TryNowImages/musicBlocks4.png new file mode 100644 index 00000000..cb0e23e7 Binary files /dev/null and b/public/assets/TryNowImages/musicBlocks4.png differ diff --git a/public/assets/TryNowImages/musicBlocksMockup.png b/public/assets/TryNowImages/musicBlocksMockup.png new file mode 100644 index 00000000..f745851b Binary files /dev/null and b/public/assets/TryNowImages/musicBlocksMockup.png differ diff --git a/public/assets/TryNowImages/musicMockup.png b/public/assets/TryNowImages/musicMockup.png new file mode 100644 index 00000000..f745851b Binary files /dev/null and b/public/assets/TryNowImages/musicMockup.png differ diff --git a/public/assets/TryNowImages/raspberry.jpg b/public/assets/TryNowImages/raspberry.jpg new file mode 100644 index 00000000..613d90df Binary files /dev/null and b/public/assets/TryNowImages/raspberry.jpg differ diff --git a/public/assets/TryNowImages/sachiko.png b/public/assets/TryNowImages/sachiko.png new file mode 100644 index 00000000..c121d768 Binary files /dev/null and b/public/assets/TryNowImages/sachiko.png differ diff --git a/public/assets/TryNowImages/step1.jpg b/public/assets/TryNowImages/step1.jpg new file mode 100644 index 00000000..2808b70b Binary files /dev/null and b/public/assets/TryNowImages/step1.jpg differ diff --git a/public/assets/TryNowImages/step2.jpg b/public/assets/TryNowImages/step2.jpg new file mode 100644 index 00000000..6a4ea510 Binary files /dev/null and b/public/assets/TryNowImages/step2.jpg differ diff --git a/public/assets/TryNowImages/step3.jpg b/public/assets/TryNowImages/step3.jpg new file mode 100644 index 00000000..2261be64 Binary files /dev/null and b/public/assets/TryNowImages/step3.jpg differ diff --git a/public/assets/TryNowImages/step4.jpg b/public/assets/TryNowImages/step4.jpg new file mode 100644 index 00000000..698ec0e8 Binary files /dev/null and b/public/assets/TryNowImages/step4.jpg differ diff --git a/public/assets/TryNowImages/step5.jpg b/public/assets/TryNowImages/step5.jpg new file mode 100644 index 00000000..31f2cddb Binary files /dev/null and b/public/assets/TryNowImages/step5.jpg differ diff --git a/public/assets/TryNowImages/step6.jpg b/public/assets/TryNowImages/step6.jpg new file mode 100644 index 00000000..610ef12b Binary files /dev/null and b/public/assets/TryNowImages/step6.jpg differ diff --git a/public/assets/TryNowImages/step7.png b/public/assets/TryNowImages/step7.png new file mode 100644 index 00000000..9cec127c Binary files /dev/null and b/public/assets/TryNowImages/step7.png differ diff --git a/public/assets/TryNowImages/sugarizer.png b/public/assets/TryNowImages/sugarizer.png new file mode 100644 index 00000000..ed2bfbe3 Binary files /dev/null and b/public/assets/TryNowImages/sugarizer.png differ diff --git a/public/assets/TryNowImages/sugarizerMockup.png b/public/assets/TryNowImages/sugarizerMockup.png new file mode 100644 index 00000000..8069444b Binary files /dev/null and b/public/assets/TryNowImages/sugarizerMockup.png differ diff --git a/public/assets/TryNowImages/trisquel.png b/public/assets/TryNowImages/trisquel.png new file mode 100644 index 00000000..d459c82a Binary files /dev/null and b/public/assets/TryNowImages/trisquel.png differ diff --git a/public/assets/TryNowImages/turtleBlocks.png b/public/assets/TryNowImages/turtleBlocks.png new file mode 100644 index 00000000..6624ee41 Binary files /dev/null and b/public/assets/TryNowImages/turtleBlocks.png differ diff --git a/public/assets/TryNowImages/turtleMockup.png b/public/assets/TryNowImages/turtleMockup.png new file mode 100644 index 00000000..1ba8d481 Binary files /dev/null and b/public/assets/TryNowImages/turtleMockup.png differ diff --git a/public/assets/TryNowImages/walter.png b/public/assets/TryNowImages/walter.png new file mode 100644 index 00000000..8de000bd Binary files /dev/null and b/public/assets/TryNowImages/walter.png differ diff --git a/public/assets/TryNowImages/yuUkai.png b/public/assets/TryNowImages/yuUkai.png new file mode 100644 index 00000000..76b8daed Binary files /dev/null and b/public/assets/TryNowImages/yuUkai.png differ diff --git a/src/components/TryNow/FeatureSection.tsx b/src/components/TryNow/FeatureSection.tsx new file mode 100644 index 00000000..34def42b --- /dev/null +++ b/src/components/TryNow/FeatureSection.tsx @@ -0,0 +1,98 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { featureSectionAnimations } from '@/styles/Animations'; + +interface FeatureData { + title: string; + subtitle: string; + quote: string; + description: string; + images?: { src: string; alt: string }[]; + note?: string; +} + +const FeatureSection = ({ data }: { data: FeatureData }) => { + const [currentImage, setCurrentImage] = useState(0); + + return ( + + {/* Left Side: Text Content */} + +

{data.title}

+

{data.subtitle}

+

{data.quote}

+

{data.description}

+ + + {/* Right Side: Image Carousel */} + + {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' + }`} + whileHover="hover" + variants={featureSectionAnimations.button} + /> + ))} +
+ + ) : ( + +

No Image Available

+ + )} + + + {/* Optional Note */} + {data.note && ( + + {data.note} + + )} + + ); +}; + +export default FeatureSection; diff --git a/src/components/TryNow/LogoCards.tsx b/src/components/TryNow/LogoCards.tsx new file mode 100644 index 00000000..988a492b --- /dev/null +++ b/src/components/TryNow/LogoCards.tsx @@ -0,0 +1,72 @@ +import { motion } from 'framer-motion'; +import { logoCardAnimations } from '@/styles/Animations'; + +interface LogoCard { + logo: string; + title: string; + description: string[]; + buttons?: { text: string; link: string }[]; +} + +const LogoCards = ({ data }: { data: LogoCard[] }) => { + return ( +
+ {data.map((card, index) => ( + + {/* Logo */} + + {card.title} + + + {/* Title */} +

{card.title}

+ + {/* Divider */} +
+ + {/* Description */} + + + {/* Buttons */} + {card.buttons && ( +
+ {card.buttons.map((btn, i) => ( + + {btn.text} + + ))} +
+ )} + + ))} +
+ ); +}; + +export default LogoCards; diff --git a/src/components/TryNow/NumberedCard.tsx b/src/components/TryNow/NumberedCard.tsx new file mode 100644 index 00000000..97b38ee2 --- /dev/null +++ b/src/components/TryNow/NumberedCard.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { numberedCardAnimations } from '@/styles/Animations'; + +interface NumberedCardProps { + number: string; + title: string; + description: string; + image?: string; + borderColor: string; +} + +const NumberedCard: React.FC = ({ + number, + title, + description, + image, + borderColor, +}) => { + return ( + + {/* Number Circle */} + + {number} + + + {/* Title */} +

{title}

+ + {/* Description */} +

{description}

+ + {/* Conditionally Render Image */} + {image && ( + + )} + + ); +}; + +export default NumberedCard; diff --git a/src/components/TryNow/Paragraph.tsx b/src/components/TryNow/Paragraph.tsx new file mode 100644 index 00000000..55d1f225 --- /dev/null +++ b/src/components/TryNow/Paragraph.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { paragraphAnimations } from '@/styles/Animations'; + +interface ParagraphProps { + title: string; + content: string; + button?: string | null; +} + +const Paragraph: React.FC = ({ title, content, button }) => { + const contentPoints = content.includes('\n') + ? content.split('\n') + : [content]; + + return ( + + {/* Styled Title */} + + {title} + + + {/* Render Content as a List if Multiple Lines Exist */} + {contentPoints.length > 1 ? ( +
    + {contentPoints.map((point, index) => ( + + {point.trim()} + + ))} +
+ ) : ( + + {content} + + )} + + {/* Conditional Button Rendering */} + {button && ( + + {button} + + )} + + ); +}; + +export default Paragraph; diff --git a/src/components/TryNow/StepsToUse.tsx b/src/components/TryNow/StepsToUse.tsx new file mode 100644 index 00000000..eee76f0b --- /dev/null +++ b/src/components/TryNow/StepsToUse.tsx @@ -0,0 +1,97 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { ArrowLeft, ArrowRight } from 'lucide-react'; +import { steps } from '@/constants/TryNowData/bootableSoasData'; + +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)); + + return ( +
+

+ Steps to Boot Sugar on a Stick +

+ + {/* Carousel Container */} +
+ {/* Left Arrow */} + + + {/* Step Content */} + + {/* Step Number */} +
+ Step {activeStep + 1} +
+ + {/* Title */} +

+ {steps[activeStep].title} +

+ + {/* Description */} +

{steps[activeStep].description}

+ + {/* Step Image */} + + + + {/* Right Arrow */} + +
+ + {/* Navigation Dots */} +
+ {steps.map((_, index) => ( +
+
+ ); +}; + +export default StepsToUse; diff --git a/src/components/TryNow/TeamSection.tsx b/src/components/TryNow/TeamSection.tsx new file mode 100644 index 00000000..aa4e835e --- /dev/null +++ b/src/components/TryNow/TeamSection.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { teamSectionAnimations } from '@/styles/Animations'; + +interface TeamMember { + name: string; + role: string; + description: string; + image: string; + bgColor: string; +} + +const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => { + return ( + + {/* Title */} + + Music Blocks Offline Edition + + + + and
Curriculum Development Team + + + + + {/* Grid Layout for Members */} + + {members.map((member, index) => ( + + {/* Member Image */} + + + {/* Member Info */} +
+

+ {member.name} +

+

{member.description}

+
+ + ))} + + + ); +}; + +export default TeamSection; diff --git a/src/constants/TryNowData/bootableSoasData.ts b/src/constants/TryNowData/bootableSoasData.ts new file mode 100644 index 00000000..66ecf1d6 --- /dev/null +++ b/src/constants/TryNowData/bootableSoasData.ts @@ -0,0 +1,72 @@ +export const bootableSoasData = { + title: 'Boot SOAS', + subtitle: 'Sugar On A Stick', + quote: + '“Young children learn by games; compulsory education cannot remain in the soul.” — Plato', + description: + 'Learn how to boot Sugar Labs OS on your computer. Follow our step-by-step guide to get started easily.', + images: [{ src: 'assets/TryNowImages/step7.png', alt: 'Boot SOAS step 7' }], +}; + +interface StepData { + step: number; + title: string; + description: string; + image: string; +} + +export const steps: StepData[] = [ + { + step: 1, + title: 'Sugar On a Stick', + description: + 'To boot Sugar Labs OS on your computer, you will need a bootable Sugar on Stick setup already. To see how to set it up, visit the wiki.', + image: 'assets/TryNowImages/step1.jpg', + }, + { + step: 2, + title: 'Insert the USB Drive', + description: + 'Plug the prepared Sugar on a Stick USB drive into an available USB port on your computer.', + image: 'assets/TryNowImages/step2.jpg', + }, + { + step: 3, + title: 'Access Advanced Boot Options (Windows)', + description: + "On Windows systems, access the advanced boot options by holding the 'Shift' key while clicking 'Restart.' This will bring you to the advanced boot menu.", + image: 'assets/TryNowImages/step3.jpg', + }, + { + step: 4, + title: 'Choose to Boot from USB (Windows)', + description: + "In the advanced boot menu, select 'Use a Device' to proceed with booting from the USB drive.", + image: 'assets/TryNowImages/step4.jpg', + }, + { + step: 5, + title: ' Select the USB Drive (Windows)', + description: + 'Choose your USB drive from the list of devices to boot into the Sugar OS.', + image: 'assets/TryNowImages/step5.jpg', + }, + { + step: 6, + title: 'Traditional Boot Method (Non-Windows Systems)', + description: + "For non-Windows computers:Power on your computer and immediately press the appropriate key (commonly F9, F12, or Esc) repeatedly to access the boot menu or BIOS settings. In the boot menu, select your USB drive, often identified by its brand or model name, and press 'Enter' to boot into Sugar.", + image: 'assets/TryNowImages/step6.jpg', + }, + { + step: 7, + title: 'Enjoy Sugar on a Stick', + description: + 'After selecting the USB drive, your computer should boot into the Sugar OS interface. If you encounter any issues during the boot process, seek assistance in the Sugar Labs Matrix room. For detailed instructions and additional resources, visit the Sugar Labs Booting SoaS page.', + image: 'assets/TryNowImages/step7.png', + }, +]; + +export const mockupImage = { + path: 'assets/TryNowImages/boatsoasMockup.png', +}; diff --git a/src/constants/TryNowData/musicBlocksData.ts b/src/constants/TryNowData/musicBlocksData.ts new file mode 100644 index 00000000..fad1ad46 --- /dev/null +++ b/src/constants/TryNowData/musicBlocksData.ts @@ -0,0 +1,184 @@ +export const musicBlocksData = { + title: 'Music Blocks', + subtitle: 'A Musical Microworld', + quote: '“All musicians are subconsciously mathematicians” – Monk', + description: + 'Music Blocks is a collection of manipulative tools for exploring fundamental musical concepts in an integrative and fun way.', + images: [ + { + src: 'assets/TryNowImages/musicBlocks1.png', + alt: 'Turtle Blocks Example 1', + }, + { + src: 'assets/TryNowImages/musicBlocks2.png', + alt: 'Turtle Blocks Example 2', + }, + { + src: 'assets/TryNowImages/musicBlocks3.png', + alt: 'Turtle Blocks Example 3', + }, + { + src: 'assets/TryNowImages/musicBlocks4.png', + alt: 'Turtle Blocks Example 4', + }, + ], +}; + +export const musicBlocksSections = [ + { + title: 'Using Music Blocks', + content: + 'Music Blocks is designed to run in the browser. It is derived from Turtle Blocks JS which can be found here. You can run the software locally from the index.html file, from the GitHub repository, or by setting up a local server. If you want to run Music Blocks offline, download this repo and point your browser to the index.html file found in the musicblocks directory on your local file system. See Using Music Blocks and Music Blocks Guide', + button: 'Try Music Blocks Now', + }, + { + title: 'Credits', + content: + 'Music Blocks is a fork of TurtleArtJS created by Walter Bender. (Turtle Blocks JS has many contributors).\n Devin Ulibarri has contributed functional and user-interface designs. Many of his contributions were inspired by the music education ideas, representations and practices (e.g. aspects of matrix, musical cups) developed and published by Dr. Lawrence Scripp with whom Devin studied at New England Conservatory and for whom he worked at Affron Scripp & Associates, LLC.\n Much of the initial coding of the fork from Turtle Blocks was done by Yash Khandelwal as part of Google Summer of Code (GSoC) 2015. Hemant Kasat contributed to additional widgets as part of GSoC 2016. Additional contributions are being made by Tayba Wasim, Dinuka Tharangi Jayaweera, Prachi Agrawal, Cristina Del Puerto, and Hrishi Patel as part of GSoC 2017. During GSoC 2018, Riya Lohia developed a Temperament Widget. Ritwik Abhishek added a keyboard widget and a pitch-tracking widget.\n Many students contributed to the project as part of Google Code-in (2015–16, 2016–17, and 2017–2018). Sam Parkinson built the Planet during GCI 2016–17. Euan Ong redesigned the Planet code as a series of GCI tasks in 2017–18.', + button: null, + }, +]; + +export const mockupImage = { + path: 'assets/TryNowImages/musicMockup.png', +}; + +export const musicblockstext = { + path: 'assets/TryNowImages/mbText.png', +}; + +export const foundabug = [ + { + title: 'Found a Bug?', + content: 'Report it in the issues section of THIS repository.', + button: null, + }, +]; + +export const musicBlocksLogoCards = [ + { + logo: 'assets/TryNowImages/mbLogoCard1.png', + title: 'Music Blocks Online', + description: [ + 'Children can learn programming from scratch and have fun creating music and videos by combining blocks that control instruments, rhythms, and changing pitch values.', + ], + buttons: [ + { + text: 'Trying out Music Blocks', + link: 'https://musicblocks.sugarlabs.org/', + }, + ], + }, + { + logo: 'assets/TryNowImages/mbLogoCard2.png', + title: 'Videos to learn how to use Music Blocks', + description: [ + 'You can learn the basics of Music Blocks through videos. We will explain what you can do with the software, how to start using it, how to program, and more.', + ], + buttons: [ + { + text: 'Go to Youtube channel', + link: 'https://www.youtube.com/channel/UCdXacR2zOXff4XCKRLTSnRw', + }, + ], + }, + { + logo: 'assets/TryNowImages/mbLogoCard3.png', + title: 'Videos that teach you how to create works using Music Blocks', + description: [ + 'This article explains how to create music and video works while programming using Music Blocks. Feel free to create your own original works.', + ], + buttons: [ + { + text: 'Go to Youtube channel', + link: 'https://www.youtube.com/channel/UCdXacR2zOXff4XCKRLTSnRw', + }, + ], + }, + { + logo: 'assets/TryNowImages/mbLogoCard4.png', + title: 'Music Blocks Challenge Print', + description: [ + 'This is a quiz-style printout that teaches you about the functions of Music Blocks and how to create works. Click the link below to download the PDF file.', + ], + buttons: [ + { + text: 'Download PDF file', + link: 'https://gakken-steam.jp/music_blocks/common/pdf/challengeprint.zip', + }, + ], + }, +]; + +export const teamMembers = [ + { + name: 'WALTER BENDER', + role: 'Developer of Music Blocks', + description: + 'Developer of Music Blocks. Former director of the MIT Media Lab. Founder of the OLPC (One Laptop Per Child) project, which provides $100 computers to children in developing countries. Founder of the nonprofit organization Sugar Labs.', + image: 'assets/TryNowImages/walter.png', + bgColor: '#B0D0FF', + }, + { + name: 'DEVIN ULIBARRI', + role: 'CEO of Remake Music LLC', + description: + 'Developer of Music Blocks. CEO of Remake Music LLC. Head of Music + Code Lead Teaching Artist Training at MAP Family Learning Center.', + image: 'assets/TryNowImages/devin.png', + bgColor: '#FFB3C6', + }, +]; + +export const numberedCards1 = [ + { + number: '1', + title: 'You can create music through programming!', + description: + 'Rhythms and melodies can be created intuitively, so anyone can easily create original music.', + image: 'assets/TryNowImages/mbNumberedCard1.png', + borderColor: '#FFED51', + }, + { + number: '2', + title: 'You can study math!', + description: + "Since musical elements such as 'note length' and 'performance speed' are controlled numerically, students will develop mathematical literacy.", + image: 'assets/TryNowImages/mbNumberedCard2.png', + borderColor: '#FFED51', + }, + { + number: '3', + title: 'You can show your work all over the world!', + description: + 'You can publish your work on a dedicated cloud. Download the work you like and collaborate with friends around the world.', + image: 'assets/TryNowImages/mbNumberedCard3.png', + borderColor: '#FFED51', + }, +]; + +export const numberedCards2 = [ + { + number: '1', + title: 'You can create music through programming!', + description: + 'Rhythms and melodies can be created intuitively, so anyone can easily create original music.', + image: '', + borderColor: '#F8251F', + }, + { + number: '2', + title: 'You can study math!', + description: + "Since musical elements such as 'note length' and 'performance speed' are controlled numerically, students will develop mathematical literacy.", + image: '', + borderColor: '#F8251F', + }, + { + number: '3', + title: 'You can show your work all over the world!', + description: + 'You can publish your work on a dedicated cloud. Download the work you like and collaborate with friends around the world.', + image: '', + borderColor: '#F8251F', + }, +]; diff --git a/src/constants/TryNowData/raspberryPiData.ts b/src/constants/TryNowData/raspberryPiData.ts new file mode 100644 index 00000000..5d2a2d2e --- /dev/null +++ b/src/constants/TryNowData/raspberryPiData.ts @@ -0,0 +1,30 @@ +export const raspberrydata = { + title: 'Raspberry-Pi', + subtitle: 'Sugar on RaspberryPi', + quote: + '“Young children learn by games; compulsory education cannot remain in the soul.” — Plato', + description: + 'Raspberry Pi are a series of small, low cost, low power computers. Sugar can be run on a Raspberry Pi. You will need a display, keyboard and mouse.', + images: [{ src: 'assets/TryNowImages/raspberry.jpg', alt: 'RaspberryPi 1' }], +}; + +export const raspberrySections = [ + { + title: 'Recommendation', + content: + 'As of August 2017, the best to use is Sugar on a Stick, as it has many activities and has regular security updates. See Sugar on a Stick/Raspberry Pi for how to download and install it. Sugar on a Stick is a spin of Fedora.', + button: '', + }, + { + title: 'Other methods to get Sugar on Raspberry Pi?', + content: + 'using Raspbian, the most common operating system on a Raspberry Pi, a derivative of Debian\n using Fedora\n using Debian\n using Ubuntu', + button: '', + }, + { + title: 'Developers', + content: + 'Developers may focus on Fedora or Debian when setting up a development environment for Sugar on Raspberry Pi, because Sugar development on generic computers is focused on those operating systems.', + button: '', + }, +]; diff --git a/src/constants/TryNowData/sugarizerData.ts b/src/constants/TryNowData/sugarizerData.ts new file mode 100644 index 00000000..3c763c38 --- /dev/null +++ b/src/constants/TryNowData/sugarizerData.ts @@ -0,0 +1,142 @@ +export const logoCardsData = [ + { + logo: 'assets/TryMoreSvgs/web.svg', + title: 'Web', + description: [ + 'Try Sugarizer directly from your browser.', + 'A great way to get a taste of sugar!', + 'No installation needed.', + 'Works on desktop, laptop, and mobile devices.', + 'Works on any operating system (Windows, Mac, GNU/Linux, etc.)', + ], + buttons: [ + { + text: 'Try Sugarizer in your Browser now', + link: 'https://try.sugarizer.org/', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/android.svg', + title: 'Mobile (Android)', + description: [ + 'Try Sugarizer on your android tablet of phone.', + 'Available in Google Play and F-Droid for Android users.', + "Utilizes your device's touch capabilities.", + 'Most functionality works both online and offline.', + 'Android devices can be an economical choice for bringing Sugar to your school.', + ], + buttons: [ + { + text: 'Install Sugarizer from Google Play', + link: 'https://play.google.com/store/apps/details?id=org.olpc_france.sugarizer&pli=1', + }, + { + text: 'Install Sugarizer from F-Droid', + link: 'https://f-droid.org/packages/org.olpc_france.sugarizer/', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/ios.svg', + title: 'Mobile (iOS)', + description: [ + 'Try Sugarizer on your android tablet of phone.', + 'Available in the App store for iOS users.', + "Utilizes your device's touch capabilities.", + 'Most functionality works both online and offline.', + ], + buttons: [ + { + text: 'Install Sugarizer from the App Store', + link: 'https://apps.apple.com/us/app/sugarizer/id978495303', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/deploy.svg', + title: 'Deploy', + description: [ + 'This option is best for sysadmins of schools looking to run their own Sugarizer Learning Platform.', + 'An entire server-side stack is available for deployment.', + 'Comes with tools for administrators and teachers.', + 'Comes with collaboration features for students to work together.', + 'A great choice for schools who want to use Sugar comprehensively.', + ], + buttons: [ + { + text: 'Learn more about Sugarizer Server', + link: 'https://github.com/llaske/sugarizer-server', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/windows.svg', + title: 'Windows', + description: [ + 'Run Sugar on your Windows machine.', + 'Get a taste of Sugar with Sugarizer on your Windows laptop or desktop.', + 'Comes with the complete set of applications available on other platforms.', + 'Installs within Windows; no boot necessary.', + ], + buttons: [ + { + text: 'Download Sugarizer for Windows', + link: 'https://sugarizer.org/download/Sugarizer-Setup-1.8.0.exe', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/mac.svg', + title: 'MacOS', + description: [ + 'Run Sugarizer on your Apple desktop or laptop.', + 'Get a taste of Sugar with Sugarizer on your MacOS laptop or desktop.', + 'Comes with the complete set of applications available on other platforms.', + 'Installs within MacOS; no boot necessary.', + ], + buttons: [ + { + text: 'Download Sugarizer for MacOS', + link: 'https://sugarizer.org/download/Sugarizer-1.8.0.dmg', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/linux.svg', + title: 'GNU- Linux', + description: [ + 'Run Sugarizer on your GNU/Linux desktop or laptop.', + 'Get a taste of Sugar with Sugarizer on your GNU/Linux laptop or desktop.', + 'Comes with the complete set of applications available on other platforms.', + "Experience the Sugar differently from its 'classic' Desktop Environment with Sugarizer.", + 'Installs within your current distribution as a Debian file or AppImage.', + ], + buttons: [ + { + text: 'Download Sugarizer Debian file', + link: 'https://sugarizer.org/download/Sugarizer_1.8.0_amd64.deb', + }, + { + text: 'Download Sugarizer AppImage file', + link: 'https://sugarizer.org/download/Sugarizer-1.8.0.AppImage', + }, + ], + }, +]; + +export const sugarizerData = { + title: 'Sugarizer', + subtitle: 'is Multi-Platform', + quote: + '“Young children learn by games; compulsory education cannot remain in the soul." — Plato', + description: + 'Sugarizer makes the Sugar Learning Platform and its activities available on web, mobile, Windows, and MacOS.', + images: [ + { src: 'assets/TryNowImages/sugarizer.png', alt: 'Sugarizer Example' }, + ], +}; + +export const mockupImage = { + path: 'assets/TryNowImages/sugarizerMockup.png', +}; diff --git a/src/constants/TryNowData/trisquelData.ts b/src/constants/TryNowData/trisquelData.ts new file mode 100644 index 00000000..f259f9f1 --- /dev/null +++ b/src/constants/TryNowData/trisquelData.ts @@ -0,0 +1,76 @@ +export const trisquelData = { + title: 'Trisquel', + subtitle: 'Freedom-Powered Computing', + quote: + '“Young children learn by games; compulsory education cannot remain in the soul.” — Plato', + description: + "Trisquel GNU/Linux is a fully free OS for homes, businesses, and schools, with reliable support for the Sugar Desktop. It's a great choice for booting or installing Sugar on any computer.", + images: [ + { + src: 'assets/TryNowImages/trisquel.png', + alt: 'Trisquel Sugar Blocks 1', + }, + ], + extraImage: { + src: 'assets/TryNowImages/-mockup.png', + alt: 'Trsiquel mockup', + }, +}; + +export const trisquelLogoCards = [ + { + logo: 'assets/TryMoreSvgs/trisquel-desktop.svg', + title: 'Download an ISO with Sugar Desktop', + description: [ + 'Great if you have a laptop or desktop you can dedicate for this purpose.', + 'Gratis and free: Trisquel asks for a donation, but does not require one.', + 'Private: Your children’s data is safely stored locally on their computer.', + 'Ad-free and simple: Zero distractions, so your child can stay focused.', + ], + buttons: [ + { + text: 'Download: Trisquel Sugar TOAST', + link: 'https://trisquel.info/en/download', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/trisquel-community.svg', + title: 'Get community support for Trisquel', + description: [ + 'There is no paid support for Trisquel. Go to the community forum for assistance.', + 'Multi-lingual: Forums are supported in English, Spanish, French, Italian, Galego, and German.', + ], + buttons: [ + { + text: 'Explore community forums', + link: 'https://trisquel.info/en/forum', + }, + ], + }, + { + logo: 'assets/TryMoreSvgs/trisquel-documentation.svg', + title: 'Read the documentation', + description: [ + 'Learn more about what makes Trisquel different.', + 'Read about Trisquel’s commitment to accessibility.', + 'Read about all the different ways that you can get community help for Trisquel.', + 'Read about how you can get involved.', + ], + buttons: [ + { + text: 'Explore Sugar Labs’s documentation', + link: 'https://wiki.sugarlabs.org/go/Trisquel_On_A_Sugar_Toast', + }, + ], + }, +]; + +export const trisquelSections = [ + { + title: "Trisquel is fully free 'as in freedom'", + content: + 'What makes Trisquel different is that it is fully free as in freedom, including the freedom to study the source code. The Trisquel maintainers have given reliable support for Sugar, which is another reason that we recommend it as a great option for those of you interested in booting the Sugar Learning Environment from a live USB or installing onto your computer.', + button: '', + }, +]; diff --git a/src/constants/TryNowData/turtleBlocksData.ts b/src/constants/TryNowData/turtleBlocksData.ts new file mode 100644 index 00000000..2078ba79 --- /dev/null +++ b/src/constants/TryNowData/turtleBlocksData.ts @@ -0,0 +1,50 @@ +export const turtleBlocksData = { + title: 'Turtle Blocks', + subtitle: 'Playground for Coding', + quote: + '“Young children learn by games; compulsory education cannot remain in the soul." — Plato', + description: + 'Turtle Blocks JavaScript lets users create colorful art with a Logo-inspired turtle using snap-together coding blocks. It’s beginner-friendly yet powerful enough for advanced programming, graphics, and math exploration.', + images: [ + { + src: 'assets/TryNowImages/turtleBlocks.png', + alt: 'Turtle Blocks Example 1', + }, + ], +}; + +export const turtleBlocksSections = [ + { + title: 'Using turtle art JS', + content: + "Turtle Blocks Javascript is designed to run in a browser. Most of the development has been done in Chrome, but it should also work in Firefox. You can run it directly from index.html, from a server maintained by Sugar Labs, from the github repo, or by setting up a local server. Once you've launched it in your browser, start by clicking on (or dragging) blocks from the Turtle palette. Use multiple blocks to create drawings; as the turtle moves under your control, colorful lines are drawn. You add blocks to your program by clicking on or dragging them from the palette to the main area. You can delete a block by dragging it back onto the palette. Click anywhere on a 'stack' of blocks to start executing that stack or by clicking in the Rabbit (fast) or Turtle (slow) on the Main Toolbar.", + button: null, + }, + { + title: 'Getting Started Documentation', + content: + 'The basic buttons and basic blocks are explained in detail in Documentation. A guide to programming with Turtle Blocks is available in Turtle Blocks Guide. A quick start: Google Code-in participant Jasmine Park has created some guides to using Turtle Blocks: Turtle Blocks: An Introductory Manual and Turtle Blocks: A Manual for Advanced Blocks.', + button: null, + }, + { + title: 'Found a Bug?', + content: 'Bugs can be reported in the issues section of this repository.', + button: null, + }, + { + title: 'Advance Features', + content: + 'Turtle Blocks has a plugin mechanism that is used to add new blocks. You can learn more about how to use plugins (and how to write them) from the Plugins Guide.', + button: null, + }, + { + title: 'List of Plugins', + content: + 'Mindstorms: blocks to interact with the LEGO Mindstorms robotics kit\n RoDi: blocks to interact with RoDi wireless robot\n Maths: addition blocks for some more advanced mathematics\n Translate: blocks for translating strings between languages, e.g., English to Spanish\n Dictionary: a block to look up dictionary definitions\n Weather: blocks to retrieve global weather forecasts\n Logic: blocks for bitwise Boolean operations\n Finance: a block for looking up market prices\n Bitcoin: a block for looking up bitcoin exchange rates\n Nutrition: blocks for exploring the nutritional content of food\n Facebook: a block for publishing a project to Facebook\n Heap: blocks to support a heap and for loading and saving data\n Accelerometer: blocks for accessing an accelerometer\n Turtle: blocks to support advanced features when using multiple turtles\n Gmap: blocks to support generation of Google maps.', + button: null, + }, +]; + +export const mockupImage = { + path: 'assets/TryNowImages/turtleMockup.png', +}; diff --git a/src/pages/TryNow/BootableSoas.tsx b/src/pages/TryNow/BootableSoas.tsx new file mode 100644 index 00000000..3696ad2c --- /dev/null +++ b/src/pages/TryNow/BootableSoas.tsx @@ -0,0 +1,26 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import { + bootableSoasData, + mockupImage, +} from '@/constants/TryNowData/bootableSoasData'; +import StepsToUse from '@/components/TryNow/StepsToUse'; + +const BootableSoasPage = () => { + return ( +
+
+
+ + + TurtleMockup + + +
+
+
+ ); +}; + +export default BootableSoasPage; diff --git a/src/pages/TryNow/MusicBlocks.tsx b/src/pages/TryNow/MusicBlocks.tsx new file mode 100644 index 00000000..a8fd53e3 --- /dev/null +++ b/src/pages/TryNow/MusicBlocks.tsx @@ -0,0 +1,123 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import Paragraph from '@/components/TryNow/Paragraph'; +import LogoCards from '@/components/TryNow/LogoCards'; +import TeamSection from '@/components/TryNow/TeamSection'; +import NumberedCard from '@/components/TryNow/NumberedCard'; +import { + musicBlocksData, + mockupImage, + musicblockstext, + musicBlocksSections, + foundabug, + musicBlocksLogoCards, + teamMembers, + numberedCards1, + numberedCards2, +} from '@/constants/TryNowData/musicBlocksData'; + +const MusicBlocksPage = () => { + return ( +
+
+
+ + +

+ Learn music,{' '} + math, and{' '} + programming together. +

+ +
+ Music Blocks +
+ +
+ TurtleMockup +
+ +

+ Music Blocks is an American-made educational software that teaches + music, math, and programming all at once. By combining blocks that + indicate instruments and rhythms, and by changing the pitch values, + children can create music from scratch, even if they are not familiar + with music, are not good at math, or are new to programming. It is a + groundbreaking software that allows children to learn these things. +

+ + {/* Render Paragraph components dynamically */} + {musicBlocksSections.map((section, index) => ( + + ))} + +

+ What can you do with{' '} + Music Blocks?? +

+ + + +

+ How Music Blocks help your + child's education?? +

+ + {/* Card Grid */} +
+ {numberedCards1.map((card, index) => ( + + ))} +
+ + {/* Card Grid */} +
+ {numberedCards2.map((card, index) => ( + + ))} +
+ +
+ +
+ + {/* Render Paragraph components dynamically */} + {foundabug.map((section, index) => ( + + ))} +
+
+
+ ); +}; + +export default MusicBlocksPage; diff --git a/src/pages/TryNow/Raspberry.tsx b/src/pages/TryNow/Raspberry.tsx new file mode 100644 index 00000000..6e4f2cb9 --- /dev/null +++ b/src/pages/TryNow/Raspberry.tsx @@ -0,0 +1,32 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import Paragraph from '@/components/TryNow/Paragraph'; +import { + raspberrydata, + raspberrySections, +} from '@/constants/TryNowData/raspberryPiData'; + +const RaspberryPiPage = () => { + return ( +
+
+
+ + + {/* Render Paragraph components dynamically */} + {raspberrySections.map((section, index) => ( + + ))} +
+
+
+ ); +}; + +export default RaspberryPiPage; diff --git a/src/pages/TryNow/Sugarizer.tsx b/src/pages/TryNow/Sugarizer.tsx new file mode 100644 index 00000000..d433e5ba --- /dev/null +++ b/src/pages/TryNow/Sugarizer.tsx @@ -0,0 +1,31 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import LogoCards from '@/components/TryNow/LogoCards'; +import { + logoCardsData, + sugarizerData, + mockupImage, +} from '@/constants/TryNowData/sugarizerData'; + +const SugarizerPage = () => { + return ( +
+
+
+ + + TurtleMockup + +

+ Try it now! +

+ {/* Logo Cards Section */} + +
+
+
+ ); +}; + +export default SugarizerPage; diff --git a/src/pages/TryNow/Trisquel.tsx b/src/pages/TryNow/Trisquel.tsx new file mode 100644 index 00000000..6afa6093 --- /dev/null +++ b/src/pages/TryNow/Trisquel.tsx @@ -0,0 +1,40 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import Paragraph from '@/components/TryNow/Paragraph'; +import LogoCards from '@/components/TryNow/LogoCards'; +import { + trisquelSections, + trisquelData, + trisquelLogoCards, +} from '@/constants/TryNowData/trisquelData'; + +const TrisquelPage = () => { + return ( +
+
+
+ + + {/* Render Paragraph components dynamically */} + {trisquelSections.map((section, index) => ( + + ))} + +

+ Learn and Try! +

+ + +
+
+
+ ); +}; + +export default TrisquelPage; diff --git a/src/pages/TryNow/TurtleBlocks.tsx b/src/pages/TryNow/TurtleBlocks.tsx new file mode 100644 index 00000000..8a458b48 --- /dev/null +++ b/src/pages/TryNow/TurtleBlocks.tsx @@ -0,0 +1,41 @@ +import Header from '@/sections/Header'; +import Footer from '@/sections/Footer'; +import FeatureSection from '@/components/TryNow/FeatureSection'; +import Paragraph from '@/components/TryNow/Paragraph'; +import { + turtleBlocksData, + turtleBlocksSections, + mockupImage, +} from '@/constants/TryNowData/turtleBlocksData'; + +const TurtleBlocksPage = () => { + return ( +
+
+
+ + +

+ Note: Turtle Blocks JS closely parallels the Python version of Turtle + Blocks, the version included in the Sugar distribution. Sugar users + probably want to use Turtle Blocks rather than Turtle Blocks JS. +

+ + TurtleMockup + + {/* Render Paragraph components dynamically */} + {turtleBlocksSections.map((section, index) => ( + + ))} +
+
+
+ ); +}; + +export default TurtleBlocksPage; diff --git a/src/routes.tsx b/src/routes.tsx index 9ed70d1b..82ab6818 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -12,6 +12,12 @@ import Products from '@/pages/Products'; import NewsPage from '@/pages/News/NewsPage'; import NewsDetailPage from '@/pages/News/NewsDetailPage'; import MorePage from '@/pages/More'; +import TurtleBlocksPage from '@/pages/TryNow/TurtleBlocks'; +import SugarizerPage from '@/pages/TryNow/Sugarizer'; +import BootableSoasPage from '@/pages/TryNow/BootableSoas'; +import TrisquelPage from '@/pages/TryNow/Trisquel'; +import RaspberryPiPage from '@/pages/TryNow/Raspberry'; +import MusicBlocksPage from '@/pages/TryNow/MusicBlocks'; const router = createHashRouter([ { path: `/`, element: }, @@ -29,6 +35,12 @@ const router = createHashRouter([ { path: `/volunteer`, element: }, { path: `/donate`, element: }, { path: `/products`, element: }, + { path: `/turtleblocks`, element: }, + { path: `/sugarizer`, element: }, + { path: `/bootablesoas`, element: }, + { path: `/trisquel`, element: }, + { path: `/raspberry`, element: }, + { path: `/musicblocks`, element: }, ]); export default router; diff --git a/src/styles/Animations.ts b/src/styles/Animations.ts index b72bbe12..bcfa0f23 100644 --- a/src/styles/Animations.ts +++ b/src/styles/Animations.ts @@ -837,3 +837,178 @@ export const faqPageAnimations = { }, }), }; +export const teamSectionAnimations = { + section: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.8, ease: 'easeOut' }, + }, + }, + + heading: { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: 'easeOut', delay: 0.2 }, + }, + }, + + memberCard: { + hidden: { opacity: 0, scale: 0.9 }, + visible: { + opacity: 1, + scale: 1, + transition: { duration: 0.6, ease: 'easeOut' }, + }, + }, + + memberImage: { + hidden: { opacity: 0, scale: 0.8 }, + visible: { + opacity: 1, + scale: 1, + transition: { duration: 0.6, ease: 'easeOut', delay: 0.3 }, + }, + }, +}; +export const paragraphAnimations = { + section: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: 'easeOut' }, + }, + }, + + text: { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.4, ease: 'easeOut' }, + }, + }, + + listItem: (index: number) => ({ + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.4, delay: index * 0.1 }, + }, + }), + + button: { + hover: { + scale: 1.05, + transition: { duration: 0.3 }, + }, + }, +}; +export const numberedCardAnimations = { + card: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: 'easeOut' }, + }, + hover: { + scale: 1.05, + boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.2)', + transition: { duration: 0.3 }, + }, + }, + + numberCircle: { + hover: { + rotate: 10, + transition: { duration: 0.3 }, + }, + }, + + image: { + hover: { + scale: 1.02, + transition: { duration: 0.3 }, + }, + }, +}; +export const logoCardAnimations = { + card: { + hidden: { opacity: 0, y: 50 }, + visible: (index: number) => ({ + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: 'easeOut', delay: index * 0.15 }, + }), + hover: { + scale: 1.05, + boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.2)', + transition: { duration: 0.3 }, + }, + }, + + logoContainer: { + hover: { + rotate: 10, + transition: { duration: 0.3 }, + }, + }, + + button: { + hover: { scale: 1.1, transition: { duration: 0.2 } }, + tap: { scale: 0.95 }, + }, +}; +export const featureSectionAnimations = { + section: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.8, ease: 'easeOut' }, + }, + }, + + textContainer: { + hidden: { opacity: 0, x: -50 }, + visible: { + opacity: 1, + x: 0, + transition: { duration: 0.8, ease: 'easeOut' }, + }, + }, + + imageContainer: { + hidden: { opacity: 0, x: 50 }, + visible: { + opacity: 1, + x: 0, + transition: { duration: 0.8, ease: 'easeOut' }, + }, + }, + + image: { + hidden: { opacity: 0, scale: 0.8 }, + visible: { + opacity: 1, + scale: 1, + transition: { duration: 0.5, ease: 'easeOut' }, + }, + hover: { scale: 1.05, transition: { duration: 0.3 } }, + }, + + button: { + hover: { scale: 1.3, transition: { type: 'spring', stiffness: 300 } }, + }, + + note: { + hidden: { opacity: 0 }, + visible: { opacity: 1, transition: { delay: 0.3, duration: 0.5 } }, + }, +};