Feat/newsletter

components/Accordion.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+interface AccordionItem {
+  question: string;
+  answer: string;
+  id: number;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+}
+
+const Accordion: React.FC<AccordionProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const router = useRouter();
+
+  const handleToggle = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  useEffect(() => {
+    const hash = router.asPath.split('#')[1];
+    if (hash) {
+      const id = parseInt(hash, 10);
+      const index = items.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        setActiveIndex(index);
+
+        setTimeout(() => {
+          const element = document.getElementById(hash);
+          if (element) {
+            const navbarHeight = 150;
+            const offset = element.offsetTop - navbarHeight;
+            window.scrollTo({ top: offset, behavior: 'smooth' });
+          }
+        }, 0);
+      }
+    }
+  }, [items, router.asPath]);
+
+  const handleLinkClick = (id: number) => {
+    const index = items.findIndex((item) => item.id === id);
+    setActiveIndex(index);
+
+    const newUrl = `#${id}`;
+    router.push(newUrl, undefined, { shallow: true });
+  };
+
+  return (
+    <div>
+      {items.map((item, index) => (
+        <div
+          key={item.id || index}
+          className={`overflow-hidden transition-max-height border-t-2 ${
+            activeIndex === index ? 'max-h-96' : 'max-h-20'
+          } ${index === items.length - 1 ? 'border-b-2' : ''}`}
+        >
+          <div className='flex justify-between items-center p-4 cursor-pointer'>
+            <div className='text-[20px]'>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleLinkClick(item.id);
+                }}
+              >
+                {item.question}
+              </a>
+            </div>
+            <div
+              className={`transform transition-transform text-[20px] ${
+                activeIndex === index ? 'rotate-45' : ''
+              }`}
+              onClick={() => handleToggle(index)}
+            >
+              &#43;
+            </div>
+          </div>
+          {activeIndex === index && (
+            <div
+              id={`${item.id}`}
+              className='p-2 text-gray-500 dark:text-slate-200'
+            >
+              {item.answer}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;

components/CarbonsAds.tsx

@@ -1,17 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 
-declare global {
-  interface Window {
-    _carbonads: {
-      refresh: () => void;
-      reload: (where: string, force_serve: boolean) => void;
-      remove: (el: HTMLElement) => void;
-      srv: () => void;
-    };
-  }
-}
-
 type Props = {
   className?: string;
   variant?: 'sidebar';
@@ -22,41 +11,28 @@ function CarbonAds({ className, variant = 'sidebar' }: Props) {
   const router = useRouter();
 
   useEffect(() => {
-    const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
-    if (!mobileMediaQuery.matches) {
-      const hasCarbonAds = document.querySelector('#carbonads');
-      // Check if another ad is present to refresh
-      if (hasCarbonAds) {
-        window._carbonads.refresh();
-        return;
-      } else {
-        // Check if the script is present (ad is not yet present) so that duplicate requests are not made to carbon ads
-        const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
-        if (!hasCarbonAdsScript) {
-          const carbonAdsScript = document.createElement('script');
-          carbonAdsScript.id = '_carbonads_js';
-          carbonAdsScript.type = 'text/javascript';
-          carbonAdsScript.async = true;
-          document
-            .querySelector('#carbonads-container')
-            ?.appendChild(carbonAdsScript);
-          carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
-        }
-      }
+    const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
+    if (!hasCarbonAdsScript) {
+      const carbonAdsScript = document.createElement('script');
+      carbonAdsScript.id = '_carbonads_js';
+      carbonAdsScript.type = 'text/javascript';
+      carbonAdsScript.async = true;
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsScript);
+      carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
+    }
 
-      const existingStyleSheet = document.querySelector('#_carbonads_css');
-      if (existingStyleSheet) {
-        existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-      } else {
-        const carbonAdsStyleSheet = document.createElement('style');
-        carbonAdsStyleSheet.id = '_carbonads_css';
-        carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-        document
-          .querySelector('#carbonads-container')
-          ?.appendChild(carbonAdsStyleSheet);
-      }
+    const existingStyleSheet = document.querySelector('#_carbonads_css');
+    if (existingStyleSheet) {
+      existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
     } else {
-      (carbonRef.current as HTMLElement).style.display = 'none';
+      const carbonAdsStyleSheet = document.createElement('style');
+      carbonAdsStyleSheet.id = '_carbonads_css';
+      carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsStyleSheet);
     }
   }, [router.asPath]);
 
@@ -115,12 +91,6 @@ CarbonAds.stylesheet = {
       margin-top: 4px;
       color: rgb(100 116 139);
     }
-
-    @media (max-width: 1023px) {
-      #carbonads-container {
-        display: none;
-      }
-    }
   `,
 };
 

components/Card.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Link from 'next/link';
+import TextTruncate from 'react-text-truncate';
+interface CardProps {
+  title: string;
+  body: string;
+  icon?: string;
+  link?: string;
+  image?: string;
+  headerSize?: 'small' | 'medium' | 'large';
+  bodyTextSize?: 'small' | 'medium' | 'large';
+}
+
+const CardBody = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  headerSize,
+  bodyTextSize,
+}: CardProps) => {
+  const headerSizeClasses: Record<string, string> = {
+    small: 'text-[0.9rem]',
+    medium: 'text-[1.3rem]',
+    large: 'text-[2rem]',
+  };
+  const bodyTextSizeClasses: Record<string, string> = {
+    small: 'text-[0.85rem]',
+    medium: 'text-[1rem]',
+    large: 'text-[1.5rem]',
+  };
+  return (
+    <div className='group relative h-full w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl transition-colors delay-[150ms] ease-in-out hover:bg-slate-100'>
+      <div className='flex justify-center '>
+        {image && <img src={image} className='h-32 p-2' />}
+      </div>
+      <div className='flex flex-row items-start mb-6'>
+        {icon && (
+          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900'>
+            <img src={icon} alt={title} className='h-full w-full' />
+          </span>
+        )}
+        <p
+          className={`mb-1 mt-1 items-center font-bold text-gray-900 ${headerSizeClasses[headerSize || 'medium']}`}
+        >
+          {title}
+        </p>
+      </div>
+      <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
+      <p
+        className={`mb-8 dark:text-black mt-5 ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
+      >
+        <TextTruncate element='span' line={3} text={body} />
+      </p>
+      {link && (
+        <p className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 dark:text-black'>
+          Read More
+        </p>
+      )}
+    </div>
+  );
+};
+
+const Card: React.FC<CardProps> = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  headerSize,
+  bodyTextSize,
+}) => {
+  return (
+    <>
+      {link ? (
+        <Link href={link}>
+          <CardBody
+            {...{ title, body, icon, link, image, headerSize, bodyTextSize }}
+          />
+        </Link>
+      ) : (
+        <CardBody
+          {...{ title, body, icon, link, image, headerSize, bodyTextSize }}
+        />
+      )}
+    </>
+  );
+};
+
+export default Card;

components/DarkModeToggle.tsx

@@ -31,7 +31,7 @@ export default function DarkModeToggle() {
   return (
     <button
       onClick={toggleDarkMode}
-      className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
+      className='dark-mode-toggle min-w-[2rem] rounded-md dark:hover:bg-gray-700 md:p-1.5 pr-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
       disabled={!isClickable}
     >
       <img src={img} alt='Dark Mode' width={25} height={25} />

components/Faq.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import faqData from '../data/faq.json';
+import Accordion from '~/components/Accordion';
+
+export default function Faq({ category }: { category: string }) {
+  const filteredFAQs = faqData.filter((item) => item.category === category);
+
+  return (
+    <section>
+      <div className='max-w-screen-md mx-auto p-8'>
+        <h2 className='text-2xl font-bold text-[24px] mb-4'>
+          {category.toUpperCase()}
+        </h2>
+        <Accordion items={filteredFAQs} />
+      </div>
+    </section>
+  );
+}