fix: responsive footer

fix: responsive footer

Author: vickyadrii

src/components/common/footer/Footer.tsx

@@ -11,13 +11,13 @@ const Footer = () => {
     <>
       <div className="space-y-8 border-t border-dashed">
         <div className="max-w-7xl mx-auto px-5 py-10">
-          <div className="flex justify-between items-start gap-10">
+          <div className="flex md:flex-row flex-col justify-between md:items-start items-center gap-10">
             <Image src="/assets/icons/ic_hmc-full.svg" alt="hammercode-logo" width={100} height={100} />
 
             {/* Resources */}
-            <div className="space-y-3">
+            <div className="flex flex-col md:items-start items-center gap-3">
               <h3 className="text-lg text-hmc-primary font-semibold">{resource.title}</h3>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col md:items-start items-center gap-1">
                 {resource.data.map((data) => (
                   <Link
                     key={data.navigate_url}
@@ -31,9 +31,9 @@ const Footer = () => {
             </div>
 
             {/* Social Media */}
-            <div className="space-y-3">
+            <div className="flex flex-col md:items-start items-center gap-3">
               <h3 className="text-lg text-hmc-primary font-semibold">{social_media.title}</h3>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col md:items-start items-center gap-1">
                 {social_media.data.map((data) => (
                   <Link
                     key={data.navigate_url}
@@ -47,9 +47,9 @@ const Footer = () => {
             </div>
 
             {/* Contact */}
-            <div className="space-y-3">
+            <div className="flex flex-col md:items-start items-center gap-3">
               <h3 className="text-lg text-hmc-primary font-semibold">{contact.title}</h3>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col md:items-start items-center gap-1">
                 {contact.data.map((data) => (
                   <Button
                     key={data.navigate_url}

src/components/common/footer/constants.ts

@@ -39,7 +39,7 @@ export const dataFooter: FooterType = {
     title: "Contact",
     data: [
       {
-        value: "6281355893352",
+        value: "081355893352",
         navigate_url: "https://wa.me/6281355893352",
       },
       {

src/components/common/navbar/index.tsx

@@ -10,7 +10,7 @@ const Navbar = () => {
   const t = useTranslations("Layout");
   return (
     <header className="border-b fixed w-full top-0 bg-white dark:bg-slate-950 z-50">
-      <div className="max-w-7xl mx-auto p-5">
+      <div className="container py-5">
         <div className="flex items-center justify-between gap-4">
           <Link href="/">
             <div className="w-10 h-8 bg-[url('/assets/icons/ic_hmc-light.svg')] dark:bg-[url('/assets/icons/ic_hmc-dark.svg')] bg-cover bg-center"></div>

src/features/home/components/AboutSection.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 
 const AboutSection = () => {
   return (
-    <div className="max-w-7xl mx-auto px-5 lg:py-40 py-10">
+    <div className="container lg:py-40 py-10">
       <div className="flex lg:flex-row flex-col-reverse lg:gap-16 gap-10">
         <div className="basis-1/2 relative">
           <Image

src/features/home/components/ContactSection.tsx

@@ -4,7 +4,7 @@ import { Link } from "@/lib/navigation";
 
 const ContactSection = () => {
   return (
-    <div className="max-w-7xl mx-auto px-5 py-10">
+    <div className="container py-10">
       <div className="flex flex-col items-center md:gap-8 gap-6">
         <div className="flex flex-col items-center gap-2">
           <h2 className="text-tertiary md:text-3xl text-2xl text-center font-bold">

src/features/home/components/CourseSection.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 const ClassSection = () => {
   return (
     <div className="bg-sky-50 dark:bg-slate-900">
-      <div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10 space-y-6">
+      <div className="container md:py-14 py-10 my-10 space-y-6">
         <div className="flex flex-col items-center gap-2">
           <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Kelas Hammercode 🔥</h2>
           <p className="max-w-3xl md:text-base text-center text-sm text-slate-500 dark:text-slate-400 md:leading-7">

src/features/home/components/HeroSection.tsx

@@ -8,11 +8,11 @@ import { HandCoins } from "lucide-react";
 const HeroSection = () => {
   const t = useTranslations("HomePage");
   return (
-    <div className="max-w-7xl mx-auto px-5 py-32 flex lg:flex-row flex-col items-center gap-6 justify-between">
-      <div className="basis-1/2">
+    <div className="container py-32 flex lg:flex-row flex-col items-center gap-6 justify-between">
+      <div className="basis-[50%]">
         <div className="space-y-4">
-          <div className="space-y-1">
-            <h1 className="text-hmc-primary md:text-5xl text-3xl font-bold md:leading-[60px]">
+          <div className="space-y-1.5">
+            <h1 className="text-hmc-primary md:text-[44px] text-3xl font-bold md:leading-[60px]">
               {t("section-hero.title")}
             </h1>
             <p className="text-slate-600 dark:text-slate-400">{t("section-hero.description")}</p>
@@ -46,7 +46,7 @@ const HeroSection = () => {
         </div>
       </div>
 
-      <div className="basis-1/2">
+      <div className="basis-[50%]">
         <Image src="/assets/images/illustrations/hero-section.webp" alt="hero-section" width={1500} height={1500} />
       </div>
     </div>

src/features/home/components/PartnerSection.tsx

@@ -7,7 +7,7 @@ const PartnerSection = () => {
   const t = useTranslations("HomePage");
   return (
     <div className="bg-sky-50 dark:bg-slate-900">
-      <div className="max-w-7xl mx-auto px-5 md:py-14 py-10 my-10 space-y-8">
+      <div className="container md:py-14 py-10 my-10 space-y-8">
         <div className="flex flex-col items-center gap-2">
           <h2 className="text-tertiary md:text-3xl text-2xl font-bold">{t("section-partner.title")}</h2>
           <p className="md:text-base text-sm text-slate-500 dark:text-slate-400 md:text-center">

src/features/home/components/ProgramSection.tsx

@@ -5,7 +5,7 @@ import { programData } from "../constants";
 
 const ProgramSection = () => {
   return (
-    <div className="max-w-7xl mx-auto px-5 py-10 space-y-8">
+    <div className="container py-10 space-y-8">
       <div className="flex flex-col gap-4">
         <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Program Hammercode ✨</h2>
         <p className="max-w-3xl md:text-base text-sm text-slate-500 dark:text-slate-400 md:leading-7">

src/features/home/components/TestimonialSection.tsx

@@ -6,7 +6,7 @@ import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carouse
 
 const TestimonialSection = () => {
   return (
-    <div className="max-w-7xl mx-auto px-5 py-10 space-y-8">
+    <div className="container py-10 space-y-8">
       <div className="flex flex-col space-y-2">
         <h2 className="text-tertiary md:text-3xl text-2xl font-bold">Manfaat 🌟</h2>
         <p className="md:text-base text-sm text-slate-500 dark:text-slate-400">