style(layout): adjust padding in layout and footer components for better spacing and consistency

refactor(workout-builder): simplify workout stepper footer by removing unused elements and improving layout structure

app/[locale]/layout.tsx

@@ -158,7 +158,7 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
             {/* Main Card Container */}
             <div className="card w-full max-w-3xl min-h-[500px] max-h-[90vh] h-[80vh] bg-white dark:bg-[#232324] shadow-xl border border-base-200 dark:border-gray-800 flex flex-col justify-between overflow-hidden max-sm:rounded-none max-sm:h-full">
               <Header />
-              <div className="flex-1 overflow-auto px-2 sm:px-6 pb-6 flex flex-col">{children}</div>
+              <div className="flex-1 overflow-auto px-2 sm:px-6 flex flex-col">{children}</div>
               <Footer />
             </div>
 

src/features/layout/Footer.tsx

@@ -32,7 +32,7 @@ export const Footer = async () => {
   const t = await getI18n();
 
   return (
-    <footer className="border-t border-base-300 dark:border-gray-800 bg-base-100 dark:bg-black px-6 py-4 rounded-b-lg">
+    <footer className="border-t border-base-300 dark:border-gray-800 bg-base-100 dark:bg-black px-2 sm:px-6 py-4 rounded-b-lg">
       <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
         {/* Social Icons */}
         <div className="flex gap-2">
@@ -51,10 +51,10 @@ export const Footer = async () => {
         </div>
 
         {/* Navigation Links */}
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-center text-gray-700 dark:text-gray-300">
+        <div className="flex sm:flex-row gap-2 sm:gap-4 text-center text-gray-700 dark:text-gray-300">
           {NAVIGATION(t).map(({ name, href }) => (
             <Link
-              className="hover:underline hover:text-blue-500 dark:hover:text-blue-400"
+              className="hover:underline hover:text-blue-500 dark:hover:text-blue-400 text-xs sm:text-sm"
               href={href}
               key={name}
               size="sm"

src/features/workout-builder/ui/workout-stepper-footer.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ArrowLeft, ArrowRight, CheckCircle, Zap } from "lucide-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
 import { useI18n } from "locales/client";
 import { Button } from "@/components/ui/button";
@@ -26,35 +26,16 @@ export function WorkoutBuilderFooter({
   const isFinalStep = currentStep === totalSteps;
 
   return (
-    <div className="w-full">
+    <div className="w-full sticky bottom-0 z-10">
       {/* Mobile layout - vertical stack */}
-      <div className="flex flex-col gap-4 md:hidden">
+      <div className="flex flex-col gap-4 ">
         {/* Center stats on top for mobile */}
-        <div className="flex items-center justify-center">
-          <div className="flex items-center gap-4 bg-white dark:bg-slate-800 px-4 py-2 rounded-full dark:border-slate-700 shadow-sm">
-            {currentStep === 1 && (
-              <div className="flex items-center gap-2 text-sm">
-                <Zap className="h-4 w-4 text-emerald-500" />
-                <span className="font-medium text-slate-700 dark:text-slate-300">
-                  {t("workout_builder.stats.equipment_selected", { count: selectedEquipment.length })}
-                </span>
-              </div>
-            )}
-            {currentStep === 2 && (
-              <div className="flex items-center gap-2 text-sm">
-                <CheckCircle className="h-4 w-4 text-blue-500" />
-                <span className="font-medium text-slate-700 dark:text-slate-300">
-                  {t("workout_builder.stats.muscle_selected", { count: selectedMuscles.length })}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
+        <div className="flex items-center justify-center"></div>
 
         {/* Navigation buttons */}
-        <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center justify-between gap-3 bg-white w-full rounded-sm p-2">
           {/* Previous button */}
-          <Button className="flex-1" disabled={isFirstStep} onClick={onPrevious} size="default" variant="ghost">
+          <Button className="flex-1 rounded-full" disabled={isFirstStep} onClick={onPrevious} size="default" variant="ghost">
             <div className="flex items-center gap-2">
               <ArrowLeft className="h-4 w-4" />
               <span className="font-medium">{t("workout_builder.navigation.previous")}</span>
@@ -63,7 +44,7 @@ export function WorkoutBuilderFooter({
 
           {/* Next/Complete button */}
           <Button
-            className="flex-1"
+            className="flex-1 rounded-full"
             disabled={!canContinue}
             onClick={isFinalStep ? () => console.log("Complete workout!") : onNext}
             size="default"
@@ -73,52 +54,13 @@ export function WorkoutBuilderFooter({
               <span className="font-semibold">
                 {isFinalStep ? t("workout_builder.navigation.complete") : t("workout_builder.navigation.continue")}
               </span>
-              {!isFinalStep && <ArrowRight className="h-4 w-4" />}
-              {isFinalStep && <CheckCircle className="h-4 w-4" />}
+              <ArrowRight className="h-4 w-4" />
             </div>
           </Button>
         </div>
       </div>
 
       {/* Desktop layout - horizontal */}
-      <div className="hidden md:flex items-center justify-between">
-        {/* Previous button */}
-        <Button disabled={isFirstStep} onClick={onPrevious} size="large" variant="ghost">
-          <div className="flex items-center gap-2">
-            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
-            <span className="font-medium">{t("workout_builder.navigation.previous")}</span>
-          </div>
-        </Button>
-
-        {/* Center stats */}
-        <div className="flex items-center gap-4 bg-white dark:bg-slate-800 px-6 py-3 rounded-full dark:border-slate-700 shadow-sm">
-          {currentStep === 1 && (
-            <div className="flex items-center gap-2 text-sm">
-              <Zap className="h-4 w-4 text-emerald-500" />
-              <span className="font-medium text-slate-700 dark:text-slate-300">
-                {t("workout_builder.stats.equipment_selected", { count: selectedEquipment.length })}
-              </span>
-            </div>
-          )}
-          {currentStep === 2 && (
-            <div className="flex items-center gap-2 text-sm">
-              <CheckCircle className="h-4 w-4 text-blue-500" />
-              <span className="font-medium text-slate-700 dark:text-slate-300">
-                {t("workout_builder.stats.muscle_selected", { count: selectedMuscles.length })}
-              </span>
-            </div>
-          )}
-          {/* Next step */}
-        </div>
-        {currentStep !== 3 && (
-          <Button disabled={!canContinue} onClick={onNext} size="large" variant="default">
-            <div className="flex items-center gap-2">
-              <span className="font-medium">{t("commons.next")}</span>
-              <ArrowRight className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
-            </div>
-          </Button>
-        )}
-      </div>
     </div>
   );
 }

src/features/workout-builder/ui/workout-stepper.tsx

@@ -210,7 +210,7 @@ export function WorkoutStepper() {
     <div className="w-full max-w-6xl mx-auto">
       <StepperHeader steps={steps} />
 
-      <div className="min-h-[400px] mb-8">{renderStepContent()}</div>
+      <div className="">{renderStepContent()}</div>
 
       <WorkoutBuilderFooter
         canContinue={canContinue}