feat: configurable section props

deco-sites · Jan 8, 2024 · 8860250 · 8860250
1 parent 4f2e3b0
commit 8860250
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/components/nrf/Faq.tsx b/components/nrf/Faq.tsx
@@ -7,7 +7,7 @@ export interface Props {
 export default function Faq({ questions }: Props) {
   return (
     <section class="bg-black">
-      <div class="flex flex-col gap-10 px-6 md:pb-[120px] pt-[80px] md:px-[7rem] max-w-screen-2xl m-auto">
+      <div class="flex flex-col gap-10 px-6 md:pb-[120px] pt-[120px]  md:px-[7rem] max-w-screen-2xl m-auto">
         <h2 class="text-white text-[48px] leading-[120%] z-10">FAQs</h2>
         <div class="flex flex-col z-10">
           {questions.map((item) => {

diff --git a/sections/NRF/CallToAction.tsx b/sections/NRF/CallToAction.tsx
@@ -21,10 +21,16 @@ export default function CallToAction({ text, cta }: Props) {
             <a
               href={item?.href}
               target={item?.href.includes("http") ? "_blank" : "_self"}
-              class="group relative relative overflow-hidden rounded-full bg-[#02F67C] px-6 py-2 lg:px-8 lg:py-3 text-black transition-all duration-300 ease-out hover:bg-gradient-to-r hover:from-[#02F67C] hover:to-[#06E474] hover:shadow-hero"
+              class={`group relative 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 hover:shadow-hero-reverse"
+                  : "bg-[#02F67C] hover:from-[#02F67C] hover:to-[#06E474] text-black hover:shadow-hero"
+              }`}
             >
               <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"></span>
-              <span class="relative font-medium lg:text-[20px]">{item?.text}</span>
+              <span class="relative font-medium lg:text-[20px]">
+                {item?.text}
+              </span>
             </a>
           ))}
         </div>

diff --git a/sections/NRF/ImageSection.tsx b/sections/NRF/ImageSection.tsx
@@ -13,6 +13,10 @@ export interface Props {
     href?: string;
     text?: string;
   };
+  disableSpacing?: {
+    top?: boolean;
+    bottom?: boolean;
+  };
 }
 
 const PLACEMENT = {
@@ -25,22 +29,27 @@ export default function ImageSection({
   description,
   image,
   placement,
+  disableSpacing,
   cta,
 }: Props) {
   return (
     <div class="bg-black w-full">
       <div
-        class={`flex lg:container lg:max-w-6xl lg:mx-auto py-12 lg:py-28 mx-5 md:mx-10 ${PLACEMENT[placement]} gap-12 md:gap-20 text-left items-center`}
+        class={`flex lg:container lg:max-w-6xl lg:mx-auto mx-5 md:mx-10 ${
+          PLACEMENT[placement]
+        } gap-12 md:gap-20 text-left items-center z-10 ${
+          disableSpacing?.top ? "" : "pt-12 lg:pt-28"
+        } ${disableSpacing?.bottom ? "" : "pb-12 lg:pb-28"}`}
       >
         <img
-          class="w-full lg:w-1/2 object-fit"
+          class="w-full lg:w-1/2 object-fit z-10"
           sizes="(max-width: 640px) 100vw, 30vw"
           src={image}
           alt={image}
           decoding="async"
           loading="lazy"
         />
-        <div class="w-full lg:w-1/2 space-y-2 lg:space-y-4 lg:max-w-xl gap-4">
+        <div class="w-full lg:w-1/2 space-y-2 lg:space-y-4 lg:max-w-xl gap-4 z-10">
           <p class="text-white text-[40px] leading-[110%] font-semibold">
             {title}
           </p>

diff --git a/static/tailwind.css b/static/tailwind.css
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -48,6 +48,7 @@ export default {
       },
       boxShadow: {
         "hero": 'rgb(0, 0, 0) 0px 0px 0px 2px, rgb(6, 228, 116) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px',
+        "hero-reverse": 'rgb(0, 0, 0) 0px 0px 0px 2px, rgb(17, 48, 50) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px',
         "custom-shadow": "0px 4px 60px rgba(0, 0, 0, 0.17)",
         "footer-shadow":
           "0px -6px 8px rgba(255, 255, 255, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.5)",