added my or py styles

src/components/shared/home/home-about.tsx

@@ -27,7 +27,7 @@ export const HomeAbout: FC = () => {
   if (isPending) return <Loader />;
 
   return (
-    <section>
+    <section className="py-20">
       <Container className="flex flex-col gap-6">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
           <div className="flex flex-col gap-6">

src/components/shared/home/home-actions.tsx

@@ -14,8 +14,7 @@ interface Props {
 export const HomeActions: FC<Props> = ({ className }) => {
   const { t } = useTranslation("home");
 
-  const { title, items } = t("buttons", { returnObjects: true }) as {
-    title: string;
+  const { items } = t("buttons", { returnObjects: true }) as {
     items: {
       text: string;
       link?: string;
@@ -25,15 +24,9 @@ export const HomeActions: FC<Props> = ({ className }) => {
     }[];
   };
 
-  console.log(items);
-
   return (
-    <section className={cn("bg-teritary_container py-10", className)}>
+    <section className={cn("", className)}>
       <Container>
-        <h2 className="h2 text-center mb-10 !text-on_teritary_container">
-          {title}
-        </h2>
-
         <div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-6">
           {items.map((item, i) =>
             !item.dropdown ? (

src/components/shared/home/home-hero.tsx

@@ -1,12 +1,9 @@
-import useEmblaCarousel from "embla-carousel-react";
 import { FC } from "react";
 import { useMediaQuery } from "usehooks-ts";
 import { useTranslation } from "react-i18next";
 import { HomeTimer } from "./";
 
 export const HomeHero: FC = () => {
-  const [embalRef] = useEmblaCarousel();
-
   const { t } = useTranslation("home");
 
   const lg = useMediaQuery("(min-width: 1024px)");
@@ -20,8 +17,8 @@ export const HomeHero: FC = () => {
 
   return (
     <div>
-      <section className="flex flex-col gap-5">
-        <div ref={embalRef} className="embla">
+      <section className="flex flex-col gap-5 ">
+        <div className="embla ">
           <div className="embla__container">
             <div className="embla__slide">
               <img
@@ -32,9 +29,11 @@ export const HomeHero: FC = () => {
             </div>
           </div>
         </div>
-      </section>
 
-      <HomeTimer />
+        <div className="relative container">
+          <HomeTimer className="absolute sm:bottom-12 bottom-28 right-5" />
+        </div>
+      </section>
     </div>
   );
 };

src/components/shared/home/home-offers.tsx

@@ -34,7 +34,7 @@ export const HomeOffers: FC = () => {
   }, [emblaApi]);
 
   return (
-    <section className="bg-surface_high py-10 relative overflow-hidden">
+    <section className="bg-surface_high py-10 my-20 relative overflow-hidden">
       <Container>
         <div ref={emblaRef} className="embla ">
           <div className="mb-2 flex gap-6 embla__container">

src/components/shared/home/home-time.tsx

@@ -25,7 +25,7 @@ export const HomeTime: FC<Props> = ({ className }) => {
   if (isPending) return <Loader />;
 
   return (
-    <section className={cn("bg-surface_high pt-10 pb-20", className)}>
+    <section className={cn("bg-surface_high my-20 pt-10 pb-20", className)}>
       <Container>
         <h2 className="h2 mb-6">{times[translate].title}</h2>
 

src/components/shared/timer-item.tsx

@@ -8,22 +8,24 @@ export const TimerItem = ({
   prevValue: string;
 }) => (
   <div className="timer-item flex flex-col items-center">
-    <div className="relative sm:h-14 h-10 w-16 overflow-hidden font-bold">
+    <div className="relative sm:h-14 h-6 w-16 overflow-hidden font-bold">
       <span
-        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text sm:text-5xl text-3xl leading-none transition-all duration-300 ${
+        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text sm:text-5xl text-xl leading-none transition-all duration-300 ${
           prevValue !== value ? " opacity-0" : " opacity-100"
         }`}
       >
         {prevValue}
       </span>
       <span
-        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text  sm:text-5xl text-3xl leading-none transition-all duration-300 ${
+        className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text  sm:text-5xl text-xl leading-none transition-all duration-300 ${
           prevValue !== value ? "opacity-100" : "opacity-0"
         }`}
       >
         {value}
       </span>
     </div>
-    <div className="label normal uppercase sm:text-xl text-base">{label}</div>
+    <div className="label normal sm:text-lg text-base text-[#FAD8DB]">
+      {label}
+    </div>
   </div>
 );