Update testimonials and FAQ style

deco-sites · Aug 21, 2024 · c70411e · c70411e
1 parent 2dc5001
commit c70411e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/components/Home/Testimonials.tsx b/components/Home/Testimonials.tsx
@@ -66,72 +66,63 @@ export default function Testimonials({
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/5ea5f2ce-0a0e-4105-8333-2cbddc6c1c6e",
       name: "Alex Dulub",
-      description:
-        `"It's exciting to see a platform that not only speeds up frontend development but also fosters collaboration between developers and marketing teams. The seamless integration of modern technologies and the focus on both developer power and ease of use are impressive."`,
+      description: `"It's exciting to see a platform that not only speeds up frontend development but also fosters collaboration between developers and marketing teams. The seamless integration of modern technologies and the focus on both developer power and ease of use are impressive."`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/0b4a74da-5050-4641-a128-df3b606bfd05",
       name: "Andres Pradilla",
-      description:
-        `"Wow!!! 🚀 This is a game changer for headless ecommerce! Have seen the product in action and it absolutely rocks! The best news is this product has happy live customers using it day in day out and have seen great value out of the tool!"`,
+      description: `"Wow!!! 🚀 This is a game changer for headless ecommerce! Have seen the product in action and it absolutely rocks! The best news is this product has happy live customers using it day in day out and have seen great value out of the tool!"`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/31035191-0815-4a14-b2a5-559c451a19a3",
       name: "Joep van den Bogaert",
-      description:
-        `"Wow, such an impressive product. Really love how you bring together development and content management. The automatic forms based on the typescript models are awesome."`,
+      description: `"Wow, such an impressive product. Really love how you bring together development and content management. The automatic forms based on the typescript models are awesome."`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/adbf4b08-e54f-4d4a-aecf-94de3974f0e0",
       name: "khaosdoctor",
-      description:
-        `"This is AWESOME! I’ve been looking to find something like this for my pages for ages. The Deno core using TypeScript is the ABSOLUTE BEST mix ever. Loved the work you guys are doing. Hope you continue to disrupt even more!"`,
+      description: `"This is AWESOME! I’ve been looking to find something like this for my pages for ages. The Deno core using TypeScript is the ABSOLUTE BEST mix ever. Loved the work you guys are doing. Hope you continue to disrupt even more!"`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/adbf4b08-e54f-4d4a-aecf-94de3974f0e0",
       name: "p2hari",
-      description:
-        `"oh man, are you folks for real!!! I just checked out the website, git and discord channels (I just joined in) and you are awesome. Open source core and so much more work on git. Bringing partytown to deno etc. etc."`,
+      description: `"oh man, are you folks for real!!! I just checked out the website, git and discord channels (I just joined in) and you are awesome. Open source core and so much more work on git. Bringing partytown to deno etc. etc."`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/adbf4b08-e54f-4d4a-aecf-94de3974f0e0",
       name: "nopro",
-      description:
-        `"This looks amazing, like a modern take on Dreamweaver or something. The low code IDE may soon return! The ability to switch between no-code/code is great for teaching people to code. Dreamweaver (and MySpace profiles) basically taught me CSS."`,
+      description: `"This looks amazing, like a modern take on Dreamweaver or something. The low code IDE may soon return! The ability to switch between no-code/code is great for teaching people to code. Dreamweaver (and MySpace profiles) basically taught me CSS."`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/5b024b3e-d57c-48bc-8818-de33cf4d447a",
       name: "Marco Ferreira",
-      description:
-        `"Man, I don't even know who to tag here hahaha, but I wanted to give my recognition to deco itself! To the folks who founded it and those who keep updating and improving the platform. Excellent work for the client in terms of registration flexibility and simple for the developer!"`,
+      description: `"Man, I don't even know who to tag here hahaha, but I wanted to give my recognition to deco itself! To the folks who founded it and those who keep updating and improving the platform. Excellent work for the client in terms of registration flexibility and simple for the developer!"`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/726cd991-7b37-45a7-b1d2-e1af364ea926",
       name: "Gustavo Vasconcellos",
-      description:
-        `"A round of applause for the team that has significantly improved the usability of the Admin since the last hackathon. Both the section editor and the library are GREAT. Special recognition to whoever had the idea and implemented the change to repo branches in the Admin: Great job! 👏"`,
+      description: `"A round of applause for the team that has significantly improved the usability of the Admin since the last hackathon. Both the section editor and the library are GREAT. Special recognition to whoever had the idea and implemented the change to repo branches in the Admin: Great job! 👏"`,
       href: "#",
     },
     {
       image:
         "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/3c766de4-48a5-46c9-aff4-6edd766c949c",
       name: "Julyanne Taboaço",
-      description:
-        `"I’m sure you will soar even higher; this is just the beginning. Very grateful for this partnership and for believing in you from the very start. And what a partnership! You are tireless in evolving and suggesting improvements, embracing any challenges we face, and always ready to support and grow with us!"`,
+      description: `"I’m sure you will soar even higher; this is just the beginning. Very grateful for this partnership and for believing in you from the very start. And what a partnership! You are tireless in evolving and suggesting improvements, embracing any challenges we face, and always ready to support and grow with us!"`,
       href: "#",
     },
   ],
