Merge branch 'feat/stats' into 'main'

Feat/stats

See merge request onegeo-suite/libs/gatsby-theme-onegeo!26

src/components/News.tsx

@@ -78,7 +78,7 @@ const News = (props: INews) => {
             size: size,
             anime: anime || options.anime,
             options: options.card,
-            layout: options.card.layout,
+            layout: options.card?.layout,
         }
     })
 

src/components/Stats.tsx

@@ -44,10 +44,10 @@ const Stats = (props: Props) => {
     const oClass = options.class || {}
 
     return (
-        <div className={twMerge("mx-auto py-24", oClass.main)}>
+        <div className={twMerge("bg-primary w-full py-24", oClass.main)}>
             <h3
                 className={twMerge(
-                    "mt-3 text-xl",
+                    "text-base-100 mt-3 flex justify-center text-center text-4xl md:text-6xl",
                     oClass.title,
                     oClass.titleStats // Deprecated
                 )}
@@ -56,7 +56,7 @@ const Stats = (props: Props) => {
             </h3>
             <div
                 className={twMerge(
-                    "stats my-3 shadow",
+                    "stats mx-auto my-3 flex max-w-3xl flex-col justify-center overflow-hidden border-none bg-transparent pt-10 shadow-none md:flex-row md:justify-between",
                     className,
                     oClass.stats
                 )}
@@ -65,7 +65,7 @@ const Stats = (props: Props) => {
                     <div
                         key={stat.id}
                         className={twMerge(
-                            "stat w-64 place-items-center",
+                            "stat md:border-base-100 w-full place-items-center justify-center md:place-items-center",
                             oClass.stat,
                             oClass.containtStats // Deprecated
                         )}
@@ -83,12 +83,17 @@ const Stats = (props: Props) => {
                         ) : (
                             <></>
                         )}
-                        <div className={twMerge("stat-title", oClass.name)}>
+                        <div
+                            className={twMerge(
+                                "stat-title text-base-100 text-2xl",
+                                oClass.name
+                            )}
+                        >
                             {stat.name}
                         </div>
                         <div
                             className={twMerge(
-                                "stat-value",
+                                "stat-value text-base-100 text-6xl",
                                 valueColor,
                                 oClass.value
                             )}