feat: add sponsor section

Author: Maakkkuu

app/(home)/components/Sponsors.tsx

@@ -1,56 +1,56 @@
 import { Container } from '@/components/ui/container';
 import dynamic from 'next/dynamic';
 const SponsorsDesktop = dynamic(() => import('./SponsorsDesktop'));
-// const SponsorsMobile = dynamic(() => import("./SponsorsMobile"));
+const SponsorsMobile = dynamic(() => import('./SponsorsMobile'));
 
 interface SponsorshipProps {
   name: string;
   logo: string;
   logoMobile: string;
-  testimonial: string;
+  description: string;
   url: string;
 }
 
-export function Sponsors() {
+export function Sponsors() {  
   const sponsors: SponsorshipProps[] = [
     {
       name: 'Mugna Tech',
       logo: '/sponsor-logos/mugna-logo.png',
       logoMobile: '/sponsor-logos/mugna-logo.png',
-      testimonial:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
+      description:
+        'Mugna Tech specializes in Web, Software, and Mobile Development, UI/UX Design, and more, with 75+ projects for diverse businesses.',
       url: 'https://mugna.tech',
     },
     {
       name: 'Codev',
       logo: '/sponsor-logos/codev-logo.png',
       logoMobile: '/sponsor-logos/codev-logo.png',
-      testimonial:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
+      description:
+        'Hire top offshore developers with CoDev—skilled professionals dedicated to your success',
       url: 'https://codev.com',
     },
     {
       name: 'Ingenuity Software',
-      logo: '/sponsor-logos/ingenuity-logo-mobile.png',
+      logo: '/sponsor-logos/ingenuity-logo.png',
       logoMobile: '/sponsor-logos/ingenuity-logo-mobile.png',
-      testimonial:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
+      description:
+        'Ingenuity Software is a Davao-based software development company that turns ideas into impactful digital solutions. ',
       url: 'https://ingenuity.ph',
     },
     {
       name: 'PythonPH',
       logo: '/sponsor-logos/pythonph-logo.png',
-      logoMobile: '/sponsor-logos/pythonph-logo.png',
-      testimonial:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
+      logoMobile: '/sponsor-logos/pythonph-logo-mobile.png',
+      description:
+        'Python Philippines is a volunteer-run non-profit supporting the growth of the Python community in the country.',
       url: 'https://python.ph',
     },
     {
       name: 'Stace',
-      logo: '/sponsor-logos/stace-logo.png',
-      logoMobile: '/sponsor-logos/stace-logo.png',
-      testimonial:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
+      logo: '/sponsor-logos/stace-logo.svg',
+      logoMobile: '/sponsor-logos/stace-logo.svg',
+      description:
+        'Stace is a comprehensive platform designed to enhance and simplify the rental experience for both renters and landlords.',
       url: 'https://www.stace.app',
     },
   ];
@@ -64,10 +64,10 @@ export function Sponsors() {
         </section>
 
         {/* Mobile View (Below 768px) */}
-        {/* <section className="md:hidden">
-                    <SponsorsMobile sponsors={sponsors} />
-                </section> */}
+        <section className="md:hidden">
+          <SponsorsMobile sponsors={sponsors} />
+        </section>
       </Container>
     </section>
   );
-}
+}

app/(home)/components/SponsorsDesktop.tsx

@@ -19,7 +19,7 @@ interface SponsorshipProps {
   name: string;
   logo: string;
   logoMobile: string;
-  testimonial: string;
+  description: string;
   url: string;
 }
 
