Skip to content

Commit be29a4c

Browse files
matt765matt765
committed
Improve accessibility
1 parent 5b5ba2f commit be29a4c

26 files changed

+212
-197
lines changed

‎CHANGELOG.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,12 @@
1111
- update all packages
1212
- add contributing guidelines
1313
- fix console errors
14-
- hide feature divider
14+
- hide feature divider
15+
16+
## 1.0.2 (05-06-2024)
17+
18+
- add blog section and article page
19+
- optimize theme class names
20+
- fix visual bugs
21+
- improve hover states on buttons
22+
- improve accessibility

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "tailcast",
33
"type": "module",
4-
"version": "1.0.0",
4+
"version": "1.0.2",
55
"license": "MIT",
66
"description": "Dark themed website template built on AstroJS, designed for fictional startup",
77
"author": {

‎src/assets/icons/CloseIcon.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const CloseIcon = () => (
2-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="fill-[rgb(255,255,255,0.7)]">
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor">
33
<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" />
44
</svg>
55
);

‎src/assets/images/blog1.png

308 KB
Loading

‎src/assets/images/blog2.jpg

-689 KB
Binary file not shown.

‎src/assets/images/blog2.png

234 KB
Loading

‎src/assets/images/blog3.jpg

-1.11 MB
Binary file not shown.

‎src/assets/images/blog3.png

316 KB
Loading

‎src/components/Article.jsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,30 @@ import React from "react";
33
export const Article = ({ articleData }) => {
44
const { title, subtitle, date, image, content, footer } = articleData;
55
return (
6-
<main className="flex justify-center bg-bgDark2 relative pt-2">
7-
<div className="px-4">
8-
<article className=" p-8 text-center rounded-3xl max-w-[70vw] my-24">
6+
<div className="flex justify-center bg-bgDark2 relative pt-2">
7+
<div className="px-2 sm:px-4">
8+
<article className=" p-8 text-center rounded-3xl w-full lg:w-[1200px] 2xl:w-[1400px] mb-24 mt-16 sm:mt-24">
99
<header className="mb-12">
10-
<div className="text-sm text-customGrayText my-4">{date}</div>
11-
<h1 className="text-[3.5rem] font-bold text-white mb-4">{title}</h1>
12-
<p className="text-lg text-customGrayText mb-4">{subtitle}</p>
10+
<div className="text-sm text-secondaryText my-4">{date}</div>
11+
<h1 className="text-[2rem] xs:text-[2.8rem] lg:text-[3.5rem] font-bold text-primaryText mb-4">{title}</h1>
12+
<p className="text-lg text-secondaryText mb-4">{subtitle}</p>
1313
</header>
1414
<img
1515
src={image}
1616
alt={title}
17-
className="rounded-3xl mb-8 w-3/4 mx-auto mt-8"
17+
className="rounded-3xl mb-8 w-10/12 md:w-3/4 mx-auto mt-8"
18+
aria-label={title}
1819
/>
1920
<section
20-
className="text-customGrayText leading-loose text-xl text-justify mx-auto w-2/3 mt-16"
21+
className="text-secondaryText !leading-8 sm:!leading-10 sm:text-xl text-left sm:text-justify mx-auto w-full md:w-10/12 lg:w-2/3 mt-16"
22+
aria-labelledby="content-title"
2123
dangerouslySetInnerHTML={{ __html: content }}
2224
/>
23-
<div className="w-2/3 text-right mx-auto mt-8 text-white text-xl">{footer}</div>
25+
<div className="w-4/5 lg:w-2/3 text-right mx-auto mt-8 text-primaryText text-xl">
26+
{footer}
27+
</div>
2428
</article>
2529
</div>
26-
</main>
30+
</div>
2731
);
2832
};

‎src/components/Blog.jsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { motion } from "framer-motion";
22

3-
import blog1 from "../assets/images/blog1.jpg";
4-
import blog2 from "../assets/images/blog2.jpg";
5-
import blog3 from "../assets/images/blog3.jpg";
3+
import blog1 from "../assets/images/blog1.png";
4+
import blog2 from "../assets/images/blog2.png";
5+
import blog3 from "../assets/images/blog3.png";
66

77
const blogData = [
88
{
@@ -26,42 +26,43 @@ const blogData = [
2626
export const Blog = () => (
2727
<section className="w-screen flex justify-center bg-bgDark2 relative ">
2828
<div className="absolute -top-16" id="blog" />
29-
<div className="pb-0 pt-4 bg-bgDark2 2xl:w-[1200px] lg:w-[1050px] md:w-4/5 ">
29+
<div className="pb-0 pt-4 bg-bgDark2 2xl:w-[1200px] lg:w-[1000px] xl:w-[1150px] ">
3030
<motion.div
3131
initial={{ opacity: 0 }}
3232
whileInView={{ opacity: 1 }}
3333
viewport={{ once: true }}
3434
transition={{ duration: 0.5, delay: 0.2 }}
3535
>
3636
<div className="container px-4 mb-20">
37-
<div className="max-w-2xl text-left mb-16">
37+
<div className="max-w-2xl text-center lg:text-left mb-16 mx-auto lg:ml-0 lg:mr-0">
3838
<span className="block-subtitle">Our Blog</span>
39-
<h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
39+
<h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-primaryText">
4040
Latest Insights
4141
</h2>
42-
<p className="mb-6 text-customGrayText">
42+
<p className="mb-6 text-secondaryText">
4343
Stay updated with the latest trends and insights in our industry.
4444
</p>
4545
</div>
46-
<div className="flex flex-wrap -mx-4 items-start h-[35rem]">
47-
<div className="w-full lg:w-3/5 px-4 mb-8 lg:mb-0 h-full">
46+
<div className="flex 2xl:w-[1200px] lg:w-[1000px] xl:w-[1150px] flex-wrap -mx-4 items-start h-auto sm:h-[30rem] lg:h-[31rem] xl:h-[35rem]">
47+
<div className="flex sm:hidden lg:flex w-11/12 mx-auto sm:ml-0 sm:mr-0 lg:w-1/2 xl:w-3/5 px-4 mb-8 lg:mb-0 h-full">
4848
<a href="/blog/article">
49-
<div className="p-10 bg-bgDark3 rounded-3xl h-full hover:bg-bgDark3Hover transition cursor-pointer">
49+
<div className="p-6 sm:p-10 bg-bgDark3 rounded-3xl h-full hover:bg-bgDark3Hover transition cursor-pointer">
5050
<img
5151
src={blogData[0].image}
5252
alt={blogData[0].title}
5353
className="rounded-3xl mb-6 w-full"
54+
aria-label={blogData[0].title}
5455
/>
55-
<h4 className="mb-4 text-2xl font-bold font-heading text-white">
56+
<h3 className="mb-4 text-2xl font-bold font-heading text-primaryText">
5657
{blogData[0].title}
57-
</h4>
58-
<p className="text-customGrayText leading-loose">
58+
</h3>
59+
<p className="text-secondaryText leading-loose">
5960
{blogData[0].subtitle}
6061
</p>
6162
</div>
6263
</a>
6364
</div>
64-
<div className="w-full lg:w-2/5 px-4 flex flex-col justify-between h-full">
65+
<div className="hidden sm:flex mx-auto lg:ml-0 lg:mr-0 w-11/12 sm:w-4/5 lg:w-1/2 xl:w-2/5 px-4 flex-col justify-between h-full">
6566
{blogData.slice(1).map((post, index) => (
6667
<a
6768
href="/blog/article"
@@ -70,17 +71,18 @@ export const Blog = () => (
7071
hover:bg-bgDark3Hover transition cursor-pointer"
7172
>
7273
<div className="pt-2">
73-
<h4 className="mb-4 text-xl font-bold font-heading text-white">
74+
<h3 className="mb-4 text-xl font-bold font-heading text-primaryText">
7475
{post.title}
75-
</h4>
76-
<p className="text-customGrayText leading-loose">
76+
</h3>
77+
<p className="text-secondaryText leading-loose">
7778
{post.subtitle}
7879
</p>
7980
</div>
8081
<img
8182
src={post.image}
8283
alt={post.title}
83-
className="rounded-3xl mb-6 w-full"
84+
className="rounded-3xl mb-6 w-[9rem] h-[9rem] lg:w-auto lg:h-auto xl:w-full"
85+
aria-label={post.title}
8486
/>
8587
</a>
8688
))}

‎src/components/Brands.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { SpotifyLogo } from "../assets/logos/SpotifyLogo";
88
import { StripeLogo } from "../assets/logos/StripeLogo";
99

1010
export const Brands = () => (
11-
<section className="py-12 sm:py-24 bg-bgDark1 w-full mt-16 mb-16">
11+
<section className="py-12 sm:py-24 bg-bgDark1 w-full lg:mt-16 mb-8 lg:mb-16">
1212
<motion.div
1313
initial={{ opacity: 0 }}
1414
whileInView={{ opacity: 1 }}
@@ -19,7 +19,7 @@ export const Brands = () => (
1919
<div className="flex lg:flex-row flex-col items-center -mx-4 justify-center lg:text-left text-center">
2020
<div className="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
2121
<div className="flex flex-col">
22-
<h2 className="mb-2 text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-white">
22+
<h2 className="mb-2 text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-primaryText">
2323
Trusted by brands
2424
</h2>
2525
<h2 className=" text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-secondaryColor">

‎src/components/FAQ.jsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const FAQData = [
2525
];
2626

2727
export const FAQ = () => (
28-
<section className="relative pt-16 pb-16 bg-blueGray-50 overflow-hidden">
28+
<section className="relative -mt-8 sm:mt-0 pt-12 sm:pt-16 pb-16 bg-blueGray-50 overflow-hidden">
2929
<div className="absolute -top-10" id="FAQ" />
3030
<motion.div
3131
initial={{ opacity: 0 }}
@@ -35,9 +35,7 @@ export const FAQ = () => (
3535
>
3636
<div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
3737
<div className="md:max-w-4xl mx-auto">
38-
<p className="mb-7 block-subtitle text-center">
39-
Have any questions?
40-
</p>
38+
<p className="mb-7 block-subtitle text-center">Have any questions?</p>
4139
<h2 className="mb-16 block-big-title text-center">
4240
Frequently Asked Questions
4341
</h2>
@@ -64,15 +62,13 @@ const FAQBox = ({ defaultOpen, title, content }) => {
6462

6563
return (
6664
<div
67-
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-bgDark3 custom-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
65+
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-bgDark3 main-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
6866
onClick={() => setIsOpen(!isOpen)}
6967
>
7068
<div className="flex flex-col p-2 justify-center items-start">
71-
<h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">
72-
{title}
73-
</h3>
69+
<h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">{title}</h3>
7470
<p
75-
className={`text-customGrayText pt-4 transition-all duration-200 overflow-hidden ${
71+
className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${
7672
isOpen ? "max-h-96" : "max-h-0"
7773
}`}
7874
>

‎src/components/Features1.jsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
99
export const Features1 = () => {
1010
return (
1111
<section
12-
className="w-full bg-bgDark2 mt-20 mb-8 sm:mt-16 sm:mb-24 xl:mt-0 xl:m pt-[2rem] md:pt-[12vw] lg:pt-16"
12+
className="w-full bg-bgDark2 pt-24 -mt-8 mb-8 sm:-mt-8 sm:mb-24 xl:-mt-8 2xl:mt-0 md:pt-[12vw] lg:pt-16"
1313
id="features"
1414
>
1515
<motion.div
@@ -25,12 +25,12 @@ export const Features1 = () => {
2525
<h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
2626
Unlike any tool you used before
2727
</h2>
28-
<p className="mb-10 text-customGrayText leading-loose">
28+
<p className="mb-10 text-secondaryText leading-loose">
2929
Discover a new level of data analysis with our innovative and
30-
user-friendly platform. Transform your business needs with actionable
31-
insights.
30+
user-friendly platform. Transform your business needs with
31+
actionable insights.
3232
</p>
33-
<ul className="mb-6 text-white">
33+
<ul className="mb-6 text-primaryText">
3434
<li className="mb-4 flex">
3535
<CheckArrowIcon />
3636
<span>Real-time data visualization</span>
@@ -51,31 +51,35 @@ export const Features1 = () => {
5151
<div className="mb-4 py-3 pl-3 pr-2 rounded">
5252
<img
5353
src={feature1.src}
54-
alt="f1"
55-
className="rounded-xl custom-border-gray mx-auto sm:mx-unset"
54+
alt="Feature image 1"
55+
className="rounded-xl main-border-gray mx-auto sm:mx-unset"
56+
aria-label="Feature image 1"
5657
/>
5758
</div>
5859
<div className="py-3 pl-3 pr-2 rounded ">
5960
<img
6061
src={feature2.src}
61-
alt="f2"
62-
className="rounded-xl custom-border-gray mx-auto sm:mx-unset"
62+
alt="Feature image 2"
63+
className="rounded-xl main-border-gray mx-auto sm:mx-unset"
64+
aria-label="Feature image 2"
6365
/>
6466
</div>
6567
</div>
6668
<div className="w-1/2 lg:mt-20 pt-12 lg:pt-0 px-2 hidden sm:inline-block">
6769
<div className="mb-4 py-3 pl-3 pr-2 rounded-lg ">
6870
<img
6971
src={feature3.src}
70-
alt="f3"
71-
className="rounded-xl custom-border-gray"
72+
alt="Feature image 3"
73+
className="rounded-xl main-border-gray"
74+
aria-label="Feature image 3"
7275
/>
7376
</div>
7477
<div className="py-3 pl-3 pr-2 rounded-lg ">
7578
<img
7679
src={feature4.src}
77-
alt="f4"
78-
className="rounded-xl custom-border-gray"
80+
alt="Feature image 4"
81+
className="rounded-xl main-border-gray"
82+
aria-label="Feature image 4"
7983
/>
8084
</div>
8185
</div>

‎src/components/Features2.jsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -18,34 +18,32 @@ export const Features2 = () => (
1818
<div className="mb-4 py-3 md:pl-3 md:pr-20 lg:pr-12 rounded">
1919
<img
2020
src={feature5.src}
21-
alt="f1"
22-
className="rounded-xl custom-border-gray"
21+
alt="Feature image 5"
22+
className="rounded-xl main-border-gray"
2323
/>
2424
</div>
2525
<div className="py-3 md:pl-20 lg:pl-12 md:pr-2 rounded ">
2626
<img
2727
src={feature6.src}
28-
alt="f2"
29-
className="rounded-xl custom-border-gray"
28+
alt="Feature image 6"
29+
className="rounded-xl main-border-gray"
3030
/>
3131
</div>
3232
</div>
3333
</div>
3434

3535
<div className="w-full lg:w-1/2 mb-12 lg:mb-0 xl:pl-8">
3636
<div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
37-
<span className="block-subtitle">
38-
Make Data-Driven Decisions
39-
</span>
37+
<span className="block-subtitle">Make Data-Driven Decisions</span>
4038
<h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
4139
Issue tracking you’ll enjoy using
4240
</h2>
43-
<p className="mb-12 text-customGrayText leading-loose">
41+
<p className="mb-12 text-secondaryText leading-loose">
4442
Monitor and track data issues with ease using our intuitive and
4543
efficient issue tracking system. Stay ahead of potential problems
4644
and improve your workflow.
4745
</p>
48-
<ul className="mb-6 text-white">
46+
<ul className="mb-6 text-primaryText">
4947
<li className="mb-4 flex">
5048
<CheckArrowIcon />
5149
<span>Collaborative environment</span>

0 commit comments

Comments
 (0)