REMOVED - Trim home page: drop projects/capabilities/process, full-bleed tools marquee
- Remove the Selected Projects, Capabilities and Process sections from the home page (placeholder-heavy content). - Take the tools marquee out of its card and let it span the full site width (full-bleed band) instead.
This commit is contained in:
@@ -5,18 +5,11 @@ import { Container } from "@/components/layout/container";
|
|||||||
import { HomeHero } from "@/components/layout/home-hero";
|
import { HomeHero } from "@/components/layout/home-hero";
|
||||||
import { MotionFade } from "@/components/motion-fade";
|
import { MotionFade } from "@/components/motion-fade";
|
||||||
import { MagicBentoSection } from "@/components/home/magic-bento-section";
|
import { MagicBentoSection } from "@/components/home/magic-bento-section";
|
||||||
import { CapabilitiesSection } from "@/components/home/capabilities-section";
|
|
||||||
import { ContactCtaSection } from "@/components/home/contact-cta-section";
|
import { ContactCtaSection } from "@/components/home/contact-cta-section";
|
||||||
import { MarqueeSection } from "@/components/home/marquee-section";
|
import { MarqueeSection } from "@/components/home/marquee-section";
|
||||||
import { ProcessSection } from "@/components/home/process-section";
|
|
||||||
import { ProjectsSection } from "@/components/home/projects-section";
|
|
||||||
import type {
|
import type {
|
||||||
CapabilitiesSectionCopy,
|
|
||||||
ContactCtaSectionCopy,
|
ContactCtaSectionCopy,
|
||||||
MarqueeSectionCopy,
|
MarqueeSectionCopy,
|
||||||
ProcessSectionCopy,
|
|
||||||
ProjectCardCopy,
|
|
||||||
ProjectsSectionCopy,
|
|
||||||
} from "@/components/home/types";
|
} from "@/components/home/types";
|
||||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||||
@@ -25,10 +18,6 @@ import {
|
|||||||
getSiteSettings,
|
getSiteSettings,
|
||||||
splitMarqueeRowItems,
|
splitMarqueeRowItems,
|
||||||
} from "@/lib/app-config";
|
} from "@/lib/app-config";
|
||||||
import {
|
|
||||||
getLocalizedValue,
|
|
||||||
getPublishedPortfolioProjects,
|
|
||||||
} from "@/lib/portfolio";
|
|
||||||
import { type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
import { type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
||||||
|
|
||||||
type HomePageProps = {
|
type HomePageProps = {
|
||||||
@@ -65,10 +54,9 @@ export default async function HomePage({ params }: HomePageProps) {
|
|||||||
siteSettings.defaultLocale,
|
siteSettings.defaultLocale,
|
||||||
);
|
);
|
||||||
|
|
||||||
const [t, marqueeSettings, publishedProjects] = await Promise.all([
|
const [t, marqueeSettings] = await Promise.all([
|
||||||
getTranslations({ locale: localeKey, namespace: "homepage" }),
|
getTranslations({ locale: localeKey, namespace: "homepage" }),
|
||||||
getMarqueeSettings(),
|
getMarqueeSettings(),
|
||||||
getPublishedPortfolioProjects(),
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const bentoCards = [
|
const bentoCards = [
|
||||||
@@ -112,28 +100,6 @@ export default async function HomePage({ params }: HomePageProps) {
|
|||||||
description: t("marquee.description"),
|
description: t("marquee.description"),
|
||||||
};
|
};
|
||||||
|
|
||||||
const projectsCopy: ProjectsSectionCopy = {
|
|
||||||
eyebrow: t("projects.eyebrow"),
|
|
||||||
title: t("projects.title"),
|
|
||||||
description: t("projects.description"),
|
|
||||||
stackLabel: t("projects.stackLabel"),
|
|
||||||
fallbackItems: t.raw("projects.fallbackItems") as ProjectsSectionCopy["fallbackItems"],
|
|
||||||
};
|
|
||||||
|
|
||||||
const capabilitiesCopy: CapabilitiesSectionCopy = {
|
|
||||||
eyebrow: t("capabilities.eyebrow"),
|
|
||||||
title: t("capabilities.title"),
|
|
||||||
description: t("capabilities.description"),
|
|
||||||
items: t.raw("capabilities.items") as CapabilitiesSectionCopy["items"],
|
|
||||||
};
|
|
||||||
|
|
||||||
const processCopy: ProcessSectionCopy = {
|
|
||||||
eyebrow: t("process.eyebrow"),
|
|
||||||
title: t("process.title"),
|
|
||||||
description: t("process.description"),
|
|
||||||
steps: t.raw("process.steps") as ProcessSectionCopy["steps"],
|
|
||||||
};
|
|
||||||
|
|
||||||
const contactCtaCopy: ContactCtaSectionCopy = {
|
const contactCtaCopy: ContactCtaSectionCopy = {
|
||||||
eyebrow: t("contactCta.eyebrow"),
|
eyebrow: t("contactCta.eyebrow"),
|
||||||
title: t("contactCta.title"),
|
title: t("contactCta.title"),
|
||||||
@@ -157,45 +123,6 @@ export default async function HomePage({ params }: HomePageProps) {
|
|||||||
|
|
||||||
const portfolioHref = getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale);
|
const portfolioHref = getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale);
|
||||||
const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale);
|
const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale);
|
||||||
const stackSets = t.raw("projects.stackSets") as string[][];
|
|
||||||
|
|
||||||
const selectedProjects = [
|
|
||||||
...publishedProjects.filter((project) => project.isFeatured),
|
|
||||||
...publishedProjects.filter((project) => !project.isFeatured),
|
|
||||||
].slice(0, 3);
|
|
||||||
|
|
||||||
const projectCards: ProjectCardCopy[] = selectedProjects.map((project, index) => ({
|
|
||||||
title: getLocalizedValue(project.title, localeKey),
|
|
||||||
summary: getLocalizedValue(project.summary, localeKey),
|
|
||||||
stack: stackSets[index] ?? stackSets[stackSets.length - 1] ?? [],
|
|
||||||
href: getLocalizedPath(
|
|
||||||
localeKey,
|
|
||||||
`/portfolio/${project.slug}`,
|
|
||||||
siteSettings.defaultLocale,
|
|
||||||
),
|
|
||||||
cta: t("projects.cta"),
|
|
||||||
meta: [
|
|
||||||
getLocalizedValue(project.category.name, localeKey),
|
|
||||||
getLocalizedValue(project.serviceLabel, localeKey),
|
|
||||||
String(project.projectYear),
|
|
||||||
],
|
|
||||||
featured: index === 0,
|
|
||||||
coverImagePath: project.coverImagePath,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const fallbackProjectCards: ProjectCardCopy[] = projectsCopy.fallbackItems.map((item) => ({
|
|
||||||
title: item.title,
|
|
||||||
summary: item.summary,
|
|
||||||
stack: item.stack,
|
|
||||||
href: item.href === "/portfolio" ? portfolioHref : item.href === "/contact" ? contactHref : item.href,
|
|
||||||
cta: t("projects.cta"),
|
|
||||||
meta: [t("projects.fallbackMeta")],
|
|
||||||
}));
|
|
||||||
|
|
||||||
const mergedProjectCards = [
|
|
||||||
...projectCards,
|
|
||||||
...fallbackProjectCards.slice(0, Math.max(0, 3 - projectCards.length)),
|
|
||||||
].slice(0, 3);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -226,19 +153,7 @@ export default async function HomePage({ params }: HomePageProps) {
|
|||||||
<MarqueeSection copy={marqueeCopy} rows={marqueeRows} />
|
<MarqueeSection copy={marqueeCopy} rows={marqueeRows} />
|
||||||
</MotionFade>
|
</MotionFade>
|
||||||
|
|
||||||
<MotionFade delay={0.08}>
|
|
||||||
<ProjectsSection copy={projectsCopy} items={mergedProjectCards} />
|
|
||||||
</MotionFade>
|
|
||||||
|
|
||||||
<MotionFade delay={0.1}>
|
<MotionFade delay={0.1}>
|
||||||
<CapabilitiesSection copy={capabilitiesCopy} />
|
|
||||||
</MotionFade>
|
|
||||||
|
|
||||||
<MotionFade delay={0.12}>
|
|
||||||
<ProcessSection copy={processCopy} />
|
|
||||||
</MotionFade>
|
|
||||||
|
|
||||||
<MotionFade delay={0.14}>
|
|
||||||
<ContactCtaSection copy={contactCtaCopy} contactHref={contactHref} />
|
<ContactCtaSection copy={contactCtaCopy} contactHref={contactHref} />
|
||||||
</MotionFade>
|
</MotionFade>
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
||||||
import { AppCard } from "@/components/ui/app-card";
|
|
||||||
import { SectionHeading } from "./section-heading";
|
import { SectionHeading } from "./section-heading";
|
||||||
import type { MarqueeSectionCopy } from "./types";
|
import type { MarqueeSectionCopy } from "./types";
|
||||||
|
|
||||||
@@ -10,18 +9,18 @@ type MarqueeSectionProps = {
|
|||||||
|
|
||||||
export function MarqueeSection({ copy, rows }: MarqueeSectionProps) {
|
export function MarqueeSection({ copy, rows }: MarqueeSectionProps) {
|
||||||
return (
|
return (
|
||||||
<section className="space-y-8 overflow-hidden">
|
<section className="space-y-8">
|
||||||
<SectionHeading
|
<SectionHeading
|
||||||
eyebrow={copy.eyebrow}
|
eyebrow={copy.eyebrow}
|
||||||
title={copy.title}
|
title={copy.title}
|
||||||
description={copy.description}
|
description={copy.description}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AppCard className="overflow-hidden">
|
{/* Full-bleed band: breaks out of the centered container to span the
|
||||||
<div className="rounded-nested border border-border/70 bg-background py-6">
|
entire site width instead of sitting inside a card. */}
|
||||||
<StackedMarqueeSection rows={rows} className="py-0" />
|
<div className="relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-y border-border/60 bg-background/40 py-8">
|
||||||
</div>
|
<StackedMarqueeSection rows={rows} className="py-0" />
|
||||||
</AppCard>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user