Improve accessibility

CHANGELOG.md

@@ -11,4 +11,12 @@
 - update all packages
 - add contributing guidelines
 - fix console errors
-- hide feature divider
+- hide feature divider
+
+## 1.0.2 (05-06-2024)
+
+- add blog section and article page
+- optimize theme class names
+- fix visual bugs
+- improve hover states on buttons
+- improve accessibility

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tailcast",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "description": "Dark themed website template built on AstroJS, designed for fictional startup",
   "author": {

src/assets/icons/CloseIcon.jsx

@@ -1,5 +1,5 @@
 export const CloseIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="fill-[rgb(255,255,255,0.7)]">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor">
     <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" />
   </svg>
 );

src/components/Article.jsx

@@ -3,26 +3,30 @@ import React from "react";
 export const Article = ({ articleData }) => {
   const { title, subtitle, date, image, content, footer } = articleData;
   return (
-    <main className="flex justify-center bg-bgDark2 relative pt-2">
-      <div className="px-4">
-        <article className=" p-8 text-center rounded-3xl max-w-[70vw] my-24">
+    <div className="flex justify-center bg-bgDark2 relative pt-2">
+      <div className="px-2 sm:px-4">
+        <article className=" p-8 text-center rounded-3xl w-full lg:w-[1200px] 2xl:w-[1400px] mb-24 mt-16 sm:mt-24">
           <header className="mb-12">
-            <div className="text-sm text-customGrayText my-4">{date}</div>
-            <h1 className="text-[3.5rem] font-bold text-white mb-4">{title}</h1>
-            <p className="text-lg text-customGrayText mb-4">{subtitle}</p>
+            <div className="text-sm text-secondaryText my-4">{date}</div>
+            <h1 className="text-[2rem] xs:text-[2.8rem] lg:text-[3.5rem] font-bold text-primaryText mb-4">{title}</h1>
+            <p className="text-lg text-secondaryText mb-4">{subtitle}</p>
           </header>
           <img
             src={image}
             alt={title}
-            className="rounded-3xl mb-8 w-3/4 mx-auto mt-8"
+            className="rounded-3xl mb-8 w-10/12 md:w-3/4 mx-auto mt-8"
+            aria-label={title}
           />
           <section
-            className="text-customGrayText leading-loose text-xl text-justify mx-auto w-2/3 mt-16"
+            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"
+            aria-labelledby="content-title"
             dangerouslySetInnerHTML={{ __html: content }}
           />
-          <div className="w-2/3 text-right mx-auto mt-8 text-white text-xl">{footer}</div>
+          <div className="w-4/5 lg:w-2/3 text-right mx-auto mt-8 text-primaryText text-xl">
+            {footer}
+          </div>
         </article>
       </div>
-    </main>
+    </div>
   );
 };

src/components/Blog.jsx

@@ -1,8 +1,8 @@
 import { motion } from "framer-motion";
 
