Other Activities Page Designed

Author: sa-fw-an

src/assets/Cards/activity-finance.svg

@@ -1,19 +1,24 @@
 import React, { useState, useRef, TouchEvent } from 'react';
-import ToolCard from './TryCard';
-import CardData from '../constants/TryCardData';
+import { TryCard, ActivityCard } from './TryCard';
+import { TryCardData, Activities } from '../constants/TryCardData';
 
 const Try: React.FC = () => {
   const [currentCard, setCurrentCard] = useState(0);
   const [touchStart, setTouchStart] = useState<number>(0);
   const [touchEnd, setTouchEnd] = useState<number>(0);
   const [isDragging, setIsDragging] = useState(false);
+  const [currentActivity, setCurrentActivity] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
 
-  const handleSwipe = (direction: 'next' | 'prev') => {
+  const handleSwipe = (
+    direction: 'next' | 'prev',
+    setCurrent: React.Dispatch<React.SetStateAction<number>>,
+    length: number,
+  ) => {
     if (direction === 'next') {
-      setCurrentCard((prev) => (prev + 1) % CardData.length);
+      setCurrent((prev) => (prev + 1) % length);
     } else {
-      setCurrentCard((prev) => (prev - 1 + CardData.length) % CardData.length);
+      setCurrent((prev) => (prev - 1 + length) % length);
     }
   };
 
@@ -26,16 +31,19 @@ const Try: React.FC = () => {
     setTouchEnd(e.targetTouches[0].clientX);
   };
 
-  const handleTouchEnd = () => {
+  const handleTouchEnd = (
+    setCurrent: React.Dispatch<React.SetStateAction<number>>,
+    length: number,
+  ) => {
     setIsDragging(false);
     const swipeThreshold = 50;
     const swipeDistance = touchStart - touchEnd;
 
     if (Math.abs(swipeDistance) > swipeThreshold) {
       if (swipeDistance > 0) {
-        handleSwipe('next');
+        handleSwipe('next', setCurrent, length);
       } else {
-        handleSwipe('prev');
+        handleSwipe('prev', setCurrent, length);
       }
     }
   };
@@ -67,8 +75,8 @@ const Try: React.FC = () => {
 
           {/* Desktop Grid */}
           <div className="hidden md:grid md:grid-cols-3 gap-8">
-            {CardData.map((card, index) => (
-              <ToolCard key={index} {...card} />
+            {TryCardData.map((card, index) => (
+              <TryCard key={index} {...card} />
             ))}
           </div>
 
@@ -80,7 +88,9 @@ const Try: React.FC = () => {
                 className="overflow-hidden touch-pan-x"
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
-                onTouchEnd={handleTouchEnd}
+                onTouchEnd={() =>
+                  handleTouchEnd(setCurrentCard, TryCardData.length)
+                }
               >
                 <div
                   className={`flex transition-transform duration-300 ease-out`}
@@ -89,7 +99,7 @@ const Try: React.FC = () => {
                     willChange: 'transform',
                   }}
                 >
-                  {CardData.map((card, index) => (
+                  {TryCardData.map((card, index) => (
                     <div
                       key={index}
                       className="w-full flex-shrink-0 px-2"
@@ -101,7 +111,7 @@ const Try: React.FC = () => {
                         ${isDragging ? 'scale-98' : 'hover:scale-102'}
                       `}
                       >
-                        <ToolCard {...card} />
+                        <TryCard {...card} />
                       </div>
                     </div>
                   ))}
@@ -111,7 +121,9 @@ const Try: React.FC = () => {
               {/* Navigation Buttons */}
               <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between pointer-events-none">
                 <button
-                  onClick={() => handleSwipe('prev')}
+                  onClick={() =>
+                    handleSwipe('prev', setCurrentCard, TryCardData.length)
+                  }
                   className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Previous"
                 >
@@ -130,7 +142,9 @@ const Try: React.FC = () => {
                   </svg>
                 </button>
                 <button
-                  onClick={() => handleSwipe('next')}
+                  onClick={() =>
+                    handleSwipe('next', setCurrentCard, TryCardData.length)
+                  }
                   className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Next"
                 >
@@ -153,7 +167,7 @@ const Try: React.FC = () => {
 
             {/* Dots Indicator */}
             <div className="flex justify-center space-x-2 mt-6">
-              {CardData.map((_, index) => (
+              {TryCardData.map((_, index) => (
                 <button
                   key={index}
                   onClick={() => setCurrentCard(index)}
@@ -168,6 +182,138 @@ const Try: React.FC = () => {
             </div>
           </div>
         </div>
+
+        <div className="max-w-6xl mx-auto space-y-8 mt-16">
+          <header className="space-y-6">
+            <h1 className="text-5xl md:text-7xl font-bold flex flex-col sm:flex-row items-start sm:items-center">
+              <span className="text-white bg-[#975555] px-2 py-1 rounded-lg inline-block">
+                ALREADY USING
+              </span>
+              <span className="text-black sm:ml-2 mt-2 sm:mt-0">SUGAR?</span>
+            </h1>
+            <div className="space-y-4">
+              <p className="text-[#975555] text-2xl md:text-4xl font-bold leading-tight">
+                "We have many activities for you!"
+              </p>
+              <i className="text-xs text-gray-700">
+                The Sugar Learning platform is a complete environment for
+                teaching and learning, which includes individual activities. If
+                you're already using the Sugar Desktop Environment, then you can
+                install from the activities below, which has links to some of
+                our most popular activities.
+              </i>
+            </div>
+          </header>
+
+          {/* Desktop Grid */}
+          <div className="hidden md:grid md:grid-cols-3 gap-8">
+            {Activities.map((activity, index) => (
+              <ActivityCard key={index} {...activity} />
+            ))}
+          </div>
+
+          {/* Mobile Carousel */}
+          <div className="md:hidden ml-[-1rem] mr-[-1rem]">
+            <div className="relative px-4">
+              <div
+                ref={carouselRef}
+                className="overflow-hidden touch-pan-x"
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={() =>
+                  handleTouchEnd(setCurrentActivity, Activities.length)
+                }
+              >
+                <div
+                  className={`flex transition-transform duration-300 ease-out`}
+                  style={{
+                    transform: `translateX(-${currentActivity * 100}%)`,
+                    willChange: 'transform',
+                  }}
+                >
+                  {Activities.map((activity, index) => (
+                    <div
+                      key={index}
+                      className="w-full flex-shrink-0 px-2"
+                      style={{ scrollSnapAlign: 'start' }}
+                    >
+                      <div
+                        className={`
+                        transform transition-all duration-300
+                        ${isDragging ? 'scale-98' : 'hover:scale-102'}
+                      `}
+                      >
+                        <ActivityCard {...activity} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Navigation Buttons */}
+              <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between pointer-events-none">
+                <button
+                  onClick={() =>
+                    handleSwipe('prev', setCurrentActivity, Activities.length)
+                  }
+                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  aria-label="Previous"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 19l-7-7 7-7"
+                    />
+                  </svg>
+                </button>
+                <button
+                  onClick={() =>
+                    handleSwipe('next', setCurrentActivity, Activities.length)
+                  }
+                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  aria-label="Next"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Dots Indicator */}
+            <div className="flex justify-center space-x-2 mt-6">
+              {Activities.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentActivity(index)}
+                  className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
+                    currentActivity === index
+                      ? 'bg-[#975555] w-6'
+                      : 'bg-[#975555]/30'
+                  }`}
+                  aria-label={`Go to slide ${index + 1}`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
       </main>
     </div>
   );

src/assets/Cards/activity-maze.svg

@@ -11,7 +11,34 @@ interface TryCardProps {
   gradientClass?: string;
 }
 
-const TryCard: React.FC<TryCardProps> = ({
+interface ActivityCardProps {
+  title: string;
+  description: string;
+  icon: string;
+  buttonText: string;
+  href: string;
+}
+
+export const ActivityCard: React.FC<ActivityCardProps> = ({
+  title,
+  description,
+  icon,
+  buttonText,
+  href,
+}) => (
+  <div className="bg-white rounded-3xl p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
+    <img src={icon} alt={title} className="w-24 h-24 mb-4" />
+    <h3 className="text-3xl font-bold mb-2">{title}</h3>
+    <p className="text-gray-600 mb-6">{description}</p>
+    <a href={href} className="w-full">
+      <button className="w-full py-3 px-6 border-2 border-gray-900 rounded-full text-lg font-semibold hover:bg-gray-900 hover:text-white transition-colors">
+        {buttonText}
+      </button>
+    </a>
+  </div>
+);
+
+export const TryCard: React.FC<TryCardProps> = ({
   title,
   description,
   tryNowText,
@@ -77,5 +104,3 @@ const TryCard: React.FC<TryCardProps> = ({
     </div>
   </div>
 );
-
-export default TryCard;