+
+
+
-
+
@@ -61,9 +57,9 @@ export default function Footer({ lang }: FooterProps) {
-
+
-
+
{copyright(lang)}
diff --git a/app/[lang]/(hyperjump)/components/motion-wrappers.tsx b/app/[lang]/(hyperjump)/components/motion-wrappers.tsx
new file mode 100644
index 00000000..87869792
--- /dev/null
+++ b/app/[lang]/(hyperjump)/components/motion-wrappers.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+type SectionRevealProps = {
+ children: ReactNode;
+ className?: string;
+ delay?: number;
+};
+
+/**
+ * Wraps content with a scroll-triggered fade-in-up animation.
+ */
+export function SectionReveal({
+ children,
+ className,
+ delay = 0
+}: SectionRevealProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+type StaggerContainerProps = {
+ children: ReactNode;
+ className?: string;
+};
+
+/**
+ * Parent container that orchestrates staggered children animations.
+ */
+export function StaggerContainer({
+ children,
+ className
+}: StaggerContainerProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+type StaggerItemProps = {
+ children: ReactNode;
+ className?: string;
+};
+
+/**
+ * Child item that animates within a StaggerContainer.
+ */
+export function StaggerItem({ children, className }: StaggerItemProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/app/[lang]/(hyperjump)/components/nav.tsx b/app/[lang]/(hyperjump)/components/nav.tsx
index 050166aa..98b65ca6 100644
--- a/app/[lang]/(hyperjump)/components/nav.tsx
+++ b/app/[lang]/(hyperjump)/components/nav.tsx
@@ -45,10 +45,7 @@ const SOLID_NAV_PATHS_WITH_LOCALE = supportedLanguages.reduce(
function menu(lang: SupportedLanguage) {
return [
- {
- label: mainNavItems0Label(lang),
- href: `/${lang}/services`
- },
+ { label: mainNavItems0Label(lang), href: `/${lang}/services` },
{ label: mainNavItems2Label(lang), href: `/${lang}/products` },
{ label: mainNavItems1Label(lang), href: `/${lang}/case-studies` },
{ label: mainNavItems4Label(lang), href: `/${lang}/team` },
@@ -71,11 +68,13 @@ export default function Nav({ lang }: NavProps) {
-
+
{menu(lang).map(({ href, label }) => {
const isActive = pathname.startsWith(href);
@@ -97,17 +96,19 @@ export default function Nav({ lang }: NavProps) {
href={href}
onClick={() => setIsOpen(false)}
className={cn(
- "text-xl font-medium transition duration-300",
+ "rounded-full px-4 py-1.5 text-[15px] font-medium tracking-tight transition-all duration-300",
isTransparent &&
isActive &&
- "group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:border-b-2",
+ "group-data-[scroll=true]:bg-hyperjump-blue/10 group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:bg-white/15 group-data-[scroll=false]:text-white",
isTransparent &&
!isActive &&
- "group-data-[scroll=true]:text-hyperjump-black hover:group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:text-white hover:group-data-[scroll=false]:border-b-2",
- !isTransparent && isActive && "text-hyperjump-blue",
+ "group-data-[scroll=true]:text-hyperjump-black group-data-[scroll=false]:text-white/80 hover:group-data-[scroll=false]:bg-white/10 hover:group-data-[scroll=false]:text-white hover:group-data-[scroll=true]:bg-black/4",
+ !isTransparent &&
+ isActive &&
+ "bg-hyperjump-blue/10 text-hyperjump-blue",
!isTransparent &&
!isActive &&
- "text-hyperjump-black hover:text-hyperjump-blue"
+ "text-hyperjump-black hover:bg-black/4"
)}>
{label}
@@ -118,18 +119,17 @@ export default function Nav({ lang }: NavProps) {
- {/* Mobile Toggle */}
- {/* Mobile Menu */}
{isOpen && (
-
-
+
+
{menu(lang).map(({ href, label }) => {
const isActive = pathname.startsWith(href);
return (
@@ -166,8 +165,10 @@ export default function Nav({ lang }: NavProps) {
key={label}
href={href}
className={cn(
- "text-2xl transition hover:text-gray-400",
- isActive ? "text-hyperjump-blue" : "text-hyperjump-black"
+ "rounded-xl px-4 py-3 text-lg font-medium tracking-tight transition-all duration-200",
+ isActive
+ ? "bg-hyperjump-blue/10 text-hyperjump-blue"
+ : "text-hyperjump-black hover:bg-black/3"
)}
onClick={() => setIsOpen(false)}>
{label}
@@ -191,7 +192,7 @@ function NavContainer({
return (
{children}
@@ -221,7 +222,10 @@ function Logo({ isOpen, isTransparent }: LogoProps) {
return (
-
+
{children}
-
-
-
+ className="bg-hero-premium relative overflow-hidden text-white">
+
+
-
-
-
+
+
+
{mainHeroHeading(lang)}
-
+
{mainHeroDesc(lang)}
-
+
+
+
+
+
+
+
@@ -148,153 +150,219 @@ function Hero({ lang }: HomeParams) {
}
function Services({ lang }: HomeParams) {
+ const serviceList = services(lang);
+
return (
-
-
- ({
- title,
- description,
- icon: iconUrl,
- urlSeeMore: `/${lang}/services/${slug}`
- }))}
- columns={{ base: 1, sm: 2, lg: 3 }}
- cardClassName="rounded"
- lang={lang}
- />
-
-
+
+
+
+
+
+ {mainServicesHeading(lang)}
+
+
+ {mainServicesDesc(lang)}
+
+
+
+
+ {serviceList.map(({ description, iconUrl, slug, title }, idx) => (
+
+
+
+ {String(idx + 1).padStart(2, "0")}
+
+ {iconUrl && (
+ 
+ )}
+
+ {title}
+
+
+ {description}
+
+
+ Learn more
+
+
+
+
+ ))}
+
+
+
+
+
+
+
);
}
function CaseStudies({ lang }: HomeParams) {
return (
-
-
-
- {getCaseStudies(lang).map((caseStudy) => (
-
- ))}
-
-
-
-
-
-
-
- {mainCaseStudiesCtaHeading(lang)}
-
-
{mainCaseStudiesCtaDesc(lang)}
-
-
+
+
+
+
+
+ {mainCaseStudiesHeading(lang)}
+
+
+ {mainCaseStudiesDesc(lang)}
+
+
+
+
+ {getCaseStudies(lang).map((caseStudy) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {mainCaseStudiesCtaHeading(lang)}
+
+
+ {mainCaseStudiesCtaDesc(lang)}
+
+
+
+
);
}
function OpenSourceProducts({ lang }: HomeParams) {
+ const projects = getProject(lang);
+
return (
-
-
-
-
-
+
);
}
function Faqs({ lang }: HomeParams) {
return (
-
-
-
-
-
+
+
+
+
+
+ {mainFaqHeading(lang)}
+
+
+ {mainFaqDesc(lang)}
+
+
+
+
+
{getFaqs(lang).map((item, i) => (
-
-
-
-
- {item.question}
-
-
-
-
- {item.answer}
-
- {item?.url && (
-
-
- {mainFaqLearnMore(lang)}
-
-
-
-
-
- )}
-
-
+
+
+ {item.question}
+
+
+ {item.answer}
+ {item?.url && (
+
+ {mainFaqLearnMore(lang)}
+
+
+ )}
+
))}
-
);
diff --git a/app/components/grid-items.tsx b/app/components/grid-items.tsx
index 193c214d..be3506e5 100644
--- a/app/components/grid-items.tsx
+++ b/app/components/grid-items.tsx
@@ -39,7 +39,7 @@ export function GridItemsTitle({
const isHorizontal = layout === "horizontal";
return !description ? (
-
+
{title}
) : (
@@ -53,7 +53,7 @@ export function GridItemsTitle({
)}>
{title}
@@ -173,7 +173,7 @@ export function GridItems({
{image && (
@@ -223,7 +223,7 @@ export function GridItems({
)}
@@ -232,7 +232,7 @@ export function GridItems({
)}
@@ -242,7 +242,7 @@ export function GridItems({