Feat revamp pages

app/Resources/css/about/about.css

@@ -1,5 +1,6 @@
 @import '/assets/styles/app.css';
 @import '../home/header.css';
+@import '../contact/faq.section.css';
 
 body {
   background-color: hsl(var(--background) / 0.6);
@@ -83,3 +84,25 @@ body {
 .new-white{
   background-color: rgba(255, 255, 255, 0.9);
 }
+
+.bg-contact {
+  background: linear-gradient(
+    135deg,
+    hsl(176, 43%, 45%) 0%,
+    hsl(176, 43%, 47%) 40%,
+    hsl(176, 43%, 53%) 60%,
+    hsl(176, 43%, 55%) 100%
+  );
+}
+
+.link-contact:hover{
+  background: linear-gradient(
+    135deg,
+    rgb(215 217 221) 0%,
+    rgb(222 224 229) 25%,
+    rgb(229 231 235) 50%,
+    rgb(236 238 242) 75%,
+    rgb(242 244 248) 100%
+  );
+  opacity: 0.9;
+}

app/Resources/css/components/blog.css

@@ -64,10 +64,6 @@
   color: hsl(var(--information-theme));
 }
 
-.container-wrapper-card-feature {
-  gap: 2rem;
-}
-
 .article-feature {
   background-color: hsl(var(--article-theme) / 0.02);
 }

app/Resources/css/contact/contact.css

@@ -1,5 +1,7 @@
 @import '/assets/styles/app.css';
 @import '../home/header.css';
+@import './faq.section.css';
+@import './form.section.css';
 
 body {
   background-color: hsl(var(--background) / 0.6);
@@ -10,25 +12,6 @@ body {
   border-color: hsl(var(--border-theme) / 0.3);
 }
 
-
-.bg-contact {
-  background: linear-gradient(
-    135deg,
-    hsl(176, 43%, 45%) 0%,
-    hsl(176, 43%, 47%) 40%,
-    hsl(176, 43%, 53%) 60%,
-    hsl(176, 43%, 55%) 100%
-  );
-  color: #F5F5F5;
-  border-bottom: 8px solid transparent;
-  border-image: repeating-linear-gradient(
-    to right,
-    #fafafa 0 10px,
-    transparent 10px 20px
-  );
-  border-image-slice: 1;
-}
-
 .banner{
   background: linear-gradient(
     135deg,
@@ -39,32 +22,6 @@ body {
   );
 }
 
-@media (min-width: 768px) {
-  .bg-contact{
-      border-bottom: 0px;
-      border-right: 8px solid transparent;
-      border-image: repeating-linear-gradient(
-        to bottom,
-        #fafafa 0 10px,
-        transparent 10px 20px
-      );
-      border-image-slice: 1;
-  }
-}
-
-.faq-text{
-  height: 0;
-  opacity: 0;
-  border-top-width: 1px;
-}
-
-.faq-text.show{
-  height: auto;
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  opacity: 1;
-}
-
 @media (min-width: 1536px) {
 
   .faq-container{

app/Resources/css/contact/faq.section.css

@@ -0,0 +1,12 @@
+.faq-text {
+  height: 0;
+  opacity: 0;
+  border-top-width: 1px;
+}
+
+.faq-text.show {
+  height: auto;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  opacity: 1;
+}

app/Resources/css/contact/form.section.css

@@ -0,0 +1,31 @@
+.bg-contact {
+  background: linear-gradient(
+    135deg,
+    hsl(176, 43%, 45%) 0%,
+    hsl(176, 43%, 47%) 40%,
+    hsl(176, 43%, 53%) 60%,
+    hsl(176, 43%, 55%) 100%
+  );
+
+  color: #f5f5f5;
+  border-bottom: 8px solid transparent;
+  border-image: repeating-linear-gradient(
+    to right,
+    #fafafa 0 10px,
+    transparent 10px 20px
+  );
+  border-image-slice: 1;
+}
+
+@media (min-width: 768px) {
+  .bg-contact {
+    border-bottom: 0px;
+    border-right: 8px solid transparent;
+    border-image: repeating-linear-gradient(
+      to bottom,
+      #fafafa 0 10px,
+      transparent 10px 20px
+    );
+    border-image-slice: 1;
+  }
+}

app/Resources/css/home/home.css

@@ -1,6 +1,7 @@
 @import '/assets/styles/app.css';
 @import 'header.css';
 @import '../components/blog.css';
+@import '../contact/faq.section.css';
 
 #bodyWrapper {
   background-color: hsl(var(--background) / 0.6);
@@ -33,46 +34,69 @@
 
 .blog-navigation {
   border-radius: 2em;
-  /* min-width: 180px; */
   text-align: center;
-  color: hsl(var(--secondary-theme));
+  color: hsl(var(--primary-theme));
 }
 
 .blog-navigation.active {
-  background-color: hsl(var(--border-theme) / 0.3);
+  background-color: hsl(var(--primary-theme));
+  color: white;
+  font-weight: 500;
+  scale: 1.1;
 }
 
 .carousel-item {
-  flex: 0 0 33.33% !important; /* 3 items per row on small screens */
+  flex: 0 0 33.33% !important;
   max-width: 33.33% !important;
 }
 
 @media (min-width: 640px) {
   .carousel-item {
-    flex: 0 0 25% !important; /* 4 items per row on tablets */
+    flex: 0 0 25% !important; 
     max-width: 25% !important;
   }
 }
 
 @media (min-width: 1024px) {
   .carousel-item {
-    flex: 0 0 20% !important; /* 5 items per row on desktops */
+    flex: 0 0 20% !important;
     max-width: 20% !important;
   }
 }
 
 @keyframes fadeSlideIn {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(50px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
+.featureCard-animate {
+  animation: fadeSlideIn 0.3s ease-out;
+}
+
+.bg-contact {
+  background: linear-gradient(
+    135deg,
+    hsl(176, 43%, 45%) 0%,
+    hsl(176, 43%, 47%) 40%,
+    hsl(176, 43%, 53%) 60%,
+    hsl(176, 43%, 55%) 100%
+  );
+}
 
-.featureCard-animate{
-  animation: fadeSlideIn 0.5s ease-out;
+.link-contact:hover{
+  background: linear-gradient(
+    135deg,
+    rgb(215 217 221) 0%,
+    rgb(222 224 229) 25%,
+    rgb(229 231 235) 50%,
+    rgb(236 238 242) 75%,
+    rgb(242 244 248) 100%
+  );
+  opacity: 0.9;
 }

app/Resources/js/about/about.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Popup } from '../dashboard/components/Popup';
 import { MobileHeader } from '../home/component/MobileHeader';
+import FAQAction from '../contact/action/FAQAction';
+
 class About {
   constructor() {
     this.init();
@@ -12,6 +14,7 @@ class About {
       isFilter: false,
       popUpdata: <MobileHeader />,
     });
+    FAQAction();
   }
 }
 

app/Resources/js/contact/action/ContactFormAction.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { toast } from 'sonner';
+const ContactFormAction = () => {
+  const form = document.getElementById('google-form') as HTMLFormElement;
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(form);
+
+    try {
+      fetch(form.action, {
+        method: 'POST',
+        mode: 'no-cors',
+        body: formData,
+      });
+
+      toast.success('Success: Form Submit', {
+        description: (
+          <p className="text-sm font-semibold text-green-900">
+            Thank you! We& apos;ll be in touch soon.
+          </p>
+        ),
+      });
+
+      form.reset();
+    } catch (error) {
+      toast.error('Error: Form Submit', {
+        description: (
+          <div>
+            <p className="text-red-900"> Cannot submit form at the moment.</p>
+            <p> {`${error}`} </p>
+          </div>
+        ),
+      });
+    }
+  });
+};
+
+export default ContactFormAction;

app/Resources/js/contact/action/FAQAction.ts

@@ -0,0 +1,28 @@
+const FAQAction = () => {
+  const faqWrapper = document.getElementById(
+    'faq-row-wrapper',
+  ) as HTMLElement;
+
+  faqWrapper.addEventListener('click', (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    const btnTarget = target.closest('button');
+
+    if (!btnTarget) {
+      return;
+    }
+
+    const targetP = btnTarget.parentElement
+      ?.nextElementSibling as HTMLElement;
+
+    if (!targetP) {
+      return;
+    }
+
+    target.classList.toggle('icon-chevron-down');
+    target.classList.toggle('icon-chevron-up');
+    targetP.classList.toggle('show');
+  });
+}
+
+export default FAQAction;
+