From e26250d60a65180878ce9473e4f052346d33e923 Mon Sep 17 00:00:00 2001
From: Andrew Chen <andrew032012@gmail.com>
Date: Fri, 29 Nov 2024 01:45:48 -0500
Subject: [PATCH 1/3] New Website: Add Aria Labels and Better Alt Text

---
 .../components/apply/ApplicationTimeline.tsx  |  4 ++--
 new-dti-website/components/apply/ApplyFAQ.tsx |  1 +
 new-dti-website/components/bottom.tsx         | 22 +++++++++----------
 .../components/course/DDProjects.tsx          |  1 +
 .../components/sponsor/SponsorshipTable.tsx   |  2 +-
 .../components/team/MemberDisplay.tsx         |  1 +
 .../components/team/MemberGroup.tsx           | 19 ++++++++++++----
 new-dti-website/components/team/TeamHero.tsx  |  9 ++++----
 new-dti-website/src/app/course/page.tsx       |  3 ++-
 new-dti-website/src/app/page.tsx              |  3 ++-
 new-dti-website/src/app/sponsor/page.tsx      |  2 +-
 11 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/new-dti-website/components/apply/ApplicationTimeline.tsx b/new-dti-website/components/apply/ApplicationTimeline.tsx
index bd8eea46..8cd3bb2b 100644
--- a/new-dti-website/components/apply/ApplicationTimeline.tsx
+++ b/new-dti-website/components/apply/ApplicationTimeline.tsx
@@ -12,11 +12,10 @@ import { extractEndDate, extractEndTime, parseDate } from '../../src/utils/dateU
 type TabProps = {
   isSelected: boolean;
   text: string;
-  tabIndex?: number;
   onClick?: () => void;
 };
 
