fix: replace top-level <div> tags in section with <section> tags

components/About.jsx

@@ -2,7 +2,7 @@ import Icon from "@/components/Icon";
 
 function About() {
   return (
-    <div className="mx-auto px-7 py-12 max-w-screen-xl">
+    <section className="mx-auto px-7 py-12 max-w-screen-xl">
       <div className="w-full bg-card text-card-foreground border-border border rounded-lg px-4 py-2 flex flex-col-reverse md:flex-row">
         <Icon
           width={160}
@@ -21,7 +21,7 @@ function About() {
           </p>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 

components/FAQ.jsx

@@ -9,7 +9,7 @@ function FAQ() {
   const ref = useRef({});
 
   return (
-    <div className="mx-auto px-3 py-24 max-w-screen-xl">
+    <section className="mx-auto px-3 py-24 max-w-screen-xl">
       <h2 className="text-center font-bold text-4xl md:text-5xl hyphens-auto mb-4">
         Frequently Asked Questions
       </h2>
@@ -51,7 +51,7 @@ function FAQ() {
           </div>
         </div>
       ))}
-    </div>
+    </section>
   );
 }
 

components/Features.jsx

@@ -2,7 +2,7 @@ import { features } from "@/constants";
 
 function Features() {
   return (
-    <div className="mx-auto px-3 py-24 max-w-screen-xl">
+    <section className="mx-auto px-3 py-24 max-w-screen-xl">
       <h2 className="text-center font-bold text-4xl md:text-5xl hyphens-auto">
         Experience Effortless <span className="text-primary">Email</span>
       </h2>
@@ -23,7 +23,7 @@ function Features() {
           </div>
         ))}
       </div>
-    </div>
+    </section>
   );
 }
 

components/Footer.jsx

@@ -7,87 +7,83 @@ import Logo from "@/components/Logo";
 function Footer() {
   const currentYear = new Date().getFullYear();
   return (
-    <>
+    <footer className="flex flex-col w-full transition-all border-border border-t">
-      <footer className="flex flex-col w-full transition-all border-border border-t">
+      <div className="px-3 sm:px-12 md:px-24 lg:px-6 py-10 w-full mx-auto max-w-screen-xl">
-        <div className="px-3 sm:px-12 md:px-24 lg:px-6 py-10 w-full mx-auto max-w-screen-xl">
+        <div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-sm:items-center items-center mb-6 ">
-          <div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-sm:items-center items-center mb-6 ">
+          <div className="flex items-center mb-6 md:mb-0">
-            <div className="flex items-center mb-6 md:mb-0">
+            <Logo width={240} height={80} />
-              <Logo width={240} height={80} />
-            </div>
-            <div className="flex flex-col items-center sm:items-start sm:flex-row justify-between w-full lg:w-auto space-y-6 sm:space-y-0 sm:space-x-6 lg:space-x-16">
-              <div className="flex flex-col items-center sm:items-start">
-                <div className="text-2xl font-light text-primary">
-                  Quick links
-                </div>
-                {footerLinks.otherPages.map((link) => (
-                  <span key={link.href}>
-                    <Link
-                      href={link.href}
-                      className="text-base font-light hover:text-primary hover:underline"
-                    >
-                      {link.label}
-                    </Link>
-                  </span>
-                ))}
-              </div>
-
-              <div className="flex flex-col items-center sm:items-start">
-                <div className="text-2xl font-light text-primary">
-                  Resources
-                </div>
-                {footerLinks.resources.map((link) => (
-                  <span key={link.href}>
-                    <Link
-                      href={link.href}
-                      className="text-base font-light hover:text-primary hover:underline"
-                    >
-                      {link.label}
-                    </Link>
-                  </span>
-                ))}
-              </div>
-
-              <div className="flex flex-col items-center sm:items-start">
-                <div className="text-2xl font-light text-primary">Social</div>
-                <p className="text-base font-light">
-                  {footerLinks.social.supportText}
-                </p>
-                <div className="flex space-x-1 py-3">
-                  <SocialIcons />
-                </div>
-              </div>
-            </div>
           </div>
-          <div className="border-t mb-6 border-gray-300 dark:border-white/30"></div>
+          <div className="flex flex-col items-center sm:items-start sm:flex-row justify-between w-full lg:w-auto space-y-6 sm:space-y-0 sm:space-x-6 lg:space-x-16">
-          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 px-4">
+            <div className="flex flex-col items-center sm:items-start">
-            <span className="text-sm font-light">
+              <div className="text-2xl font-light text-primary">
-              Copyright © 2023-{currentYear}{" "}
+                Quick links
-              <Link
+              </div>
-                href={footerLinks.footerBottom.rightsReserved.href}
+              {footerLinks.otherPages.map((link) => (
-                className="text-primary font-semibold"
+                <span key={link.href}>
-              >
+                  <Link
-                {footerLinks.footerBottom.rightsReserved.label}
+                    href={link.href}
-              </Link>
+                    className="text-base font-light hover:text-primary hover:underline"
-            </span>
+                  >
-            <span className="text-sm font-light">
+                    {link.label}
-              <Link
+                  </Link>
-                href={footerLinks.footerBottom.termsofService.href}
+                </span>
-                className="text-primary font-medium transition-all underline-offset-4 hover:underline"
+              ))}
-              >
+            </div>
-                {footerLinks.footerBottom.termsofService.label}{" "}
+
-              </Link>
+            <div className="flex flex-col items-center sm:items-start">
-              |{" "}
+              <div className="text-2xl font-light text-primary">Resources</div>
-              <Link
+              {footerLinks.resources.map((link) => (
-                href={footerLinks.footerBottom.privacyPolicy.href}
+                <span key={link.href}>
-                className="text-primary font-medium transition-all underline-offset-4 hover:underline"
+                  <Link
-              >
+                    href={link.href}
-                {footerLinks.footerBottom.privacyPolicy.label}
+                    className="text-base font-light hover:text-primary hover:underline"
-              </Link>
+                  >
-            </span>
+                    {link.label}
+                  </Link>
+                </span>
+              ))}
+            </div>
+
+            <div className="flex flex-col items-center sm:items-start">
+              <div className="text-2xl font-light text-primary">Social</div>
+              <p className="text-base font-light">
+                {footerLinks.social.supportText}
+              </p>
+              <div className="flex space-x-1 py-3">
+                <SocialIcons />
+              </div>
+            </div>
           </div>
         </div>
-      </footer>
+        <div className="border-t mb-6 border-gray-300 dark:border-white/30"></div>
-    </>
+        <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 px-4">
+          <span className="text-sm font-light">
+            Copyright © 2023-{currentYear}{" "}
+            <Link
+              href={footerLinks.footerBottom.rightsReserved.href}
+              className="text-primary font-semibold"
+            >
+              {footerLinks.footerBottom.rightsReserved.label}
+            </Link>
+          </span>
+          <span className="text-sm font-light">
+            <Link
+              href={footerLinks.footerBottom.termsofService.href}
+              className="text-primary font-medium transition-all underline-offset-4 hover:underline"
+            >
+              {footerLinks.footerBottom.termsofService.label}{" "}
+            </Link>
+            |{" "}
+            <Link
+              href={footerLinks.footerBottom.privacyPolicy.href}
+              className="text-primary font-medium transition-all underline-offset-4 hover:underline"
+            >
+              {footerLinks.footerBottom.privacyPolicy.label}
+            </Link>
+          </span>
+        </div>
+      </div>
+    </footer>
   );
 }
 

components/Hero.jsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 function Hero() {
   return (
-    <div className="flex flex-col md:flex-row mx-auto max-w-screen-xl px-3 py-12">
+    <section className="flex flex-col md:flex-row mx-auto max-w-screen-xl px-3 py-12">
       <div className="md:w-1/2 self-center text-center md:text-start">
         <h1 className="font-bold text-5xl md:text-6xl hyphens-auto leading-tight md:leading-tight md:text-start">
           Revolution&shy;ize your <span className="text-primary">inbox</span>{" "}
@@ -46,7 +46,7 @@ function Hero() {
           />
         </div>
       </div>
-    </div>
+    </section>
   );
 }