performance optimizations

src/components/HeroButtons.tsx

@@ -16,17 +16,22 @@ const HeroButtons: FC<TProps> = (props) => {
       className={cn('flex items-center justify-center gap-4 w-full', className)}
     >
       <a
-        href="https://portal.trial.low-ops.com/"
+        href="https://hub.cinaq.com/low-ops-trial"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Button variant="secondary" size="lg" onClick={onClick}>
+        <Button
+          variant="secondary"
+          size="lg"
+          onClick={onClick}
+          aria-label="Show demo"
+        >
           <LinkExternal02 width={18} height={18} className="mr-2" />
           Demo
         </Button>
       </a>
       <a href="#contact-us">
-        <Button size="lg" onClick={onClick}>
+        <Button size="lg" onClick={onClick} aria-label="Contact us">
           Contact us
         </Button>
       </a>

src/components/SectionTitle.tsx

@@ -10,7 +10,7 @@ const SectionTitle: FC<TProps> = (props) => {
 
   return (
     <div className="prose md:prose-md">
-      {!!title && <h2 className="text-center text-blue-500">{title}</h2>}
+      {!!title && <h2 className="text-center text-blue-700">{title}</h2>}
       <p className="text-center text-3xl md:text-4xl font-semibold leading-[32px] md:leading-[44px]">
         {description}
       </p>

src/components/header/AppLogo.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 const AppLogo = () => {
   return (
     <a href="#hero">
-      <Image src={logo} alt="lowops-logo" width={110} height={32} />
+      <Image src={logo} alt="lowops-logo" width={110} />
     </a>
   );
 };

src/components/header/MobileHeaderNav.tsx

@@ -42,6 +42,7 @@ const MobileHeaderNav = () => {
         variant="ghost"
         size="icon"
         className="flex md:hidden"
+        aria-label="Open menu"
       >
         <Menu01 width={28} height={28} />
       </Button>
@@ -54,7 +55,12 @@ const MobileHeaderNav = () => {
         <div>
           <div className="flex items-center justify-between p-4">
             <AppLogo />
-            <Button variant="ghost" size="icon" onClick={handleToggle}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleToggle}
+              aria-label="Close menu"
+            >
               <XClose />
             </Button>
           </div>

src/components/ui/carousel.tsx

@@ -208,8 +208,7 @@ const CarouselDots = React.forwardRef<
     >
       {items.map((_, i) => (
         <Button
-          title="Carousel dots"
-          aria-label="Carousel dots"
+          aria-label="Testimonials switch"
           key={i}
           className={cn(
             'w-[10px] h-[10px] rounded-full block shadow-none p-0',

src/hooks/useMediaQuery.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}

src/sections/faq/FaqSection.tsx

@@ -39,7 +39,7 @@ const FaqSection: React.FC = () => {
             Can’t find the answer you’re looking for?
           </p>
           <a href="#contact-us">
-            <Button className="w-fit" size="default">
+            <Button className="w-fit" size="default" aria-label="Contact us">
               Contact us
             </Button>
           </a>

src/sections/form/FormSection.tsx

@@ -68,7 +68,9 @@ const FormSection: React.FC = () => {
             />
           </div>
 
-          <Button type="submit">Send message</Button>
+          <Button type="submit" aria-label="Send message">
+            Send message
+          </Button>
         </form>
       </div>
     </section>

src/sections/hero/HeroImage.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import heroMobileImage from '@/assets/hero-mobile.webp';
+import heroImage from '@/assets/hero.webp';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import Image from 'next/image';
+
+const HeroImage = () => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  return isDesktop ? (
+    <Image
+      src={heroImage}
+      alt="lowops-portal-screen"
+      quality={80}
+      width={1400}
+      height={788}
+      priority
+      className="w-full mx-auto hidden md:block"
+    />
+  ) : (
+    <Image
+      src={heroMobileImage}
+      alt="lowops-portal-screen"
+      quality={80}
+      width={800}
+      height={450}
+      priority
+      className="w-full mx-auto block md:hidden"
+    />
+  );
+};
+
+export default HeroImage;

src/sections/hero/HeroSection.tsx

@@ -1,8 +1,7 @@
-import heroImage from '@/assets/hero.webp';
 import HeroButtons from '@/components/HeroButtons';
 import { cn } from '@/lib/utils';
-import Image from 'next/image';
 import { FC } from 'react';
+import HeroImage from './HeroImage';
 
 const HeroSection: FC = () => {
   return (
@@ -27,14 +26,8 @@ const HeroSection: FC = () => {
 
         <HeroButtons className="mb-10 md:mb-20" />
       </div>
-      <Image
-        src={heroImage}
-        alt="lowops-portal-screen"
-        quality={100}
-        objectFit="cover"
-        priority
-        className="max-w-[1400px] w-full mx-auto"
-      />
+
+      <HeroImage />
     </section>
   );
 };

src/sections/testimonials/TestimonialsCarousel.tsx

@@ -31,8 +31,8 @@ const TestimonialsCarousel = () => {
                 <User01 width={28} height={28} className="text-gray-500" />
               </AvatarFallback>
             </Avatar>
-            <h4>{testimonial.author}</h4>
-            <h5 className="text-sm font-light">{testimonial.company}</h5>
+            <p className="font-semibold m-0 text-base">{testimonial.author}</p>
+            <p className="text-sm font-light m-0">{testimonial.company}</p>
           </div>
         </div>
       </CarouselItem>