@@ -147,8 +138,7 @@ export default function Testimonials({
             dangerouslySetInnerHTML={{
               __html: title,
             }}
-          >
-          </h2>
+          ></h2>
         )}
 
         {subtitle && (
@@ -182,7 +172,7 @@ export default function Testimonials({
         />
         <div class="columns-1 md:columns-2 lg:columns-3 gap-4 w-full">
           {testimonials?.map((testimonial) => (
-            <a href={testimonial.href}>
+            <a href={testimonial.href} class="group">
               <div class="bg-[#0B1612] hover:bg-[#243939] p-[1px] rounded-2xl flex-1 mb-4 overflow-hidden">
                 <div class="bg-[#070D0D] h-full flex flex-col justify-between p-8 gap-4 rounded-2xl">
                   <div
@@ -208,14 +198,18 @@ export default function Testimonials({
                         }}
                       />
                     </div>
-                    <Image
-                      width={18}
-                      height={18}
-                      src={"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/50f5e3c5-2b8a-4f4f-a0f9-87fb91d83144"}
-                      alt={"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/50f5e3c5-2b8a-4f4f-a0f9-87fb91d83144"}
-                      decoding="async"
-                      loading="lazy"
-                    />
+                    <div class="w-4 h-4 overflow-hidden">
+                      <Icon
+                        id="Redirect"
+                        size={16}
+                        class="text-white/50 group-hover:translate-x-[1rem] group-hover:translate-y-[-1rem] transistion duration-500"
+                      />
+                      <Icon
+                        id="Redirect"
+                        size={16}
+                        class="text-[#FFFFFF97] translate-x-[-1rem] group-hover:translate-x-[0rem] group-hover:translate-y-[-1rem] transistion duration-500"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -225,13 +219,13 @@ export default function Testimonials({
         <div class="w-full p-12 pt-6 hidden peer-checked:flex lg:hidden">
           <label
             for="collapse-testimonials"
-            class="mx-auto py-2 px-3 font-bold font-[argent-pixel] text-[16px] bg-[#02F67C] text-[#113032] border border-[#113032]"
+            class="cursor-pointer mx-auto py-2 px-3 font-bold font-[argent-pixel] text-[16px] bg-[#02F67C] hover:bg-[#2FD180] text-[#113032] border border-[#113032] transition duration-300"
           >
             {showLessLabel}
           </label>
         </div>
         <div
-          class="w-[var(--w)] pb-12 flex absolute bottom-0 mb-14 peer-checked:hidden lg:hidden"
+          class="group w-[var(--w)] pb-12 flex absolute bottom-0 mb-14 peer-checked:hidden lg:hidden"
           style={{
             background:
               "linear-gradient(180deg, rgba(255,255,255,0) 0%, #030806 85%)",
@@ -240,7 +234,7 @@ export default function Testimonials({
         >
           <label
             for="collapse-testimonials"
-            class="mx-auto py-2 px-3 font-bold font-[argent-pixel] text-[16px] bg-[#02F67C] text-[#113032] border border-[#113032]"
+            class="cursor-pointer mx-auto py-2 px-3 font-bold font-[argent-pixel] text-[16px] bg-[#02F67C] hover:bg-[#2FD180] text-[#113032] border border-[#113032] transition duration-300"
           >
             {showMoreLabel}
           </label>

diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
@@ -73,6 +73,7 @@ export type AvailableIcons =
   | "plus-rounded"
   | "Post"
   | "QuestionMarkCircle"
+  | "Redirect"
   | "Return"
   | "Sale"
   | "Share"

diff --git a/sections/Home/FAQ.tsx b/sections/Home/FAQ.tsx
@@ -10,7 +10,7 @@ export interface Question {
 
 export function FaqItem({ question, answer }: Question) {
   return (
-    <details class="home-faq bg-[#0D1717] hover:bg-[#142020] border-[#272D2D] border rounded-2xl open:mb-2 transition ease-in-out duration-300">
+    <details class="home-faq bg-[#070D0D] border-[#0B1612] hover:border-[#12241e] border rounded-2xl open:mb-2 transition ease-in-out duration-300">
       <summary class="rounded-2xl flex flex-row justify-between items-center px-[24px] py-[22.5px] gap-[16px] group cursor-pointer ">
         <p class="font-bold text-[18px] leading-[27px] text-white">
           {question}

diff --git a/static/sprites.svg b/static/sprites.svg