Enhance layout and styling for Anti-Fingerprinting Shield Plus page

- Updated the layout structure to utilize a new PageLayout component for better organization.
- Introduced new Hero, Content, and CallToAction components to improve the visual presentation and user engagement.
- Added glassmorphism styles for enhanced aesthetics and readability.
- Implemented accessibility features, including a "Skip to main content" link for improved navigation.
- Refactored the RocketChat livechat initialization to remove unnecessary console logs, enhancing performance and user experience.

src/pages/[lang]/aboutme.astro

@@ -152,6 +152,16 @@ const metadata = {
     }
   }
 
+  /* Reduce motion and heavy effects on mobile */
+  @media (max-width: 768px) {
+    .animated-hero-bg { animation: none; background-size: 200% 200%; }
+    .floating-elements { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated-hero-bg { animation: none; }
+    .floating-shape { animation: none; }
+  }
+
   /* Enhanced glassmorphism effects for all sections */
   :global(.glass-enhanced) {
     background: rgba(255, 255, 255, 0.95) !important;

src/pages/[lang]/index.astro

@@ -45,6 +45,19 @@ const metadata = {
     overflow: hidden;
   }
 
+  /* Prefer reduced motion and mobile fallback for heavy animation */
+  @media (max-width: 768px) {
+    .hero-explosive {
+      animation: none;
+      background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
+    }
+    .floating-orbs { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero-explosive { animation: none; }
+    .orb { animation: none; }
+  }
+
   /* Floating orbs with vivid colors */
   .floating-orbs {
     position: absolute;
@@ -490,8 +503,6 @@ const metadata = {
           variant: 'primary',
           text: explosive.actions.learnMore,
           href: '#services',
-          
-          variant: 'primary'
         },
         { 
           text: explosive.actions.contactMe,

src/pages/[lang]/topdesk.astro

@@ -147,6 +147,16 @@ const metadata = {
     }
   }
 
+  /* Mobile and reduced-motion fallbacks for heavy visuals */
+  @media (max-width: 768px) {
+    .animated-hero-bg { animation: none; background-size: 200% 200%; }
+    .floating-elements { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated-hero-bg { animation: none; }
+    .floating-shape { animation: none; }
+  }
+
   /* Enhanced glassmorphism effects for all sections */
   :global(.glass-enhanced) {
     background: rgba(255, 255, 255, 0.95) !important;

src/pages/antifp.astro

@@ -1,23 +1,66 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '~/layouts/PageLayout.astro';
+import Hero from '~/components/widgets/Hero.astro';
+import Content from '~/components/widgets/Content.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
+import Image from '~/components/common/Image.astro';
+import type { MetaData } from '~/types';
+
+const metadata: MetaData = {
+  title: 'Anti‑Fingerprinting Shield Plus | Userscript Overview',
+  description: 'Enhance privacy by blocking or spoofing browser fingerprinting techniques. Works with Tampermonkey and Violentmonkey.',
+};
 ---
 
-<Layout>
-  <div class="max-w-3xl mx-auto px-4 py-8">
-    <h1 class="text-3xl font-bold mb-4">Anti-Fingerprinting Shield Plus</h1>
-    <p class="mb-4">
-      <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">View on GreasyFork</a>
-    </p>
-    <p class="mb-6">
-      <strong>Anti-Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques. It works on a wide range of sites and is compatible with popular script managers like Tampermonkey and Violentmonkey.
-    </p>
-    <h2 class="text-xl font-semibold mb-2">How to Install</h2>
-    <ol class="list-decimal list-inside mb-6">
-      <li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
-      <li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">Anti-Fingerprinting Shield Plus GreasyFork page</a>.</li>
-      <li>Click the "Install this script" button.</li>
-      <li>Follow the prompts to add the script to your userscript manager.</li>
-    </ol>
-    <p class="text-gray-600">For more details and updates, visit the GreasyFork page linked above.</p>
+<Layout metadata={metadata}>
+  <Hero id="hero" isDark={false}>
+    <Fragment slot="title">
+      <span class="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Anti‑Fingerprinting Shield Plus</span>
+    </Fragment>
+    <Fragment slot="subtitle">
+      <p class="subtitle-responsive text-muted">Userscript to reduce browser fingerprinting by blocking or spoofing common techniques. Compatible with Tampermonkey and Violentmonkey.</p>
+    </Fragment>
+  </Hero>
+
+  <div class="max-w-5xl mx-auto p-4 md:px-8">
+    <Content id="overview" columns={2} items={[]}
+      classes={{ container: 'glass-strong', content: '' }}
+      image={{ src: '~/assets/images/HomepageIntroImage.webp', alt: 'Privacy protection illustration', loading: 'lazy' }}>
+      <Fragment slot="content">
+        <div class="space-y-4">
+          <p>
+            <strong>Anti‑Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques across a wide range of websites.
+          </p>
+          <p>
+            It is lightweight and works seamlessly with popular userscript managers.
+          </p>
+          <div class="grid sm:grid-cols-2 gap-3 mt-4">
+            {['Blocks canvas and WebGL probes','Masks audio and font entropy','Randomizes non-essential signals','Minimal performance impact'].map((item) => (
+              <div class="card-panel flex items-start gap-2">
+                <span class="text-green-600 mt-0.5">✓</span>
+                <span class="text-sm text-gray-700 dark:text-slate-300">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Fragment>
+    </Content>
+
+    <Content id="install" columns={1} items={[]} classes={{ container: 'glass', content: '' }}>
+      <Fragment slot="content">
+        <h2 class="text-2xl font-bold mb-3">How to Install</h2>
+        <ol class="list-decimal list-inside space-y-2 text-gray-700 dark:text-slate-300">
+          <li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
+          <li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 underline">Anti‑Fingerprinting Shield Plus on GreasyFork</a>.</li>
+          <li>Click the "Install this script" button and confirm.</li>
+          <li>Reload target websites to apply protections.</li>
+        </ol>
+      </Fragment>
+    </Content>
+
+    <CallToAction callToAction={{ text: 'View on GreasyFork', href: 'https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus', icon: 'tabler:external-link', variant: 'primary' }}>
+      <Fragment slot="title">Try the userscript now</Fragment>
+      <Fragment slot="subtitle">Open-source, actively maintained, and easy to install.</Fragment>
+    </CallToAction>
   </div>
-</Layout> 
+</Layout>