-const Tab: React.FC<TabProps> = ({ isSelected, text, onClick, tabIndex }) => (
+const Tab: React.FC<TabProps> = ({ isSelected, text, onClick }) => (
   <button
     className={`flex items-center lg:px-5 lg:py-4 md:px-4 md:py-3 xs:px-2 md:rounded-t-xl xs:rounded-t-lg ${
       isSelected ? 'bg-[#FEFEFE] text-[#A52424]' : 'bg-[#7E2222CC] text-[#FEFEFE]'
@@ -25,6 +24,7 @@ const Tab: React.FC<TabProps> = ({ isSelected, text, onClick, tabIndex }) => (
     role="tab"
     tabIndex={isSelected ? 0 : -1}
     aria-selected={isSelected}
+    aria-label="select tab"
   >
     <p className="font-bold lg:text-lg md:text-[13px] xs:text-[10px]" role="tabpanel">
       {text}
diff --git a/new-dti-website/components/apply/ApplyFAQ.tsx b/new-dti-website/components/apply/ApplyFAQ.tsx
index ff7a817b..53815054 100644
--- a/new-dti-website/components/apply/ApplyFAQ.tsx
+++ b/new-dti-website/components/apply/ApplyFAQ.tsx
@@ -26,6 +26,7 @@ const ApplyFAQ = () => {
           section === question ? 'text-[#FEFEFE] bg-[#0C0404]' : ''
         }`}
       onClick={() => setQuestion(section)}
+      aria-label={`select ${section} section`}
     >
       {section}
     </button>
diff --git a/new-dti-website/components/bottom.tsx b/new-dti-website/components/bottom.tsx
index 131f30c4..df93192c 100644
--- a/new-dti-website/components/bottom.tsx
+++ b/new-dti-website/components/bottom.tsx
@@ -13,7 +13,7 @@ const Bottom: React.FC = () => (
           src="/images/teaching_1.svg"
           width={292}
           height={441}
-          alt="teaching 1"
+          alt="teacher presenting slide on ReactJS"
         />
         <div className="flex flex-col h-full w-7/12 gap-y-16">
           <Image
@@ -21,14 +21,14 @@ const Bottom: React.FC = () => (
             src="/images/teaching_2.svg"
             width={276}
             height={179}
-            alt="teachine 2"
+            alt="teacher lecturing in front of architecture diagram"
           />
           <Image
             className="w-3/4 self-end"
             src="/images/teaching_3.svg"
             width={276}
             height={179}
-            alt="teachine 3"
+            alt="students in front of sticky note board"
           />
         </div>
       </div>
@@ -46,7 +46,7 @@ const Bottom: React.FC = () => (
               src="/icons/new_trends.svg"
               width={58}
               height={58}
-              alt="Trends icon"
+              alt="Laptop icon"
             />
             <div className="flex flex-col justify-start w-full items-start">
               <h6 className="text-left w-full font-bold md:text-sm lg:text-[22px]">
@@ -63,7 +63,7 @@ const Bottom: React.FC = () => (
               src="/icons/propel_icon.svg"
               width={58}
               height={63}
-              alt="Propel icon"
+              alt="rocket ship icon"
             />
             <div className="flex flex-col justify-start w-full items-start md:text-xs">
               <h6 className="text-left w-full font-bold md:text-sm lg:text-[22px]">Propel</h6>
@@ -72,7 +72,7 @@ const Bottom: React.FC = () => (
               </p>
             </div>
           </div>
-          <Link href="/courses" className="primary-button">
+          <Link href="/courses" className="primary-button" aria-label="Courses page">
             Learn more
           </Link>
         </div>
@@ -85,7 +85,7 @@ const Bottom: React.FC = () => (
           src="/images/outreach_1.svg"
           width={275}
           height={143}
-          alt="outreach 1"
+          alt="kids stacking boxes at make-a-thon"
         />
         <div className="flex flex-row gap-x-10 w-full h-3/4">
           <Image
@@ -93,14 +93,14 @@ const Bottom: React.FC = () => (
             src="/images/outreach_3.svg"
             width={154}
             height={104}
-            alt="outreach 3"
+            alt="kids being mentored by DTI member"
           />
           <Image
             className="w-1/3 self-start"
             src="/images/outreach_2.svg"
             width={115}
             height={103}
-            alt="outreach 2"
+            alt="students learning Figma from DTI members"
           />
         </div>
       </div>
@@ -128,8 +128,8 @@ const Bottom: React.FC = () => (
         src="/images/team.svg"
         width={377}
         height={286}
-        alt="team"
-      ></Image>
+        alt="team photo"
+      />
       <div className="text-left w-full flex flex-col gap-y-3 md:self-center md:gap-y-5 max-w-[389px]">
         <div className="flex flex-col gap-y-1 md:gap-y-2">
           <p className="text-neutral-200 text-xs font-bold uppercase lg:text-lg">team</p>
diff --git a/new-dti-website/components/course/DDProjects.tsx b/new-dti-website/components/course/DDProjects.tsx
index 992980e7..996dc155 100644
--- a/new-dti-website/components/course/DDProjects.tsx
+++ b/new-dti-website/components/course/DDProjects.tsx
@@ -35,6 +35,7 @@ export default function DDProjects({ title, description, imageSrc }: DDProjectsP
         isOpen ? 'bg-red-500' : 'bg-white'
       } w-full max-w-8xl rounded-xl drop-shadow-sm px-10 py-8 border-1 border-[#E4E4E4]`}
       onClick={toggleCard}
+      aria-label="toggle card"
     >
       <div className="flex justify-between items-center">
         <h3 className={`md:text-3xl text-xl font-bold ${isOpen ? 'text-white' : 'text-black'}`}>
diff --git a/new-dti-website/components/sponsor/SponsorshipTable.tsx b/new-dti-website/components/sponsor/SponsorshipTable.tsx
index 091065dc..e54d661a 100644
--- a/new-dti-website/components/sponsor/SponsorshipTable.tsx
+++ b/new-dti-website/components/sponsor/SponsorshipTable.tsx
@@ -96,7 +96,7 @@ const SponsorshipTableLaptop = () => (
               key={`${benefit.key}-${tier}`}
             >
               {tiers.indexOf(tier) >= tiers.indexOf(benefit.lowestTier) && (
-                <Image src="/icons/check.svg" alt="check" width={30} height={60} />
+                <Image src="/icons/check.svg" alt="checkmark" width={30} height={60} />
               )}
             </div>
           ))}
diff --git a/new-dti-website/components/team/MemberDisplay.tsx b/new-dti-website/components/team/MemberDisplay.tsx
index fb3fc928..1ec8f2c8 100644
--- a/new-dti-website/components/team/MemberDisplay.tsx
+++ b/new-dti-website/components/team/MemberDisplay.tsx
@@ -75,6 +75,7 @@ const MemberDisplay: React.FC = () => {
                     setSelectedRole(role.altText);
                     setSelectedMember(undefined);
                   }}
+                  aria-label={`select ${role.altText} role`}
                 >
                   <Icon
                     icon={`${role.src}_base.svg`}
diff --git a/new-dti-website/components/team/MemberGroup.tsx b/new-dti-website/components/team/MemberGroup.tsx
index 3d84c112..4fe47423 100644
--- a/new-dti-website/components/team/MemberGroup.tsx
+++ b/new-dti-website/components/team/MemberGroup.tsx
@@ -189,6 +189,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
                 onMouseLeave={mouseHandler}
                 className="flex items-center justify-center gap-3 py-3 px-5 bg-white rounded-xl text-[#A52424] border-[3px] border-[#A52424] 
              hover:bg-[#A52424] hover:text-white stroke-white w-max"
+                aria-label={`schedule coffee chat with ${props.firstName} ${props.lastName}`}
               >
                 <Image
                   src="/icons/red_calendar.svg"
@@ -211,11 +212,13 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
         </button>
       </div>
       <div className="md:hidden xs:block">
-        <button
+        <Link
+          href={props.coffeeChatLink ?? `mailto:${props.email}`}
           onMouseEnter={mouseHandler}
           onMouseLeave={mouseHandler}
           className="py-3 px-5 bg-white rounded-xl text-[#A52424] border-[3px] border-[#A52424] 
               hover:bg-[#A52424] hover:text-white stroke-white w-full flex justify-center"
+          aria-label={`schedule coffee chat with ${props.firstName} ${props.lastName}`}
         >
           <div className="flex gap-3 w-max">
             <Image
@@ -227,7 +230,7 @@ export const MemberDetails: React.FC<MemberDetailsProps> = (props: MemberDetails
             />
             <p className="font-bold text-base text-inherit whitespace-nowrap">Chat with me</p>
           </div>
-        </button>
+        </Link>
       </div>
     </Card>
   );
@@ -310,7 +313,11 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
     <div className="flex flex-row justify-center flex-wrap gap-x-14 gap-y-10">
       {members.map((member, index) => (
         <>
-          <button onClick={() => onMemberCardClick(member)} className="memberCard">
+          <button
+            onClick={() => onMemberCardClick(member)}
+            className="memberCard"
+            aria-label={`open ${member.firstName} ${member.lastName}'s details`}
+          >
             <MemberCard
               {...member}
               key={member.netid}
@@ -343,7 +350,11 @@ const MemberGroup: React.FC<MemberGroupProps> = ({
         >
           {members.map((member, index) => (
             <>
-              <button onClick={() => onMemberCardClick(member)} className="memberCard">
+              <button
+                onClick={() => onMemberCardClick(member)}
+                className="memberCard"
+                aria-label={`open ${member.firstName} ${member.lastName}'s details`}
+              >
                 <MemberCard
                   {...member}
                   key={member.netid}
diff --git a/new-dti-website/components/team/TeamHero.tsx b/new-dti-website/components/team/TeamHero.tsx
index 2b40abc4..848edf6b 100644
--- a/new-dti-website/components/team/TeamHero.tsx
+++ b/new-dti-website/components/team/TeamHero.tsx
@@ -47,8 +47,8 @@ const ImageModal: React.FC<ImageModalProps> = ({
         className="flex justify-center items-center h-full gap-[70px] md:scale-75 lg:scale-100"
         onKeyDown={handleKeyDown}
       >
-        <button onClick={handlePrev} ref={modalRef}>
-          <img src="/icons/arrow.svg" alt="left arrow" width={20} className="cursor-pointer" />
+        <button onClick={handlePrev} ref={modalRef} aria-label="navigate to previous photo">
+          <img src="/icons/arrow.svg" alt="" width={20} className="cursor-pointer" />
         </button>
         <Carousel
           opts={{
@@ -172,7 +172,7 @@ const TeamHero = () => {
           className="flex justify-center relative bottom-2 cursor-pointer"
           style={{ pointerEvents: 'none' }}
         >
-          <img src="/images/carousel-frame.png" alt="frame" className="absolute z-10" />
+          <img src="/images/carousel-frame.png" alt="" className="absolute z-10" />
           <div className="absolute z-10 w-[243px] h-[270px]">
             <p className={`absolute bottom-0 py-3 px-2 text-[#877B7B] ${ibm_plex_mono.className}`}>
               {`${carouselImages.images[carouselIndex % carouselLength].alt}.jpg`}
@@ -204,13 +204,14 @@ const TeamHero = () => {
                     onClick={() =>
                       setModalShown(index === carouselIndex && width >= TABLET_BREAKPOINT)
                     }
+                    aria-label="open modal"
                   >
                     <div className="flex justify-center overflow-hidden w-[227px] rounded-md">
                       <img src={image.src} alt={image.alt} className="h-[220px] max-w-none" />
                     </div>
                     <img
                       src={image.icon}
-                      alt="icon"
+                      alt=""
                       width={50}
                       height={50}
                       className="relative bottom-[62px] left-2"
diff --git a/new-dti-website/src/app/course/page.tsx b/new-dti-website/src/app/course/page.tsx
index e29541b7..f8ac93c4 100644
--- a/new-dti-website/src/app/course/page.tsx
+++ b/new-dti-website/src/app/course/page.tsx
@@ -108,7 +108,7 @@ export default function Courses() {
                   src={'/icons/courses/trends_logo.png'}
                   width={450}
                   height={450}
-                  alt="Trends Logo"
+                  alt="Trends Logo composed of the firebase, react, typescript, nodejs, vscode, and DTI logos."
                   unoptimized
                   className="w-72 md:w-96 lg:w-[450px]"
                 />
@@ -142,6 +142,7 @@ export default function Courses() {
                     key="Trends Website"
                     href={config.trendsWebsiteLink}
                     className="primary-button"
+                    aria-label="Trends Website"
                   >
                     Learn More
                   </Link>
diff --git a/new-dti-website/src/app/page.tsx b/new-dti-website/src/app/page.tsx
index 6e31b6b0..87b90f97 100644
--- a/new-dti-website/src/app/page.tsx
+++ b/new-dti-website/src/app/page.tsx
@@ -137,9 +137,10 @@ const Home: React.FC = () => {
             onClick={scrollToContent}
             className={`text-white md:text-lg xs:text-[16px] font-semibold cursor-pointer flex flex-col items-center z-10 ${ibm_plex_mono.className}`}
             style={{ transition: 'all 0.3s ease' }}
+            aria-label="scroll down"
           >
             LEARN MORE
-            <img src="/images/arrow.png" alt="Learn more" className="mt-3 w-auto h-6" />
+            <img src="/images/arrow.png" alt="" className="mt-3 w-auto h-6" />
           </button>
         </div>
       </div>
diff --git a/new-dti-website/src/app/sponsor/page.tsx b/new-dti-website/src/app/sponsor/page.tsx
index da9318b1..7e3f7e22 100644
--- a/new-dti-website/src/app/sponsor/page.tsx
+++ b/new-dti-website/src/app/sponsor/page.tsx
@@ -89,7 +89,7 @@ const SponsorPage = () => {
         <div className="max-w-5xl flex justify-center p-5 py-24 lg:gap-20 md:gap-10 xs:gap-5 md:flex-row xs:flex-col">
           <Image
             src="/images/dti_2024.png"
-            alt="DTI 2024"
+            alt="2024 DTI Team"
             width={width >= LAPTOP_BREAKPOINT ? 475 : 350}
             height={width >= LAPTOP_BREAKPOINT ? 320 : 236}
             className="rounded-3xl object-cover md:w-5/12"

From b824545a23d83f2febae50b165f56b8ae9b0705e Mon Sep 17 00:00:00 2001
From: Andrew Chen <andrew032012@gmail.com>
Date: Sat, 30 Nov 2024 01:33:23 -0500
Subject: [PATCH 2/3] Make Label Clickable with Rest of Icon

---
 .../components/apply/RoleDescription.tsx      | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/new-dti-website/components/apply/RoleDescription.tsx b/new-dti-website/components/apply/RoleDescription.tsx
index f749e18b..7e271116 100644
--- a/new-dti-website/components/apply/RoleDescription.tsx
+++ b/new-dti-website/components/apply/RoleDescription.tsx
@@ -29,7 +29,12 @@ const RoleDescriptions = () => {
           {Object.keys(applications).map((application) => {
             const { icon } = applications[application];
             return (
-              <div className="flex flex-col items-center gap-7" key={application}>
+              <button
+                onClick={() => setRole(application)}
+                aria-label={`Show ${application} questions`}
+                className="flex flex-col items-center gap-7"
+                key={application}
+              >
                 <h3
                   className={`lg:text-[24px] lg:leading-[29px] md:text-[18px] md:leading-[22px] 
                     xs:text-[16px] xs:leading-[19px] ${
@@ -38,20 +43,15 @@ const RoleDescriptions = () => {
                 >
                   {application.charAt(0).toUpperCase() + application.substring(1)}
                 </h3>
-                <button
-                  onClick={() => setRole(application)}
-                  aria-label={`Show ${application} questions`}
-                >
-                  <Image
-                    src={icon.src}
-                    alt=""
-                    width={icon.width}
-                    height={icon.height}
-                    className={`${role === application ? '' : 'brightness-50'}
+                <Image
+                  src={icon.src}
+                  alt=""
+                  width={icon.width}
+                  height={icon.height}
+                  className={`${role === application ? '' : 'brightness-50'}
                       lg:h-[90px] md:h-[73px] xs:h-[44px] w-auto`}
-                  />
-                </button>
-              </div>
+                />
+              </button>
             );
           })}
         </div>

From e654af2cd387212fcfc14257e5bd5f7f631dd889 Mon Sep 17 00:00:00 2001
From: Andrew Chen <andrew032012@gmail.com>
Date: Sat, 30 Nov 2024 01:49:10 -0500
Subject: [PATCH 3/3] Update Alt text on DDprojects and initiatives page
 images, Fix spelling of dac (was named dcc before)

---
 new-dti-website/components/bottom.tsx           |   2 +-
 .../components/course/DDProjects.tsx            |   2 +-
 .../initiatives/data/initiatives.json           |   8 ++++----
 .../components/products/products.json           |  16 ++++++++--------
 .../products/{dcc/dcc1.png => dac/dac1.png}     | Bin
 .../products/{dcc/dcc2.png => dac/dac2.png}     | Bin
 .../products/{dcc/dcc3.png => dac/dac3.png}     | Bin
 .../products/{dcc/dcc4.png => dac/dac4.png}     | Bin
 8 files changed, 14 insertions(+), 14 deletions(-)
 rename new-dti-website/public/images/products/{dcc/dcc1.png => dac/dac1.png} (100%)
 rename new-dti-website/public/images/products/{dcc/dcc2.png => dac/dac2.png} (100%)
 rename new-dti-website/public/images/products/{dcc/dcc3.png => dac/dac3.png} (100%)
 rename new-dti-website/public/images/products/{dcc/dcc4.png => dac/dac4.png} (100%)

diff --git a/new-dti-website/components/bottom.tsx b/new-dti-website/components/bottom.tsx
index df93192c..395b7d69 100644
--- a/new-dti-website/components/bottom.tsx
+++ b/new-dti-website/components/bottom.tsx
@@ -128,7 +128,7 @@ const Bottom: React.FC = () => (
         src="/images/team.svg"
         width={377}
         height={286}
-        alt="team photo"
+        alt="team photo of DTI members"
       />
       <div className="text-left w-full flex flex-col gap-y-3 md:self-center md:gap-y-5 max-w-[389px]">
         <div className="flex flex-col gap-y-1 md:gap-y-2">
diff --git a/new-dti-website/components/course/DDProjects.tsx b/new-dti-website/components/course/DDProjects.tsx
index 996dc155..70129294 100644
--- a/new-dti-website/components/course/DDProjects.tsx
+++ b/new-dti-website/components/course/DDProjects.tsx
@@ -35,7 +35,7 @@ export default function DDProjects({ title, description, imageSrc }: DDProjectsP
         isOpen ? 'bg-red-500' : 'bg-white'
       } w-full max-w-8xl rounded-xl drop-shadow-sm px-10 py-8 border-1 border-[#E4E4E4]`}
       onClick={toggleCard}
-      aria-label="toggle card"
+      aria-label={`${isOpen ? 'Minimize' : 'Expand'} ${title} student project`}
     >
       <div className="flex justify-between items-center">
         <h3 className={`md:text-3xl text-xl font-bold ${isOpen ? 'text-white' : 'text-black'}`}>
diff --git a/new-dti-website/components/initiatives/data/initiatives.json b/new-dti-website/components/initiatives/data/initiatives.json
index 79090203..4068883d 100644
--- a/new-dti-website/components/initiatives/data/initiatives.json
+++ b/new-dti-website/components/initiatives/data/initiatives.json
@@ -10,7 +10,7 @@
     },
     "image": {
       "src": "/images/tcpl.jpg",
-      "alt": "tcpl",
+      "alt": "a DTI member teaching members of the Ithaca community about technology at the Tompkins County Public Library",
       "width": 563,
       "height": 328
     },
@@ -30,7 +30,7 @@
       },
       "image": {
         "src": "/images/half-baked.jpg",
-        "alt": "half-baked",
+        "alt": "a DTI member presenting a series of graphs at the Half-Baked event",
         "width": 373,
         "height": 263
       },
@@ -49,7 +49,7 @@
       },
       "image": {
         "src": "/images/bigredhacks.jpg",
-        "alt": "bigredhacks",
+        "alt": "a DTI member presenting code at the Big Red Hacks hackathon event",
         "width": 344,
         "height": 263
       },
@@ -68,7 +68,7 @@
       },
       "image": {
         "src": "/images/millennium.jpg",
-        "alt": "millennium",
+        "alt": "DTI members posing in front of the Millennium logo",
         "width": 345,
         "height": 260
       },
diff --git a/new-dti-website/components/products/products.json b/new-dti-website/components/products/products.json
index 815e7abf..79bf6634 100644
--- a/new-dti-website/components/products/products.json
+++ b/new-dti-website/components/products/products.json
@@ -128,20 +128,20 @@
       ],
       "images": [
         {
-          "src": "/images/products/dcc/dcc1.png",
-          "alt": "DCC Image 1"
+          "src": "/images/products/dac/dac1.png",
+          "alt": "DAC Image 1"
         },
         {
-          "src": "/images/products/dcc/dcc2.png",
-          "alt": "DCC Image 2",
+          "src": "/images/products/dac/dac2.png",
+          "alt": "DAC Image 2",
           "top": "50%",
           "left": "-7%",
           "width": "47%",
           "direction": "down"
         },
         {
-          "src": "/images/products/dcc/dcc3.png",
-          "alt": "DCC Image 3",
+          "src": "/images/products/dac/dac3.png",
+          "alt": "DAC Image 3",
           "bottom": "11%",
           "right": "-10%",
           "width": "62%",
@@ -149,8 +149,8 @@
           "delay": true
         },
         {
-          "src": "/images/products/dcc/dcc4.png",
-          "alt": "DCC Image 4",
+          "src": "/images/products/dac/dac4.png",
+          "alt": "DAC Image 4",
           "top": "9%",
           "right": "-18%",
           "width": "45%",
diff --git a/new-dti-website/public/images/products/dcc/dcc1.png b/new-dti-website/public/images/products/dac/dac1.png
similarity index 100%
rename from new-dti-website/public/images/products/dcc/dcc1.png
rename to new-dti-website/public/images/products/dac/dac1.png
diff --git a/new-dti-website/public/images/products/dcc/dcc2.png b/new-dti-website/public/images/products/dac/dac2.png
similarity index 100%
rename from new-dti-website/public/images/products/dcc/dcc2.png
rename to new-dti-website/public/images/products/dac/dac2.png
diff --git a/new-dti-website/public/images/products/dcc/dcc3.png b/new-dti-website/public/images/products/dac/dac3.png
similarity index 100%
rename from new-dti-website/public/images/products/dcc/dcc3.png
rename to new-dti-website/public/images/products/dac/dac3.png
diff --git a/new-dti-website/public/images/products/dcc/dcc4.png b/new-dti-website/public/images/products/dac/dac4.png
similarity index 100%
rename from new-dti-website/public/images/products/dcc/dcc4.png
rename to new-dti-website/public/images/products/dac/dac4.png