-import blog1 from "../assets/images/blog1.jpg";
-import blog2 from "../assets/images/blog2.jpg";
-import blog3 from "../assets/images/blog3.jpg";
+import blog1 from "../assets/images/blog1.png";
+import blog2 from "../assets/images/blog2.png";
+import blog3 from "../assets/images/blog3.png";
 
 const blogData = [
   {
@@ -26,42 +26,43 @@ const blogData = [
 export const Blog = () => (
   <section className="w-screen flex justify-center bg-bgDark2 relative ">
     <div className="absolute -top-16" id="blog" />
-    <div className="pb-0 pt-4 bg-bgDark2 2xl:w-[1200px] lg:w-[1050px] md:w-4/5 ">
+    <div className="pb-0 pt-4 bg-bgDark2 2xl:w-[1200px] lg:w-[1000px] xl:w-[1150px]  ">
       <motion.div
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
         transition={{ duration: 0.5, delay: 0.2 }}
       >
         <div className="container px-4 mb-20">
-          <div className="max-w-2xl text-left mb-16">
+          <div className="max-w-2xl text-center lg:text-left mb-16 mx-auto lg:ml-0 lg:mr-0">
             <span className="block-subtitle">Our Blog</span>
-            <h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
+            <h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-primaryText">
               Latest Insights
             </h2>
-            <p className="mb-6 text-customGrayText">
+            <p className="mb-6 text-secondaryText">
               Stay updated with the latest trends and insights in our industry.
             </p>
           </div>
-          <div className="flex flex-wrap -mx-4 items-start  h-[35rem]">
-            <div className="w-full lg:w-3/5 px-4 mb-8 lg:mb-0  h-full">
+          <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]">
+            <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">
               <a href="/blog/article">
-                <div className="p-10 bg-bgDark3 rounded-3xl h-full hover:bg-bgDark3Hover transition cursor-pointer">
+                <div className="p-6 sm:p-10 bg-bgDark3 rounded-3xl h-full hover:bg-bgDark3Hover transition cursor-pointer">
                   <img
                     src={blogData[0].image}
                     alt={blogData[0].title}
                     className="rounded-3xl mb-6  w-full"
+                    aria-label={blogData[0].title}
                   />
-                  <h4 className="mb-4 text-2xl font-bold font-heading text-white">
+                  <h3 className="mb-4 text-2xl font-bold font-heading text-primaryText">
                     {blogData[0].title}
-                  </h4>
-                  <p className="text-customGrayText leading-loose">
+                  </h3>
+                  <p className="text-secondaryText leading-loose">
                     {blogData[0].subtitle}
                   </p>
                 </div>
               </a>
             </div>
-            <div className="w-full lg:w-2/5 px-4 flex flex-col justify-between h-full">
+            <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">
               {blogData.slice(1).map((post, index) => (
                 <a
                   href="/blog/article"
@@ -70,17 +71,18 @@ export const Blog = () => (
                   hover:bg-bgDark3Hover transition cursor-pointer"
                 >
                   <div className="pt-2">
-                    <h4 className="mb-4 text-xl font-bold font-heading text-white">
+                    <h3 className="mb-4 text-xl font-bold font-heading text-primaryText">
                       {post.title}
-                    </h4>
-                    <p className="text-customGrayText leading-loose">
+                    </h3>
+                    <p className="text-secondaryText leading-loose">
                       {post.subtitle}
                     </p>
                   </div>
                   <img
                     src={post.image}
                     alt={post.title}
-                    className="rounded-3xl mb-6  w-full"
+                    className="rounded-3xl mb-6 w-[9rem] h-[9rem] lg:w-auto lg:h-auto xl:w-full"
+                    aria-label={post.title}
                   />
                 </a>
               ))}

src/components/Brands.jsx

@@ -8,7 +8,7 @@ import { SpotifyLogo } from "../assets/logos/SpotifyLogo";
 import { StripeLogo } from "../assets/logos/StripeLogo";
 
 export const Brands = () => (
-  <section className="py-12 sm:py-24 bg-bgDark1 w-full mt-16 mb-16">
+  <section className="py-12 sm:py-24 bg-bgDark1 w-full  lg:mt-16 mb-8 lg:mb-16">
     <motion.div
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
@@ -19,7 +19,7 @@ export const Brands = () => (
         <div className="flex lg:flex-row flex-col items-center -mx-4 justify-center lg:text-left text-center">
           <div className="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
             <div className="flex flex-col">
-              <h2 className="mb-2  text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-white">
+              <h2 className="mb-2  text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-primaryText">
                 Trusted by brands
               </h2>
               <h2 className=" text-4xl  sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-secondaryColor">

src/components/FAQ.jsx

@@ -25,7 +25,7 @@ const FAQData = [
 ];
 
 export const FAQ = () => (
-  <section className="relative pt-16 pb-16 bg-blueGray-50 overflow-hidden">
+  <section className="relative -mt-8 sm:mt-0 pt-12 sm:pt-16 pb-16 bg-blueGray-50 overflow-hidden">
     <div className="absolute -top-10" id="FAQ" />
     <motion.div
       initial={{ opacity: 0 }}
@@ -35,9 +35,7 @@ export const FAQ = () => (
     >
       <div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
         <div className="md:max-w-4xl mx-auto">
-          <p className="mb-7 block-subtitle text-center">
-            Have any questions?
-          </p>
+          <p className="mb-7 block-subtitle text-center">Have any questions?</p>
           <h2 className="mb-16 block-big-title text-center">
             Frequently Asked Questions
           </h2>
@@ -64,15 +62,13 @@ const FAQBox = ({ defaultOpen, title, content }) => {
 
   return (
     <div
-      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"
+      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"
       onClick={() => setIsOpen(!isOpen)}
     >
       <div className="flex flex-col p-2  justify-center items-start">
-        <h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">
-          {title}
-        </h3>
+        <h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">{title}</h3>
         <p
-          className={`text-customGrayText pt-4 transition-all duration-200 overflow-hidden ${
+          className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${
             isOpen ? "max-h-96" : "max-h-0"
           }`}
         >

src/components/Features1.jsx

@@ -9,7 +9,7 @@ import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
 export const Features1 = () => {
   return (
     <section
-      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"
+      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"
       id="features"
     >
       <motion.div
@@ -25,12 +25,12 @@ export const Features1 = () => {
               <h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
                 Unlike any tool you used before
               </h2>
-              <p className="mb-10 text-customGrayText leading-loose">
+              <p className="mb-10 text-secondaryText leading-loose">
                 Discover a new level of data analysis with our innovative and
-                user-friendly platform. Transform your business needs with actionable
-                insights.
+                user-friendly platform. Transform your business needs with
+                actionable insights.
               </p>
-              <ul className="mb-6 text-white">
+              <ul className="mb-6 text-primaryText">
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
                   <span>Real-time data visualization</span>
@@ -51,31 +51,35 @@ export const Features1 = () => {
               <div className="mb-4 py-3 pl-3 pr-2 rounded">
                 <img
                   src={feature1.src}
-                  alt="f1"
-                  className="rounded-xl  custom-border-gray mx-auto sm:mx-unset"
+                  alt="Feature image 1"
+                  className="rounded-xl  main-border-gray mx-auto sm:mx-unset"
+                  aria-label="Feature image 1"
                 />
               </div>
               <div className="py-3 pl-3 pr-2 rounded ">
                 <img
                   src={feature2.src}
-                  alt="f2"
-                  className="rounded-xl  custom-border-gray mx-auto sm:mx-unset"
+                  alt="Feature image 2"
+                  className="rounded-xl  main-border-gray mx-auto sm:mx-unset"
+                  aria-label="Feature image 2"
                 />
               </div>
             </div>
             <div className="w-1/2 lg:mt-20  pt-12 lg:pt-0 px-2 hidden sm:inline-block">
               <div className="mb-4 py-3 pl-3 pr-2 rounded-lg ">
                 <img
                   src={feature3.src}
-                  alt="f3"
-                  className="rounded-xl  custom-border-gray"
+                  alt="Feature image 3"
+                  className="rounded-xl  main-border-gray"
+                  aria-label="Feature image 3"
                 />
               </div>
               <div className="py-3 pl-3 pr-2 rounded-lg ">
                 <img
                   src={feature4.src}
-                  alt="f4"
-                  className="rounded-xl  custom-border-gray"
+                  alt="Feature image 4"
+                  className="rounded-xl  main-border-gray"
+                  aria-label="Feature image 4"
                 />
               </div>
             </div>

src/components/Features2.jsx

@@ -18,34 +18,32 @@ export const Features2 = () => (
             <div className="mb-4 py-3 md:pl-3 md:pr-20 lg:pr-12 rounded">
               <img
                 src={feature5.src}
-                alt="f1"
-                className="rounded-xl  custom-border-gray"
+                alt="Feature image 5"
+                className="rounded-xl  main-border-gray"
               />
             </div>
             <div className="py-3 md:pl-20 lg:pl-12 md:pr-2 rounded ">
               <img
                 src={feature6.src}
-                alt="f2"
-                className="rounded-xl  custom-border-gray"
+                alt="Feature image 6"
+                className="rounded-xl  main-border-gray"
               />
             </div>
           </div>
         </div>
 
         <div className="w-full lg:w-1/2 mb-12 lg:mb-0 xl:pl-8">
           <div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
-            <span className="block-subtitle">
-              Make Data-Driven Decisions
-            </span>
+            <span className="block-subtitle">Make Data-Driven Decisions</span>
             <h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
               Issue tracking you’ll enjoy using
             </h2>
-            <p className="mb-12 text-customGrayText leading-loose">
+            <p className="mb-12 text-secondaryText leading-loose">
               Monitor and track data issues with ease using our intuitive and
               efficient issue tracking system. Stay ahead of potential problems
               and improve your workflow.
             </p>
-            <ul className="mb-6 text-white">
+            <ul className="mb-6 text-primaryText">
               <li className="mb-4 flex">
                 <CheckArrowIcon />
                 <span>Collaborative environment</span>