fix: ui dots

src/components/BecomeSponsor.tsx

@@ -41,7 +41,7 @@ const BecomeSponsor = () => {
 
                     {/* Lista de beneficios */}
                     <ul className="space-y-4">
-                        <li className="flex justify-center items-center md:items-start md:justify-center space-x-4 p-4 bg-white rounded-xl shadow-sm hover-scale">
+                        <li className="flex justify-start items-center md:items-start space-x-4 p-4 bg-white rounded-xl shadow-sm hover-scale">
         <span
             className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
           <DuckIcon color="purple" className="w-8 h-8 text-white" aria-hidden="true"/>
@@ -53,8 +53,8 @@ const BecomeSponsor = () => {
                             </div>
                         </li>
 
-                        <li className="flex justify-center items-center md:items-start space-x-4 p-4 bg-white rounded-xl shadow-sm hover-scale">
-                            <span className="w-12 h-12 rounded-lg self-center flex items-center justify-center flex-shrink-0">
+                        <li className="flex justify-start items-center md:items-start space-x-4 p-4 bg-white rounded-xl shadow-sm hover-scale">
+                            <span className="w-12 h-12 rounded-lg self-start flex items-center justify-center flex-shrink-0">
                                 <DuckIcon color="blue" className="w-8 h-8 text-white" aria-hidden="true"/>
                             </span>
                             <div>

src/components/Carousel.tsx

@@ -22,6 +22,7 @@ interface CarouselProps<T> {
     autoplayInterval?: number;
     className?: string;
     hideArrows?: boolean;
+    hideDots?: boolean;
 }
 
 const Carousel = <T,>({
@@ -34,6 +35,7 @@ const Carousel = <T,>({
                           autoplayInterval = 3000,
                           className,
                           hideArrows = false,
+    hideDots = false
                       }: CarouselProps<T>) => {
     const [currentSlide, setCurrentSlide] = useState(0);
     const [loaded, setLoaded] = useState(false);
@@ -113,14 +115,14 @@ const Carousel = <T,>({
             </div>
 
             {/* Dots */}
-            {loaded && instanceRef.current && (
-                <div className="flex justify-center mt-20 gap-2.5 md:gap-4">
+            {loaded && !hideDots && instanceRef.current && (
+                <div className="flex flex-wrap justify-center mt-20 px-4 gap-2.5 md:gap-4">
                     {[...Array(slideCount).keys()].map((index) => (
                         <button
                             key={index}
                             onClick={() => instanceRef.current?.moveToIdx(index)}
                             className={`w-3 h-3 rounded-full ${
-                                currentSlide === index ? "bg-primary-600" : "bg-primary-200"
+                                currentSlide === index ? "bg-primary-400 border-4 border-primary-400 " : "bg-primary-200"
                             }`}
                         />
                     ))}

src/components/Gallery.tsx

@@ -135,7 +135,7 @@ const Gallery = () => {
             className="flex flex-col justify-center items-center py-20 px-10 bg-gradient-to-b from-posadev-lightPink/10 to-white"
             aria-labelledby="gallery-title">
             {/* Section header */}
-            <h2 id="gallery-title" className="text-3xl md:text-5xl font-bold text-alternative-700 mb-4">
+            <h2 id="gallery-title" className="text-3xl md:text-5xl text-center font-bold text-alternative-700 mb-4">
                 Galería de Momentos
             </h2>
             <p className="text-md text-gray-600 w-full flex-wrap flex gap-2 justify-center items-center">

src/components/Speaker.tsx

@@ -20,8 +20,8 @@ const Speaker: React.FC<SpeakerProps> = ({speaker}) => {
                 <img src={speaker.profilePicture} alt={speaker.fullName} className="h-60 w-60 rounded-3xl" loading="lazy"/>
                 <Card className="bg-white/10 border-0 shadow-none text-white flex flex-col justify-start h-52 p-6 min-w-[100%] max-w-[400px]">
                     <p className="text-2xl font-bold">{`${speaker.firstName.split(" ")[0]} ${speaker.lastName.split(" ")[0]}`}</p>
-                    <p className="py-2 text-xl line-clamp-2 my-4 rounded">{speaker.tagLine}</p>
-                    <div className="flex items-end justify-start gap-6 md:gap-2 lg:gap-4 text-alternative-100">
+                    <p className="py-2 text-xl h-full line-clamp-2 overflow-hidden my-4 rounded">{speaker.tagLine}</p>
+                    <div className="flex justify-self-end items-end justify-start gap-6 md:gap-2 lg:gap-4 text-alternative-100">
                         {speaker.links.map((link, index) => (
                             <SocialMedia key={`link-${link.url}`} link={link} />
                         ))}

src/components/SpeakerInfo.tsx

@@ -9,7 +9,7 @@ import Gradient from "@/components/Gradient.tsx";
 import {useAppContext} from "@/context/AppContext.tsx";
 import {findSpeaker, scrollToTop} from "@/lib/utils.ts";
 import Shared from "@/components/Shared.tsx";
-import Loading from "@/components/Loading.tsx";
+import Loading from "@/pages/Loading.tsx";
 
 const SpeakerInfo = () => {
     const navigate = useNavigate()

src/components/Speakers.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Speaker from "@/components/Speaker.tsx";
 import Carousel, {GridConfig} from "@/components/Carousel.tsx";
 import {useAppContext} from "@/context/AppContext.tsx";
+import {useIsMobile} from "@/hooks/use-mobile.tsx";
 
 const Speakers = () => {
     const {speakers} = useAppContext();
@@ -14,7 +15,7 @@ const Speakers = () => {
 
     return (
         <section id="speakers"
-                 className="bg-gradient-to-bl to-posadev-darkPink from-primary-600 min-h-screen flex items-center justify-center flex-col py-20"
+                 className="bg-gradient-to-br to-posadev-darkPink from-primary-600 min-h-screen flex items-center justify-center flex-col py-20"
                  itemScope
                  itemType="https://schema.org/Event"
                  aria-labelledby="hero-title"

src/context/AppContext.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useState, useEffect } from "react";
 import {ISession, ISpeaker} from "@/types/speakers.ts";
 import {getAll} from "@/https/fetch.ts";
 import {AppStatus} from "@/types/types.ts";
-import Loading from "@/components/Loading.tsx";
+import Loading from "@/pages/Loading.tsx";
 import {addSessionSpeakers} from "@/lib/utils.ts";