Skip to content

Commit

Permalink
chore: wcag compliance
Browse files Browse the repository at this point in the history
  • Loading branch information
@xn1cklas
xn1cklas committed Sep 7, 2024
1 parent e2db173 commit b412ce6
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 36 deletions.
17 changes: 12 additions & 5 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,31 @@ export default async function Page() {
const products = await Products();

return (
<div className="flex w-full flex-col items-center max-w-[100vw] md:max-w-7xl ">
<section className="flex flex-col gap-y-24 md:pt-24">
<div className="flex w-full flex-col items-center max-w-[100vw] md:max-w-7xl">
<section
className="flex flex-col gap-y-24 md:pt-24"
aria-labelledby="hero-heading"
>
<div className="flex w-full flex-col items-center gap-24 md:pb-16">
<div className="relative z-20 flex w-full flex-col items-center gap-y-12 text-center">
<a
href="https://www.producthunt.com/posts/polar-5?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-polar&#0045;5"
target="_blank"
rel="noopener noreferrer"
aria-label="Polar on Product Hunt"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=484271&theme=dark"
alt="Polar - An&#0032;open&#0032;source&#0032;monetization&#0032;platform&#0032;for&#0032;developers | Product Hunt"
style={{ width: "250px", height: "54px" }}
alt="Polar - An open source monetization platform for developers | Product Hunt"
width="250"
height="54"
/>
</a>
<div className="z-20 flex flex-col items-center gap-y-8">
<h1 className="text-balance text-5xl !leading-tight text-gray-950 md:text-7xl dark:text-white">
<h1
id="hero-heading"
className="text-balance text-5xl !leading-tight text-gray-950 md:text-7xl dark:text-white"
>
Next.js Polar starter kit
</h1>
<div className="flex flex-col items-center gap-y-4 xl:w-2/3">
Expand Down
8 changes: 4 additions & 4 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";

const Footer = () => {
return (
<div
<footer
className={twMerge(
"dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32 max-w-7xl"
)}
Expand All @@ -23,7 +23,7 @@ const Footer = () => {
&copy; Polar Software Inc. {new Date().getFullYear()}
</span>
</div>
<div
<nav
className={twMerge(
"flex flex-col gap-y-12 md:flex-row",
"gap-x-24 lg:gap-x-32"
Expand Down Expand Up @@ -87,9 +87,9 @@ const Footer = () => {
<FooterLink href="mailto:[email protected]">Contact</FooterLink>
</div>
</div>
</div>
</nav>
</div>
</div>
</footer>
);
};

Expand Down
9 changes: 6 additions & 3 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link";

export const Header = () => {
return (
<div className="w-full max-w-[100vw] px-4 md:max-w-7xl md:px-12 dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
<header className="w-full max-w-[100vw] px-4 md:max-w-7xl md:px-12 dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
<TopbarNavigation />
<BrandingMenu
className="mt-1 hidden md:block"
Expand All @@ -22,13 +22,16 @@ export const Header = () => {
</button>
</Link>
</div>
</div>
</header>
);
};

const TopbarNavigation = () => {
return (
<nav className="absolute left-1/2 hidden -translate-x-1/2 flex-row items-center gap-x-4 text-sm md:flex">
<nav
className="absolute left-1/2 hidden -translate-x-1/2 flex-row items-center gap-x-4 text-sm md:flex"
aria-label="Main navigation"
>
<Link
className="dark:hover:bg-polar-800 rounded-full px-4 py-2 hover:bg-gray-100"
href="/#pricing"
Expand Down
68 changes: 44 additions & 24 deletions src/components/Pricing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,23 @@ export function Pricing({ products }: { products: PricingData[] }) {
const [isAnnual, setIsAnnual] = useState(false);

return (
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold text-center mb-8">Pricing</h1>
<section
className="container mx-auto px-4"
aria-labelledby="pricing-heading"
>
<h2 id="pricing-heading" className="text-3xl font-bold text-center mb-8">
Pricing
</h2>
<div className="flex justify-center mb-8">
<div className="inline-flex rounded-md shadow-sm" role="group">
<fieldset
className="inline-flex rounded-md shadow-sm"
role="radiogroup"
aria-label="Billing frequency"
>
<legend className="sr-only">Choose billing frequency</legend>
<button
role="radio"
aria-checked={!isAnnual}
className={`inline-flex items-center justify-center whitespace-nowrap rounded-l-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 px-4 py-1.5 ${
isAnnual
? "bg-white text-blue-500 border border-blue-500"
Expand All @@ -22,6 +34,8 @@ export function Pricing({ products }: { products: PricingData[] }) {
Monthly
</button>
<button
role="radio"
aria-checked={isAnnual}
className={`inline-flex items-center justify-center whitespace-nowrap rounded-r-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 px-4 py-1.5 ${
isAnnual
? "bg-blue-500 text-white"
Expand All @@ -31,7 +45,7 @@ export function Pricing({ products }: { products: PricingData[] }) {
>
Annual
</button>
</div>
</fieldset>
</div>
<div className="flex flex-col md:flex-row gap-8 w-full mx-auto">
{products.map((plan) => (
Expand All @@ -40,7 +54,7 @@ export function Pricing({ products }: { products: PricingData[] }) {
</div>
))}
</div>
</div>
</section>
);
}

Expand All @@ -65,11 +79,8 @@ function PriceComponent({
const currencySymbol = currency === "EUR" ? "€" : "$";

return (
<div className="flex h-full flex-col">
<div
className="border bg-white text-gray-950 shadow-none dark:text-white dark:bg-polar-900 rounded-4xl relative flex flex-col gap-y-6 overflow-hidden border-none hover:bg-gray-50 p-8 min-h-[400px] h-full"
id={id}
>
<article className="flex h-full flex-col" aria-labelledby={`plan-${id}`}>
<div className="border bg-white text-gray-950 shadow-none dark:text-white dark:bg-polar-900 rounded-4xl relative flex flex-col gap-y-6 overflow-hidden border-none hover:bg-gray-50 p-8 min-h-[400px] h-full">
<div className="flex flex-col space-y-1.5 grow gap-y-6 p-0">
<div className="flex flex-col gap-y-4">
<div className="flex flex-row items-center justify-between">
Expand All @@ -78,12 +89,21 @@ function PriceComponent({
</span>
</div>
<div className="flex justify-between">
<h3 className="truncate font-medium text-lg">{title}</h3>
<h3 id={`plan-${id}`} className="truncate font-medium text-lg">
{title}
</h3>
</div>
</div>
<div className="flex flex-col gap-y-8 text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<div className="text-5xl !font-[200]">
{price !== "Custom" ? `${currencySymbol}${price}` : price}
<div
className="text-5xl !font-[200]"
aria-label={`Price: ${
price !== "Custom"
? `${currencySymbol}${price}${period}`
: price
}`}
>
{price !== "Custom" ? `${currencySymbol} ${price}` : price}
<span className="dark:text-polar-500 ml-2 text-xl font-normal text-gray-500">
{price !== "Custom" ? period : ""}
</span>
Expand All @@ -93,26 +113,25 @@ function PriceComponent({
</div>
</div>
</div>
<div
data-orientation="horizontal"
role="none"
className="shrink-0 h-[1px] w-full dark:bg-polar-700 bg-gray-200"
></div>
<div className="flex h-full grow flex-col gap-y-2 p-0">
<hr className="shrink-0 h-[1px] w-full dark:bg-polar-700 bg-gray-200" />
<ul className="flex h-full grow flex-col gap-y-2 p-0 list-none">
{features.map((feature, index) => (
<div
<li
key={index}
className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]"
>
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<span
className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]"
aria-hidden="true"
>
<CheckIcon />
</span>
<span className="ml-3 text-sm leading-relaxed">{feature}</span>
</div>
</li>
))}
</div>
</ul>
</div>
</div>
</article>
);
}

Expand All @@ -129,6 +148,7 @@ const CheckIcon = () => {
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-check"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
Expand Down

0 comments on commit b412ce6

Please sign in to comment.