fix: replace top-level <div> tags in section with <section> tags
This commit is contained in:
parent
3c92518ba3
commit
2a664e0efd
5 changed files with 82 additions and 86 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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 items-center mb-6 md:mb-0">
|
||||
<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>
|
||||
<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="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">
|
||||
<Logo width={240} height={80} />
|
||||
</div>
|
||||
<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 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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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­ize your <span className="text-primary">inbox</span>{" "}
|
||||
|
|
@ -46,7 +46,7 @@ function Hero() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue