Optimize image loading in components

.babelrc

@@ -1,4 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": ["./babel/disable-nextjs-link-prefetching"]
-}

babel/disable-nextjs-link-prefetching.js

@@ -1,26 +0,0 @@
-/**
- * Based on the docs at https://nextjs.org/docs/api-reference/next/link, the
- * only way to disable prefetching is to make sure every <Link /> has <Link
- * prefetch={false} />
- *
- * We don't want to create a wrapper Component or go around changing every
- * single <Link />, so we use this Babel Plugin to add them in at build-time.
- */
-module.exports = function (babel) {
-    const { types: t } = babel
-    return {
-      name: 'disable-link-prefetching',
-      visitor: {
-        JSXOpeningElement(path) {
-          if (path.node.name.name === 'Link') {
-            path.node.attributes.push(
-              t.jSXAttribute(
-                t.jSXIdentifier('prefetch'),
-                t.stringLiteral("force-off"),
-              ),
-            )
-          }
-        },
-      },
-    }
-  }

src/app/release-notes/[version]/page.tsx

@@ -24,11 +24,11 @@ export default function ReleaseNotePage({ params }: { params: { version: string
       <main className="flex min-h-screen flex-col items-center justify-center">
         <div className="h-screen flex flex-wrap items-center justify-center">
           <h1 className="text-4xl font-bold mt-12">Release note not found</h1>
-          <Link href="/release-notes">
+          <a href="/release-notes">
             <Button className="mt-4 items-center justify-center">
               Back to release notes
             </Button>
-          </Link>
+          </a>
         </div>
         <Footer />
         <Navigation /> {/* At the bottom of the page */}

src/app/release-notes/page.tsx

@@ -12,7 +12,7 @@ export default function ReleaseNotes() {
         <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
         <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
           {releaseNotes.map((releaseNote) => (
-            <Link href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>
+            <a href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>
               <div className="text-md font-medium mb-5">
                 {releaseNote.version}
               </div>
@@ -24,7 +24,7 @@ export default function ReleaseNotes() {
                   Alpha Release
                 </div>
               )}
-            </Link>
+            </a>
           ))}
         </div>
       </div>

src/components/download.tsx

@@ -219,16 +219,16 @@ export default function DownloadPage() {
                 web with Zen!
               </p>
               <div className="flex font-bold mt-5 items-center justify-between mx-auto">
-                <Link href="https://github.com/zen-browser">Source Code</Link>
+                <a href="https://github.com/zen-browser">Source Code</a>
                 <Link
                   className="ml-5"
                   href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
                 >
                   Donate
-                </Link>
+                </a>
-                <Link className="ml-5" href="/release-notes/latest">
+                <a className="ml-5" href="/release-notes/latest">
                   Release Notes
-                </Link>
+                </a>
               </div>
               {selectedPlatform === "MacOS" && (
                 <div className="mt-12 flex flex-col items-start border justify-between rounded-md bg-background p-5">
@@ -557,7 +557,7 @@ export default function DownloadPage() {
                     className="text-blue-400"
                   >
                     System requirements
-                  </Link>
+                  </a>
                   .
                 </p>
               </div>

src/components/features.tsx

@@ -150,11 +150,11 @@ export default function Features() {
                   </a>
                 </p>
               </div>
-              <Link href="/download">
+              <a href="/download">
                 <Button className="mt-4 rounded-full p-5 ml-auto">
                   Download Zen now!
                 </Button>
-              </Link>
+              </a>
             </div>
             <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
               {COLORS.map((color) => (
@@ -190,11 +190,11 @@ export default function Features() {
                   Killer feature
                 </div>
               </div>
-              <Link href="/download">
+              <a href="/download">
                 <Button className="mt-4 rounded-full p-5 ml-4">
                   Download Zen now!
                 </Button>
-              </Link>
+              </a>
             </div>
             <img
               src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png"

src/components/footer.tsx

@@ -12,7 +12,7 @@ export default function Footer() {
         className="mt-5 md:mt-0 md:ml-2 font-bold"
       >
         Source Code
-      </Link>
+      </a>
     </div>
   );
 }

src/components/header.tsx

@@ -20,7 +20,7 @@ export default function Header() {
         id="hero"
         className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
       >
-        <Link href="/download">
+        <a href="/download">
           <AnimatedGradientText>
             🎉 <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />{" "}
             <span
@@ -32,7 +32,7 @@ export default function Header() {
             </span>
             <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
           </AnimatedGradientText>
-        </Link>
+        </a>
         <h1 className="animate-fade-in -translate-y-4 text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-8xl dark:from-white dark:to-white/40">
           Zen is the best way
           <br className="hidden md:block" /> to browse the web.
@@ -42,14 +42,14 @@ export default function Header() {
           <br className="hidden md:block" /> We care about your experience, not
           your data.
         </p>
-        <Link href="/download">
+        <a href="/download">
         <Button
           className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
         >
           <span>Download Zen Now </span>
           <ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
         </Button>
-        </Link>
+        </a>
         <div
           ref={ref}
           className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"

src/components/mobile-nav.tsx

@@ -104,6 +104,6 @@ function MobileLink({
          {...props}
       >
          {children}
-      </Link>
+      </a>
    )
 }

src/components/navigation.tsx

@@ -76,7 +76,7 @@ export function Navigation() {
                         Firefox based browser with a focus on privacy and
                         customization.
                       </p>
-                    </Link>
+                    </a>
                   </NavigationMenuLink>
                 </li>
                 <ListItem href="/download" title="Download">

src/components/release-note.tsx

@@ -20,7 +20,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
             className="text-underline text-blue-500"
           >
             the issues page
-          </Link>
+          </a>
           . Thanks everyone for your feedback! ❤️
         </p>
         {data.extra && (
@@ -87,7 +87,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
                       className="ml-1 text-blue-500"
                     >
                       issue #{fix.issue}
-                    </Link>
+                    </a>
                   )}
                 </li>
               ))}
@@ -96,9 +96,9 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
         )}
       </div>
       <div className="flex flex-wrap items-center justify-center">
-        <Link href="/download">
+        <a href="/download">
           <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
-        </Link>
+        </a>
       </div>
     </div>
   );