Splash screen adding

package.json

@@ -41,7 +41,7 @@
     "canvas-confetti": "^1.9.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.31.0",
+    "framer-motion": "^12.33.0",
     "gray-matter": "^4.0.3",
     "gsap": "^3.14.2",
     "highlight.js": "^11.11.1",
@@ -69,8 +69,8 @@
     "@testing-library/react": "^16.3.2",
     "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.11",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "dotenv": "^17.2.3",
     "eslint": "^9.39.2",

src/app/blog/[slug]/page.tsx

@@ -12,8 +12,11 @@ import { BlogContentWrapper } from "@/components/blog/blog-content-wrapper";
 import { BlogPostNavbar } from "@/components/blog/blog-post-navbar";
 import { Footer } from "@/components/footer";
 import { ViewTracker } from "@/components/blog/view-tracker";
-import { generateArticleSchema } from "@/lib/structured-data";
-import { safeJsonLdSerialize, SITE_NAME } from "@/lib/constants";
+import {
+  generateArticleSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/structured-data";
+import { safeJsonLdSerialize, SITE_NAME, SITE_URL } from "@/lib/constants";
 
 /**
  * Collects all blog post slugs to supply route parameters for static generation.
@@ -112,6 +115,20 @@ export default async function BlogPostPage({
           __html: safeJsonLdSerialize(generateArticleSchema(frontmatter, slug)),
         }}
       />
+      <Script
+        id={`blog-breadcrumb-schema-${slug}`}
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateBreadcrumbSchema([
+              { name: "Home", url: SITE_URL },
+              { name: "Blog", url: `${SITE_URL}/blog` },
+              { name: frontmatter.title, url: `${SITE_URL}/blog/${slug}` },
+            ])
+          ),
+        }}
+      />
 
       {/* Site Navigation & Back Header */}
       <BlogPostNavbar />

src/app/blog/page.tsx

@@ -1,8 +1,10 @@
 import { Suspense } from "react";
 import { Metadata } from "next";
+import Script from "next/script";
 import { getAllPosts } from "@/lib/blog";
 import { BlogListClient } from "@/components/blog-list-client";
-import { SITE_NAME } from "@/lib/constants";
+import { generateBreadcrumbSchema } from "@/lib/structured-data";
+import { safeJsonLdSerialize, SITE_NAME, SITE_URL } from "@/lib/constants";
 
 export const metadata: Metadata = {
   title: "Blog",
@@ -22,8 +24,23 @@ export default async function BlogPage() {
   const posts = allPosts.filter((post) => post.published);
 
   return (
-    <Suspense fallback={null}>
-      <BlogListClient posts={posts} />
-    </Suspense>
+    <>
+      <Script
+        id="blog-breadcrumb-schema"
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateBreadcrumbSchema([
+              { name: "Home", url: SITE_URL },
+              { name: "Blog", url: `${SITE_URL}/blog` },
+            ])
+          ),
+        }}
+      />
+      <Suspense fallback={null}>
+        <BlogListClient posts={posts} />
+      </Suspense>
+    </>
   );
 }

src/app/globals.css

@@ -1,8 +1,8 @@
 @import "tailwindcss";
-
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
+  --font-volvox: var(--font-saira-stencil), sans-serif;
   /* Colors - direct values for Tailwind v4 */
   --color-*: initial;
   --color-background: var(--background);
@@ -101,9 +101,9 @@
     --chart-3: oklch(0.398 0.07 227.392);
     --chart-4: oklch(0.828 0.189 84.429);
     --chart-5: oklch(0.769 0.188 70.08);
-    --bg-depth-gradient-from: #3c90ff;
+    --bg-depth-gradient-from: #559fff;
     /* Blue 100 */
-    --bg-depth-gradient-to: #1b73ff;
+    --bg-depth-gradient-to: #3281ff;
     /* Blue 500 */
     --particle-color-1: #2563eb;
     /* Blue 600 */
@@ -256,6 +256,31 @@
     }
   }
 