@@ -80,14 +80,14 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
   };
 
   return (
-    <div className="xl:grid xl:grid-cols-[1fr_2fr] lg:flex lg:flex-col lg:h-auto text-white gap-x-8 py-16">
+    <div className="xl:grid xl:grid-cols-[1fr_2fr] md:flex md:flex-col md:h-auto text-white gap-x-8 py-16 items-center ">
       {/* Description Section */}
-      <div className="space-y-16 xl:mb-28 lg:flex-1 lg:h-auto w-[480px] mt-24">
-        <div className="space-y-9 max-w-[365px] mx-auto xl:mx-0">
-          <h1 className="text-primary text-[80px] leading-none font-bold mt-12 mb-12">
+      <div className="space-y-16 xl:mb-28 lg:flex-1 lg:h-auto md:flex-1 md:h-auto w-[480px]">
+        <div className="space-y-9 xl:mx-0">
+          <h1 className="text-primary text-[80px] leading-none font-bold mb-12">
             <span className="text-white">Our</span> Sponsors
           </h1>
-          <p className="text-xl text-left mb-12">
+          <p className="text-xl text-left mb-12 min-w-10">
             A big thank you to our generous sponsors whose support makes our
             work possible and helps us create lasting impact.
           </p>
@@ -108,10 +108,10 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
         </div>
       </div>
 
-      <div className="pb-36 w-[720px]">
+      <div className="pb-36 w-[633px] xl:ml-16">
         {/* Featured Section */}
         {featuredSponsor && (
-          <div className="flex-1 h-3/4 mb-4">
+          <div className="flex-1 h-[418px] mb-4">
             <Link
               href={featuredSponsor.url}
               target="_blank"
@@ -124,12 +124,10 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
                   loading="lazy"
                   fill
                   className={cn(
+                    featuredSponsor.name === 'PythonPH'
+                      ? 'scale-150'
+                      : 'scale-100',
                     'object-contain',
-                    featuredSponsor.name === 'Ingenuity Software' ||
-                      featuredSponsor.name === 'PythonPH' ||
-                      featuredSponsor.name === 'Stace'
-                      ? 'scale-150' // Increase the size for specific sponsors
-                      : '',
                     'w-full',
                     'h-full',
                     'p-12'
@@ -157,8 +155,8 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
                 {/* Horizontal Line */}
                 <div className="w-[440px] h-[1.5px] bg-[#FFFFFF]"></div>
               </div>
-              <p className="text-xl mt-4">
-                {featuredSponsor.testimonial}
+              <p className="lg:text-xl mt-4 text-[12px] max-md:m-5 pr-3 pl-3">
+                {featuredSponsor.description}
                 <br></br>
                 <br></br>— {featuredSponsor.name}
               </p>
@@ -178,17 +176,17 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
             }}
           >
             {/* Previous Button */}
-            <button onClick={autoPlayInteraction}>
+            <a onClick={autoPlayInteraction}>
               <CarouselPrevious className="absolute left-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20" />
-            </button>
+            </a>
 
             {/* Carousel Content */}
             <CarouselContent>
               {sponsors.map((sponsor, index) => (
                 <CarouselItem key={index} className="basis-1/3">
                   <div
                     key={index}
-                    className="relative group transition-all duration-500 col-span-3 row-span-4 ease-in-out
+                    className="relative group transition-all duration-500 col-span-3 row-span-4 ease-in-out h-[166px] w-[200px]
                   "
                     onClick={() => carouselFeaturedAnimation(sponsor, index)}
                   >
@@ -200,16 +198,17 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
                       <div className="min-h-[160px] min-w-[160px] relative flex justify-center items-center transition-transform duration-500 ease-in-out hover:scale-105">
                         <div className="">
                           <Image
-                            src={sponsor.logo}
+                            src={sponsor.logoMobile}
                             alt={sponsor.name}
                             loading="lazy"
                             fill
                             className={cn(
                               'object-contain',
+                              sponsor.name === 'PythonPH'
+                                ? 'scale-75'
+                                : 'scale-100',
                               'w-full',
-                              'h-full',
-                              'md:scale-[0.80]',
-                              'lg:scale-100'
+                              'h-full'
                             )}
                           />
                         </div>
@@ -221,9 +220,9 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
             </CarouselContent>
 
             {/* Next Button */}
-            <button onClick={autoPlayInteraction}>
+            <a onClick={autoPlayInteraction}>
               <CarouselNext className="absolute right-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20" />
-            </button>
+            </a>
           </Carousel>
         </div>
         {/* Dots Navigation */}
@@ -244,4 +243,4 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
   );
 };
 
-export default SponsorsDesktop;
+export default SponsorsDesktop;