fix: address Copilot review feedback

- Fix Twitter URL to use @keaboratory for consistency
- Add ariaLabel prop to Timeline components for reusability
- Pass custom ariaLabel from PublishingFlowSection

Signed-off-by: Gauarv Chaudhary <[email protected]>

Author: ANAMASGARD

src/app/page.tsx

@@ -43,7 +43,7 @@ export default function Home() {
                                     <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
                                 </svg>
                             </a>
-                            <a href="https://twitter.com/Keployio" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-[#F89559] transition-colors" aria-label="Twitter">
+                            <a href="https://twitter.com/keaboratory" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-[#F89559] transition-colors" aria-label="Twitter">
                                 <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
                                     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                                 </svg>

src/app/publishing-flow/page.tsx

@@ -59,7 +59,7 @@ export default function PublishingFlowPage() {
                                 </svg>
                             </a>
                             <a
-                                href="https://twitter.com/Keployio"
+                                href="https://twitter.com/keaboratory"
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className="text-gray-400 hover:text-[#F89559] transition-colors"

src/components/sections/PublishingFlowSection.tsx

@@ -92,15 +92,16 @@ export function PublishingFlowSection() {
                 <div className="mb-20">
                     {/* Desktop Horizontal Timeline */}
                     <div className="hidden lg:block">
-                        <HorizontalTimeline steps={publishingSteps} />
+                        <HorizontalTimeline steps={publishingSteps} ariaLabel="Blog publishing workflow steps" />
                     </div>
 
                     {/* Mobile/Tablet Vertical Timeline */}
                     <div className="lg:hidden max-w-xl mx-auto">
-                        <Timeline steps={publishingSteps} />
+                        <Timeline steps={publishingSteps} ariaLabel="Blog publishing workflow steps" />
                     </div>
                 </div>
 
+
                 {/* CTA Section - Keploy Theme with Stars */}
                 <div className="max-w-4xl mx-auto">
                     <div

src/components/ui/timeline.tsx

@@ -13,6 +13,7 @@ export interface TimelineStep {
 interface TimelineProps {
     steps: TimelineStep[];
     className?: string;
+    ariaLabel?: string;
 }
 
 interface TimelineItemProps {
@@ -25,12 +26,12 @@ interface TimelineItemProps {
  * Clean, professional Timeline component for displaying step-by-step workflows.
  * Uses white theme with orange accents.
  */
-export function Timeline({ steps, className }: TimelineProps) {
+export function Timeline({ steps, className, ariaLabel = "Workflow steps" }: TimelineProps) {
     return (
         <div
             className={cn("relative", className)}
             role="list"
-            aria-label="Blog publishing workflow steps"
+            aria-label={ariaLabel}
         >
             {steps.map((step, index) => (
                 <TimelineItem
@@ -44,6 +45,7 @@ export function Timeline({ steps, className }: TimelineProps) {
     );
 }
 
+
 function TimelineItem({ step, index, isLast }: TimelineItemProps) {
     return (
         <div
@@ -92,7 +94,7 @@ function TimelineItem({ step, index, isLast }: TimelineItemProps) {
 /**
  * Horizontal Timeline for desktop - Clean card-based design
  */
-export function HorizontalTimeline({ steps, className }: { steps: TimelineStep[], className?: string }) {
+export function HorizontalTimeline({ steps, className, ariaLabel = "Workflow steps" }: { steps: TimelineStep[], className?: string, ariaLabel?: string }) {
     return (
         <div className={cn("relative", className)}>
             {/* Connector line */}
@@ -104,8 +106,9 @@ export function HorizontalTimeline({ steps, className }: { steps: TimelineStep[]
             <div
                 className="grid grid-cols-5 gap-4"
                 role="list"
-                aria-label="Blog publishing workflow steps"
+                aria-label={ariaLabel}
             >
+
                 {steps.map((step, index) => (
                     <div
                         key={step.id}