+  @keyframes custom-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+
+  .animate-fade-in {
+    animation: custom-fade-in 3s 3s ease-out forwards;
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-fade-in {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+  }
+
   * {
     @apply border-border;
   }
@@ -272,6 +297,7 @@
     text-size-adjust: 100%;
     /* Prevent font scaling in landscape on mobile */
     -webkit-text-size-adjust: 100%;
+    scrollbar-gutter: stable;
   }
 
   body {
@@ -285,6 +311,29 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  /* Custom Scrollbar Styling */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-track:hover {
+    background: var(--background);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--primary), transparent 70%);
+    border-radius: 5px;
+    border: 2px solid var(--background);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--primary), transparent 40%);
+  }
+
   /* Custom selection colors for better accessibility and brand consistency */
   ::selection {
     background-color: var(--primary);

src/app/layout.tsx

@@ -1,5 +1,10 @@
 import type { Metadata } from "next";
-import { JetBrains_Mono, Manrope, Space_Grotesk } from "next/font/google";
+import {
+  JetBrains_Mono,
+  Manrope,
+  Space_Grotesk,
+  Saira_Stencil_One,
+} from "next/font/google";
 import "./globals.css";
 import "highlight.js/styles/github-dark.css";
 import { ThemeProvider } from "@/components/providers/theme-provider";
@@ -9,7 +14,10 @@ import { CookieConsentBanner } from "@/components/cookie-consent-banner";
 import { ConditionalAnalytics } from "@/components/conditional-analytics";
 import { SkipLink } from "@/components/skip-link";
 import { SmoothScroll } from "@/components/providers/smooth-scroll";
-import { generateOrganizationSchema } from "@/lib/structured-data";
+import {
+  generateOrganizationSchema,
+  generateWebSiteSchema,
+} from "@/lib/structured-data";
 import {
   safeJsonLdSerialize,
   SITE_URL,
@@ -38,6 +46,13 @@ const spaceGrotesk = Space_Grotesk({
   display: "swap",
 });
 
+const sairaStencilOne = Saira_Stencil_One({
+  subsets: ["latin"],
+  weight: ["400"],
+  variable: "--font-saira-stencil",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
   title: {
@@ -102,9 +117,15 @@ export default function RootLayout({
             __html: safeJsonLdSerialize(generateOrganizationSchema()),
           }}
         />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: safeJsonLdSerialize(generateWebSiteSchema()),
+          }}
+        />
       </head>
       <body
-        className={`${jetbrainsMono.variable} ${manrope.variable} ${spaceGrotesk.variable} antialiased font-sans`}
+        className={`${jetbrainsMono.variable} ${manrope.variable} ${spaceGrotesk.variable} ${sairaStencilOne.variable} antialiased font-sans`}
       >
         <div className="noise" />
         <SmoothScroll>

src/app/privacy/page.tsx

@@ -1,11 +1,14 @@
 import type { Metadata } from "next";
 import Script from "next/script";
 import { PrivacyClient } from "./privacy-client";
-import { generateWebPageSchema } from "@/lib/structured-data";
-import { safeJsonLdSerialize } from "@/lib/constants";
+import {
+  generateWebPageSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/structured-data";
+import { safeJsonLdSerialize, SITE_URL } from "@/lib/constants";
 
 export const metadata: Metadata = {
-  title: "Privacy Policy | Volvox",
+  title: "Privacy Policy",
   description:
     "Privacy Policy for Volvox - Learn how we collect, use, and protect your personal information.",
   alternates: {
@@ -47,6 +50,19 @@ export default function PrivacyPage() {
           __html: safeJsonLdSerialize(jsonLd),
         }}
       />
+      <Script
+        id="privacy-breadcrumb-schema"
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateBreadcrumbSchema([
+              { name: "Home", url: SITE_URL },
+              { name: "Privacy Policy", url: `${SITE_URL}/privacy` },
+            ])
+          ),
+        }}
+      />
       <PrivacyClient />
     </>
   );

src/app/products/[slug]/page.tsx

@@ -1,10 +1,16 @@
 import { Metadata } from "next";
+import Script from "next/script";
 import { notFound } from "next/navigation";
 import {
   getAllExtendedProducts,
   getExtendedProductBySlug,
 } from "@/lib/content";
 import { ProductDetailClient } from "./product-detail-client";
+import {
+  generateBreadcrumbSchema,
+  generateSoftwareApplicationSchema,
+} from "@/lib/structured-data";
+import { safeJsonLdSerialize, SITE_URL } from "@/lib/constants";
 
 /**
  * Disable dynamic params to only allow known product slugs.
@@ -77,5 +83,33 @@ export default async function ProductPage({
     notFound();
   }
 
-  return <ProductDetailClient product={product} />;
+  return (
+    <>
+      <Script
+        id={`product-breadcrumb-schema-${slug}`}
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateBreadcrumbSchema([
+              { name: "Home", url: SITE_URL },
+              { name: "Products", url: `${SITE_URL}/products` },
+              { name: product.name, url: `${SITE_URL}/products/${slug}` },
+            ])
+          ),
+        }}
+      />
+      <Script
+        id={`product-software-schema-${slug}`}
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateSoftwareApplicationSchema(product)
+          ),
+        }}
+      />
+      <ProductDetailClient product={product} />
+    </>
+  );
 }

src/app/products/page.tsx

@@ -1,8 +1,10 @@
 import { Suspense } from "react";
 import { Metadata } from "next";
+import Script from "next/script";
 import { getAllExtendedProducts } from "@/lib/content";
 import { ProductsListClient } from "@/components/products-list-client";
-import { SITE_NAME } from "@/lib/constants";
+import { generateBreadcrumbSchema } from "@/lib/structured-data";
+import { safeJsonLdSerialize, SITE_NAME, SITE_URL } from "@/lib/constants";
 
 export const metadata: Metadata = {
   title: "Products",
@@ -21,8 +23,23 @@ export default function ProductsPage() {
   const products = getAllExtendedProducts();
 
   return (
-    <Suspense fallback={null}>
-      <ProductsListClient products={products} />
-    </Suspense>
+    <>
+      <Script
+        id="products-breadcrumb-schema"
+        type="application/ld+json"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLdSerialize(
+            generateBreadcrumbSchema([
+              { name: "Home", url: SITE_URL },
+              { name: "Products", url: `${SITE_URL}/products` },
+            ])
+          ),
+        }}
+      />
+      <Suspense fallback={null}>
+        <ProductsListClient products={products} />
+      </Suspense>
+    </>
   );
 }