diff --git a/src/components/homepage-client.tsx b/src/components/homepage-client.tsx
index 892ebc8..ea9438b 100644
--- a/src/components/homepage-client.tsx
+++ b/src/components/homepage-client.tsx
@@ -10,6 +10,7 @@ import { Blog } from "@/components/blog";
import { Mentorship } from "@/components/mentorship";
import { About } from "@/components/about";
import { Footer } from "@/components/footer";
+import { IntroSection } from "@/components/intro-section";
import { AnimatedBackground } from "@/components/animated-background";
import type { BlogPost, TeamMember, ExtendedProduct } from "@/lib/types";
@@ -38,11 +39,22 @@ export function HomepageClient({
products,
}: HomepageClientProps) {
const [currentSection, setCurrentSection] = useState("home");
+ const [pendingHash, setPendingHash] = useState
(null);
+ const [introFinished, setIntroFinished] = useState(false);
const router = useRouter();
+ // Memoize callback to prevent unnecessary effect re-runs in IntroSection
+ const handleIntroComplete = useCallback(() => setIntroFinished(true), []);
+
const handleNavigate = useCallback(
(section: string) => {
+ // Defer navigation if intro is still playing
+ if (!introFinished && section !== "home") {
+ setPendingHash(section);
+ return;
+ }
+
setCurrentSection(section);
if (section === "home") {
@@ -53,7 +65,7 @@ export function HomepageClient({
if (element) {
const offset = 80;
const elementPosition = element.getBoundingClientRect().top;
- const offsetPosition = elementPosition + window.pageYOffset - offset;
+ const offsetPosition = elementPosition + window.scrollY - offset;
window.scrollTo({
top: offsetPosition,
@@ -63,15 +75,17 @@ export function HomepageClient({
}
}
},
- [router]
+ [router, introFinished]
);
- // Handle URL hash on initial load
+ // Handle URL hash on initial load or intro completion
useEffect(() => {
- const hash = window.location.hash.slice(1); // Remove the '#'
+ if (!introFinished) return;
+
+ const hash = pendingHash || window.location.hash.slice(1);
if (hash) {
const startTime = performance.now();
- const timeout = 2000; // 2 seconds timeout
+ const timeout = 2000;
let animationFrameId: number | undefined;
const checkAndScroll = () => {
@@ -80,13 +94,11 @@ export function HomepageClient({
handleNavigate(hash);
} else if (performance.now() - startTime < timeout) {
animationFrameId = requestAnimationFrame(checkAndScroll);
- } else {
- console.warn(
- `Volvox: Could not find element with id '${hash}' to scroll to.`
- );
}
};
+ // Clear pendingHash synchronously to prevent re-entry
+ if (pendingHash) setPendingHash(null);
animationFrameId = requestAnimationFrame(checkAndScroll);
return () => {
@@ -95,7 +107,7 @@ export function HomepageClient({
}
};
}
- }, [handleNavigate]);
+ }, [introFinished, pendingHash, handleNavigate]);
useEffect(() => {
const handleScroll = () => {
@@ -139,7 +151,9 @@ export function HomepageClient({
/>
+
+
diff --git a/src/components/intro-section.tsx b/src/components/intro-section.tsx
new file mode 100644
index 0000000..0094c2f
--- /dev/null
+++ b/src/components/intro-section.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+ motion,
+ AnimatePresence,
+ useScroll,
+ useTransform,
+ Variants,
+} from "framer-motion";
+import { cn } from "@/lib/utils";
+import { reportError } from "@/lib/logger";
+
+// Entrance variants for the SVG container
+const svgContainerVariants: Variants = {
+ hidden: {
+ opacity: 0,
+ y: 40,
+ filter: "blur(10px)",
+ },
+ visible: {
+ opacity: 1,
+ y: 0,
+ filter: "blur(0px)",
+ transition: {
+ duration: 1.5,
+ ease: [0.19, 1, 0.22, 1], // Fluid cinematic ease
+ delay: 0.2,
+ },
+ },
+};
+
+interface IntroSectionProps {
+ onComplete?: () => void;
+}
+
+export function IntroSection({ onComplete }: IntroSectionProps) {
+ const [phase, setPhase] = useState<"text" | "interactive">("text");
+ const [isDark, setIsDark] = useState(false);
+ const [logoFinished, setLogoFinished] = useState(false);
+ const [isVisible, setIsVisible] = useState(false);
+ const containerRef = useRef(null);
+ const onCompleteRef = useRef(onComplete);
+
+ // Sync ref when onComplete changes
+ useEffect(() => {
+ onCompleteRef.current = onComplete;
+ }, [onComplete]);
+
+ // Scroll locking & transition control refs
+ const didLockRef = useRef(false);
+ const originalOverflowRef = useRef("");
+ const isSkippingRef = useRef(false);
+
+ const unlockScroll = useCallback(() => {
+ if (didLockRef.current) {
+ document.body.style.overflow = originalOverflowRef.current;
+ didLockRef.current = false;
+ }
+ }, []);
+
+ const handleComplete = useCallback(() => {
+ if (isSkippingRef.current) return;
+ isSkippingRef.current = true;
+
+ unlockScroll();
+ setPhase("interactive");
+ setIsVisible(false);
+ onCompleteRef.current?.();
+ }, [unlockScroll]);
+
+ // Initial check for skip conditions
+ useEffect(() => {
+ if (typeof window === "undefined") return;
+
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+ const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(
+ navigator.userAgent
+ );
+
+ if (isBot || mediaQuery.matches) {
+ // Immediate skip
+ requestAnimationFrame(() => {
+ setPhase("interactive");
+ onCompleteRef.current?.();
+ });
+ } else {
+ // Show intro and lock scroll
+ requestAnimationFrame(() => {
+ setIsVisible(true);
+ setIsDark(document.documentElement.classList.contains("dark"));
+ });
+ originalOverflowRef.current = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ didLockRef.current = true;
+ }
+
+ return () => unlockScroll();
+ }, [unlockScroll]); // Stable - runs once on mount
+
+ // Safety hang timeout
+ useEffect(() => {
+ if (phase !== "text") return;
+
+ const safetyTimer = setTimeout(() => {
+ if (!isSkippingRef.current) {
+ handleComplete();
+ }
+ }, 10000); // 10s fallback
+
+ return () => clearTimeout(safetyTimer);
+ }, [phase, handleComplete]);
+
+ // Scroll animations for exit
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ["start start", "end start"],
+ });
+
+ const scale = useTransform(scrollYProgress, [0, 1], [1, 0.9]);
+ const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
+ const blur = useTransform(scrollYProgress, [0, 0.4], ["0px", "10px"]);
+ const y = useTransform(scrollYProgress, [0, 1], ["0%", "-10%"]);
+
+ const videoSrc = isDark ? "/animated-logo.webm" : "/animated-logo-white.mp4";
+
+ if (!isVisible && phase === "interactive") return null;
+
+ return (
+
+ {/* Background Gradient / Vignette for depth */}
+
+
+
+ {/* Logo Video - Decorative */}
+
+
+ {!logoFinished ? (
+ setLogoFinished(true)}
+ onError={(e) => {
+ reportError("IntroSection video failure", e);
+ setLogoFinished(true);
+ }}
+ initial={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ transition={{ duration: 0.5 }}
+ className={cn(
+ "w-full h-full object-contain pointer-events-none select-none",
+ isDark && "mix-blend-screen brightness-90 contrast-125"
+ )}
+ role="presentation"
+ aria-hidden="true"
+ />
+ ) : (
+
+ )}
+
+
+
+ {/* Stencil SVG Typography - Decorative */}
+
+
+
+
+
+ );
+}
diff --git a/src/components/splash-screen.tsx b/src/components/splash-screen.tsx
new file mode 100644
index 0000000..9468549
--- /dev/null
+++ b/src/components/splash-screen.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useEffect, useRef, useSyncExternalStore } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { reportError } from "@/lib/logger";
+import { cn } from "@/lib/utils";
+
+/**
+ * Hook to detect user's reduced motion preference with proper SSR handling.
+ * Uses useSyncExternalStore to avoid hydration mismatches.
+ *
+ * Server snapshot returns true to avoid showing animations during hydration.
+ */
+function usePrefersReducedMotion(): boolean {
+ return useSyncExternalStore(
+ (callback) => {
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+ mediaQuery.addEventListener("change", callback);
+ return () => mediaQuery.removeEventListener("change", callback);
+ },
+ () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+ () => true // Server snapshot: assume reduced motion to be safe
+ );
+}
+
+export function SplashScreen(): React.ReactElement | null {
+ const prefersReducedMotion = usePrefersReducedMotion();
+ // Track whether splash has been dismissed (separate from reduced motion)
+ const [isDismissed, setIsDismissed] = useState(false);
+ const [showVideo, setShowVideo] = useState(false);
+ const videoRef = useRef(null);
+
+ // Derive visibility from preference and dismissal state
+ const isVisible = !prefersReducedMotion && !isDismissed;
+
+ // Timer refs to allow precise clearing
+ const initialTimerRef = useRef(null);
+ const dismissTimerRef = useRef(null);
+ const fallbackTimerRef = useRef(null);
+ // Store original overflow value and tracking flag
+ const originalOverflowRef = useRef("");
+ const didLockRef = useRef(false);
+
+ const dismissSplash = () => {
+ setIsDismissed(true);
+ // Ensure all timers are cleared when dismissing
+ if (initialTimerRef.current) clearTimeout(initialTimerRef.current);
+ if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+ if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
+ };
+
+ useEffect(() => {
+ // If reduced motion is preferred, splash is already hidden via initial state
+ if (!isVisible) return;
+
+ // Local dismiss function to avoid stale closure issues
+ const dismiss = () => {
+ setIsDismissed(true);
+ if (initialTimerRef.current) clearTimeout(initialTimerRef.current);
+ if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+ if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
+ };
+
+ // Phase 1: 1.5s delay before video appears
+ initialTimerRef.current = setTimeout(() => {
+ setShowVideo(true);
+
+ // Robustness: Start a max-duration fallback timer once we intend to show the video.
+ // If the video fails to load or the 'ended' event doesn't fire, we still dismiss.
+ fallbackTimerRef.current = setTimeout(() => {
+ dismiss();
+ }, 10000);
+ }, 1500);
+
+ return () => {
+ if (initialTimerRef.current) clearTimeout(initialTimerRef.current);
+ if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+ if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
+ };
+ }, [isVisible]);
+
+ useEffect(() => {
+ // Prevent scrolling while splash screen is visible
+ if (isVisible && !didLockRef.current) {
+ // Store original overflow value before modifying
+ originalOverflowRef.current = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ didLockRef.current = true;
+ }
+
+ return () => {
+ // Restore original overflow on cleanup or hide, ONLY if we previously locked it
+ if (didLockRef.current) {
+ document.body.style.overflow = originalOverflowRef.current;
+ didLockRef.current = false;
+ }
+ };
+ }, [isVisible]);
+
+ const handleVideoEnd = () => {
+ // Phase 3: Hold after video ends before fading out
+ dismissTimerRef.current = setTimeout(() => {
+ dismissSplash();
+ }, 1500);
+ };
+
+ const handleVideoError = () => {
+ reportError(
+ "SplashScreen video failed to load",
+ new Error("Video load error")
+ );
+ dismissSplash();
+ };
+
+ return (
+
+ {isVisible && (
+
+
+ {showVideo && (
+
+
+
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/src/lib/structured-data.ts b/src/lib/structured-data.ts
index 34a5908..bd95bd2 100644
--- a/src/lib/structured-data.ts
+++ b/src/lib/structured-data.ts
@@ -3,7 +3,54 @@ import {
SITE_NAME,
SITE_DESCRIPTION,
TWITTER_URL,
-} from "./constants";
+ GITHUB_URL,
+ DISCORD_URL,
+ LINKEDIN_URL,
+ YOUTUBE_URL,
+ INSTAGRAM_URL,
+ TIKTOK_URL,
+} from "@/lib/constants";
+
+/**
+ * Minimal product data needed for SoftwareApplication schema generation.
+ */
+interface SoftwareApplicationSchemaInput {
+ name: string;
+ slug: string;
+ tagline: string;
+ description: string;
+ screenshots: string[];
+ links: {
+ appStore?: string;
+ playStore?: string;
+ github?: string;
+ demo?: string;
+ };
+}
+
+/**
+ * Minimal team member data needed for Person schema generation.
+ */
+interface PersonSchemaInput {
+ name: string;
+ slug: string;
+ tagline: string;
+ avatar: string;
+ role?: string;
+ githubUrl?: string;
+ linkedinUrl?: string;
+}
+
+/**
+ * Minimal blog post data needed for article schema generation.
+ * Uses only the fields actually needed for the JSON-LD output.
+ */
+interface ArticleSchemaInput {
+ title: string;
+ excerpt: string;
+ date: string;
+ author?: { name: string } | null;
+}
/**
* Schema.org Organization structured data for Volvox.
@@ -17,19 +64,139 @@ export function generateOrganizationSchema() {
url: SITE_URL,
logo: `${SITE_URL}/volvox-logo.png`,
description: SITE_DESCRIPTION,
- sameAs: [TWITTER_URL],
+ sameAs: [
+ TWITTER_URL,
+ GITHUB_URL,
+ DISCORD_URL,
+ LINKEDIN_URL,
+ YOUTUBE_URL,
+ INSTAGRAM_URL,
+ TIKTOK_URL,
+ ],
};
}
/**
- * Minimal blog post data needed for article schema generation.
- * Uses only the fields actually needed for the JSON-LD output.
+ * Schema.org WebSite structured data with SearchAction.
+ * Enables the Google sitelinks search box in search results.
*/
-interface ArticleSchemaInput {
- title: string;
- excerpt: string;
- date: string;
- author?: { name: string } | null;
+export function generateWebSiteSchema() {
+ return {
+ "@context": "https://schema.org",
+ "@type": "WebSite",
+ url: SITE_URL,
+ name: SITE_NAME,
+ description: SITE_DESCRIPTION,
+ potentialAction: {
+ "@type": "SearchAction",
+ target: {
+ "@type": "EntryPoint",
+ urlTemplate: `${SITE_URL}/blog?q={search_term_string}`,
+ },
+ "query-input": "required name=search_term_string",
+ },
+ };
+}
+
+/**
+ * Schema.org BreadcrumbList structured data for navigation hierarchy.
+ * Helps search engines understand the site structure and display breadcrumbs in results.
+ *
+ * @param items - Ordered array of breadcrumb items with name and URL
+ * @returns BreadcrumbList schema object for JSON-LD injection
+ */
+export function generateBreadcrumbSchema(
+ items: Array<{ name: string; url: string }>
+) {
+ return {
+ "@context": "https://schema.org",
+ "@type": "BreadcrumbList",
+ itemListElement: items.map((item, index) => ({
+ "@type": "ListItem",
+ position: index + 1,
+ name: item.name,
+ item: item.url,
+ })),
+ };
+}
+
+/**
+ * Schema.org SoftwareApplication structured data for product pages.
+ * Enables rich product snippets in search results with application details.
+ *
+ * @param product - Extended product data with links and screenshots
+ * @returns SoftwareApplication schema object for JSON-LD injection
+ */
+export function generateSoftwareApplicationSchema(
+ product: SoftwareApplicationSchemaInput
+) {
+ const productUrl = `${SITE_URL}/products/${product.slug}`;
+ const operatingSystems: string[] = [];
+
+ if (product.links.appStore) operatingSystems.push("iOS");
+ if (product.links.playStore) operatingSystems.push("Android");
+ if (product.links.demo || product.links.github) operatingSystems.push("Web");
+
+ return {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ name: product.name,
+ alternativeHeadline: product.tagline,
+ description: product.description,
+ url: productUrl,
+ applicationCategory: "DeveloperApplication",
+ ...(operatingSystems.length > 0 && {
+ operatingSystem: operatingSystems.join(", "),
+ }),
+ ...(product.screenshots.length > 0 && {
+ screenshot: product.screenshots.map((s: string) =>
+ s.startsWith("http") ? s : `${SITE_URL}${s}`
+ ),
+ }),
+ offers: {
+ "@type": "Offer",
+ price: "0",
+ priceCurrency: "USD",
+ },
+ publisher: {
+ "@type": "Organization",
+ name: SITE_NAME,
+ url: SITE_URL,
+ },
+ };
+}
+
+/**
+ * Schema.org Person structured data for team member pages.
+ * Enables rich person snippets in search results with profile details.
+ *
+ * @param member - Team member data with name, role, and social links
+ * @returns Person schema object for JSON-LD injection
+ */
+export function generatePersonSchema(member: PersonSchemaInput) {
+ const memberUrl = `${SITE_URL}/team/${member.slug}`;
+ const sameAs: string[] = [];
+
+ if (member.githubUrl) sameAs.push(member.githubUrl);
+ if (member.linkedinUrl) sameAs.push(member.linkedinUrl);
+
+ return {
+ "@context": "https://schema.org",
+ "@type": "Person",
+ name: member.name,
+ description: member.tagline,
+ url: memberUrl,
+ image: member.avatar.startsWith("http")
+ ? member.avatar
+ : `${SITE_URL}${member.avatar}`,
+ ...(member.role && { jobTitle: member.role }),
+ ...(sameAs.length > 0 && { sameAs }),
+ memberOf: {
+ "@type": "Organization",
+ name: SITE_NAME,
+ url: SITE_URL,
+ },
+ };
}
/**
@@ -105,8 +272,8 @@ export function generateWebPageSchema(
url: `${SITE_URL}/volvox-logo.png`,
},
},
- datePublished: datePublished,
- dateModified: dateModified,
+ ...(datePublished && { datePublished }),
+ ...(dateModified && { dateModified }),
inLanguage: "en-US",
isPartOf: {
"@type": "WebSite",