fix: use deco image component

deco-sites · Jan 22, 2024 · c4bd99d · c4bd99d
1 parent 12794e4
commit c4bd99d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/sections/Content/CallToAction.tsx b/sections/Content/CallToAction.tsx
@@ -26,8 +26,8 @@ export default function CallToAction({ text, cta }: Props) {
               target={item?.href.includes("http") ? "_blank" : "_self"}
               class={`group relative overflow-hidden rounded-full hover:bg-gradient-to-r px-6 py-2 lg:px-8 lg:py-3 transition-all duration-300 ease-out ${
                 item.variant === "Reverse"
-                  ? "bg-[#113032] hover:from-[#113032] hover:to-[#0A1F1F] text-white"
-                  : "bg-[#02F67C] hover:from-[#02F67C] hover:to-[#06E474] text-black"
+                  ? "bg-secondary text-white"
+                  : "bg-accent text-black"
               }`}
             >
               <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 group-hover:-translate-x-40">

diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx
@@ -1,4 +1,5 @@
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 export interface CTA {
   id?: string;
@@ -41,7 +42,8 @@ export default function HeroFlats({
           } lg:py-36 gap-12 md:gap-20 items-center`}
         >
           {image && (
-            <img
+            <Image
+              width={640}
               class="w-full lg:w-1/2 object-fit"
               sizes="(max-width: 640px) 100vw, 30vw"
               src={image}
@@ -76,8 +78,8 @@ export default function HeroFlats({
                   target={item?.href.includes("http") ? "_blank" : "_self"}
                   class={`group relative overflow-hidden rounded-full hover:bg-gradient-to-r px-6 py-2 lg:px-8 lg:py-3 transition-all duration-300 ease-out ${
                     item.variant === "Reverse"
-                      ? "bg-[#113032] hover:from-[#113032] hover:to-[#0A1F1F] text-white"
-                      : "bg-[#02F67C] hover:from-[#02F67C] hover:to-[#06E474] text-black"
+                      ? "bg-secondary text-white"
+                      : "bg-accent text-black"
                   }`}
                 >
                   <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 group-hover:-translate-x-40">

diff --git a/sections/Content/ImageSection.tsx b/sections/Content/ImageSection.tsx
@@ -1,5 +1,6 @@
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import Icon from "$store/components/ui/Icon.tsx";
+import Image from "apps/website/components/Image.tsx";
 
 export interface Props {
   title: string;
@@ -41,7 +42,8 @@ export default function ImageSection({
           disableSpacing?.top ? "" : "pt-12 lg:pt-28"
         } ${disableSpacing?.bottom ? "" : "pb-12 lg:pb-28"}`}
       >
-        <img
+        <Image
+          width={640}
           class="w-full lg:w-1/2 object-fit z-10"
           sizes="(max-width: 640px) 100vw, 30vw"
           src={image}
@@ -58,7 +60,7 @@ export default function ImageSection({
           </p>
           {cta?.href && cta?.text && (
             <a
-              class="pt-4 flex gap-2 border-none text-[#113032] transition-colors duration-200 cursor-pointer"
+              class="pt-4 flex gap-2 border-none text-secondary transition-colors duration-200 cursor-pointer"
               href={cta.href}
             >
               <span>{cta.text}</span>
@@ -67,7 +69,7 @@ export default function ImageSection({
                 width={24}
                 height={24}
                 strokeWidth={"2"}
-                class="text-[#113032]"
+                class="text-secondary"
               />
             </a>
           )}

diff --git a/sections/Images/ImageGallery.tsx b/sections/Images/ImageGallery.tsx
@@ -1,4 +1,5 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
+import Image from "apps/website/components/Image.tsx";
 import Header from "$store/components/ui/SectionHeader.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 
@@ -153,7 +154,8 @@ function Banner(
           media="(min-width: 768px)"
           src={srcDesktop || srcMobile}
         />
-        <img
+        <Image
+          width={640}
           class="w-full h-full object-cover"
           src={srcMobile}
           alt={alt}