Merge pull request #188 from SpaceyaTech/fix-footer-subscribe-width

fix footer subscribe form width overflow
SpaceyaTech · Jun 11, 2024 · 82b8b48 · 82b8b48
2 parents 8ec4d2c + ebe5733
commit 82b8b48
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 110 deletions.
diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx
@@ -1,9 +1,5 @@
-/* eslint-disable react/jsx-one-expression-per-line */
-/* eslint-disable implicit-arrow-linebreak */
 /* eslint-disable no-confusing-arrow */
 import React from "react";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import { Link } from "react-router-dom";
 import {
   FaFacebook,
   FaInstagram,
@@ -12,75 +8,78 @@ import {
   FaSpotify,
 } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from "react-router-dom";
+
 import logo from "../../assets/images/sytLogo.png";
 
+const socialLinks = [
+  {
+    href: "https://www.facebook.com/spaceyatech",
+    icon: <FaFacebook size="1.6em" />,
+    alt: "facebook",
+  },
+  {
+    href: "https://www.instagram.com/spaceyatech/",
+    icon: <FaInstagram size="1.5em" />,
+    alt: "instagram",
+  },
+  {
+    href: "https://x.com/SpaceYaTech",
+    icon: <FaXTwitter size="1.5em" />,
+    alt: "twitter",
+  },
+  {
+    href: "https://linkedin.com/company/spaceyatech",
+    icon: <FaLinkedin size="1.5em" />,
+    alt: "linkedIn",
+  },
+  {
+    href: "https://www.youtube.com/@spaceyatech",
+    icon: <FaYoutube size="1.5em" />,
+    alt: "youtube",
+  },
+  {
+    href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
+    icon: <FaSpotify size="1.5em" />,
+    alt: "spotify",
+  },
+];
+
+const footerLinks = [
+  {
+    title: "Company",
+    links: [
+      { to: "/about-us", name: "About Us" },
+      { to: "/community", name: "Community" },
+      { to: "/products", name: "Products" },
+      { to: "/shop", name: "Shop" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { href: "/events", name: "Events" },
+      { href: "http://mentorlst.com", name: "Mentorship" },
+      { href: "/gallery", name: "Gallery" },
+    ],
+  },
+  {
+    title: "Quick Links",
+    links: [
+      { href: "https://x.com/SpaceYaTech", name: "Contact Us" },
+      {
+        href: "https://syt-terms.notion.site/SpaceYaTech-Terms-of-Service-7d84de7a4feb41cc9f86143a9cc572e0",
+        name: "Terms and Conditions",
+      },
+    ],
+  },
+];
+
 function Footer() {
   const now = new Date();
   const year = now.getFullYear();
 
-  const socialLinks = [
-    {
-      href: "https://www.facebook.com/spaceyatech",
-      icon: <FaFacebook size="1.8em" />,
-      alt: "facebook",
-    },
-    {
-      href: "https://www.instagram.com/spaceyatech/",
-      icon: <FaInstagram size="1.8em" />,
-      alt: "instagram",
-    },
-    {
-      href: "https://x.com/SpaceYaTech",
-      icon: <FaXTwitter size="1.8em" />,
-      alt: "twitter",
-    },
-    {
-      href: "https://linkedin.com/company/spaceyatech",
-      icon: <FaLinkedin size="1.8em" />,
-      alt: "linkedIn",
-    },
-    {
-      href: "https://www.youtube.com/@spaceyatech",
-      icon: <FaYoutube size="1.8em" />,
-      alt: "youtube",
-    },
-    {
-      href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
-      icon: <FaSpotify size="1.8em" />,
-      alt: "spotify",
-    },
-  ];
-
-  const footerLinks = [
-    {
-      title: "Company",
-      links: [
-        { to: "/about-us", name: "About Us" },
-        { to: "/community", name: "Community" },
-        { to: "/products", name: "Products" },
-        { to: "/shop", name: "Shop" },
-      ],
-    },
-    {
-      title: "Resources",
-      links: [
-        { href: "/events", name: "Events" },
-        { href: "http://mentorlst.com", name: "Mentorship" },
-        { href: "/gallery", name: "Gallery" },
-      ],
-    },
-    {
-      title: "Quick Links",
-      links: [
-        { href: "https://x.com/SpaceYaTech", name: "Contact Us" },
-        {
-          href: "https://syt-terms.notion.site/SpaceYaTech-Terms-of-Service-7d84de7a4feb41cc9f86143a9cc572e0",
-          name: "Terms and Conditions",
-        },
-      ],
-    },
-  ];
-
   return (
     <footer className="bg-secondary text-white">
       <div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
@@ -122,57 +121,64 @@ function Footer() {
           </div>
 
           {/* Footer links */}
-          {footerLinks.map((section) => (
-            <div key={crypto.randomUUID()} className="flex flex-col gap-8">
-              <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
-                {section.title}
-              </h2>
-              <ul className="flex flex-col gap-5 list-none text-sm font-light">
-                {section.links.map((link) =>
-                  link.href ? (
-                    <li key={crypto.randomUUID()}>
-                      <a
-                        href={link.href}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="hover:underline text-white"
-                      >
-                        {link.name}
-                      </a>
-                    </li>
-                  ) : (
-                    <li key={crypto.randomUUID()}>
-                      <Link to={link.to}>{link.name}</Link>
-                    </li>
-                  )
-                )}
-              </ul>
-            </div>
-          ))}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-12 sm:gap-8">
+            {footerLinks.map((section) => (
+              <div
+                key={crypto.randomUUID()}
+                className="flex flex-col gap-8 text-center lg:text-left"
+              >
+                <h2 className="text-green-footer font-bold sm:text-xl text-lg leading-9">
+                  {section.title}
+                </h2>
+
+                <ul className="flex flex-col gap-5 list-none text-sm font-light">
+                  {section.links.map((link) =>
+                    link.href ? (
+                      <li key={crypto.randomUUID()}>
+                        <a
+                          href={link.href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:underline text-white"
+                        >
+                          {link.name}
+                        </a>
+                      </li>
+                    ) : (
+                      <li key={crypto.randomUUID()}>
+                        <Link to={link.to}>{link.name}</Link>
+                      </li>
+                    )
+                  )}
+                </ul>
+              </div>
+            ))}
+          </div>
 
           {/* Newsletter */}
           <div className="flex-2">
-            <div className="flex flex-col gap-8">
-              <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
+            <div className="flex flex-col md:gap-8">
+              <h2 className="text-green-footer font-bold sm:text-xl text-lg md:leading-9 mx-auto lg:mx-0 text-center lg:text-left">
                 Subscribe to our Newsletter
               </h2>
               <div className="flex flex-col gap-5 text-sm font-light">
-                <p className="text-sm left-6">
+                <p className="text-sm left-6 text-center lg:text-left">
                   Subscribe to our newsletter to get your
-                  <br />
+                  <br className="hidden sm:block" />
                   weekly dose of news, updates, tips and even
-                  <br />
+                  <br className="hidden sm:block" />
                   special offers
                 </p>
-                <form className="flex items-center">
+
+                <form className="flex items-center max-w-md w-full mx-auto">
                   <input
                     type="email"
                     placeholder="Enter email address"
-                    className="w-auto px-2 md:px-4 py-3 rounded-lg rounded-r-none flex-3 outline-none text-black font-medium"
+                    className="w-2/3 sm:w-auto px-2 md:px-4 py-3 rounded-lg rounded-r-none flex-3 outline-none text-black font-medium"
                   />
                   <button
                     type="submit"
-                    className="rounded-r-lg px-2 md:px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border border-transparent hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                    className="rounded-r-lg px-2 md:px-4 py-3 flex-auto font-semibold text-white transition-all duration-200 bg-primary border-none hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                   >
                     Subscribe
                   </button>
@@ -182,7 +188,7 @@ function Footer() {
           </div>
         </div>
         <div className="sm:mt-14 mt-10">
-          <h1 className="text-center text-[#00FFC3] my-4 md:my-8">
+          <h1 className="text-center text-green-footer my-4 md:my-8">
             &copy; {year} SpaceYaTech | All Rights Reserved
           </h1>
         </div>

diff --git a/src/APP/pages/events/sections/EventsSection.jsx b/src/APP/pages/events/sections/EventsSection.jsx
@@ -55,24 +55,24 @@ function EventsSection() {
     : events;
 
   return (
-    <section className="mt-2 py-6 flex flex-col items-center justify-between gap-4">
+    <section className="mt-2 py-6 flex flex-col items-center justify-between gap-4 w-full">
       {/* search events */}
       <form
         onSubmit={handleSubmit}
-        className="flex items-center border sm:w-7/12 mb-3 rounded-xl bg-white overflow-clip"
+        className="flex items-center border w-full justify-between sm:w-7/12 max-w-md mb-3 rounded-xl bg-white overflow-clip relative"
       >
-        <span className="py-3 pl-6">
+        <span className="py-3 pl-4 absolute top-0.5 left-0 hidden sm:block">
           <AiOutlineSearch className="size-5 text-gray-400" />
         </span>
         <input
           type="text"
           placeholder="Search Event"
-          className="md:flex-grow p-3 outline-none text-gray-400"
+          className="flex-grow p-3 sm:pl-12 outline-none text-gray-400 w-4/5 "
           onChange={handleSearch}
         />
         <button
           type="submit"
-          className="bg-gradient-to-b to-primary from-green-dark px-6 py-3 text-white"
+          className="bg-gradient-to-b to-primary from-green-dark px-1.5 sm:px-6 py-3 text-white"
         >
           Search
         </button>

diff --git a/src/APP/pages/events/sections/FeaturedCarousel.jsx b/src/APP/pages/events/sections/FeaturedCarousel.jsx
@@ -16,7 +16,7 @@ export default function FeaturedCarousel() {
   }, [length]);
 
   return (
-    <div className="w-full h-96 md:h-[540px] md:flex overflow-hidden relative">
+    <div className="w-full h-96 md:h-[540px] hidden md:flex overflow-hidden relative">
       <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 bg-black px-3 py-1.5 rounded-full z-10">
         <div className="flex gap-2">
           {Array.from({ length }).map((_, i) => (

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,6 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
-
       fontFamily: {
         spaceGrotesk: ["Space Grotesk", "sans-serif"],
         poppins: ["Poppins", "sans-serif"],
@@ -23,6 +22,7 @@ export default {
           dark: "#00664E",
           light: "#E5EFEC",
           header: "#1F7964",
+          footer: "#00FFC3",
         },
         grey: {
           neutral: "#656767",