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 { MotionFade } from "@/components/motion-fade";
|
||||
import { MagicBentoSection } from "@/components/home/magic-bento-section";
|
||||
import { CapabilitiesSection } from "@/components/home/capabilities-section";
|
||||
import { ContactCtaSection } from "@/components/home/contact-cta-section";
|
||||
import { MarqueeSection } from "@/components/home/marquee-section";
|
||||
import { ProcessSection } from "@/components/home/process-section";
|
||||
import { ProjectsSection } from "@/components/home/projects-section";
|
||||
import type {
|
||||
CapabilitiesSectionCopy,
|
||||
ContactCtaSectionCopy,
|
||||
MarqueeSectionCopy,
|
||||
ProcessSectionCopy,
|
||||
ProjectCardCopy,
|
||||
ProjectsSectionCopy,
|
||||
} from "@/components/home/types";
|
||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||
@@ -25,10 +18,6 @@ import {
|
||||
getSiteSettings,
|
||||
splitMarqueeRowItems,
|
||||
} from "@/lib/app-config";
|
||||
import {
|
||||
getLocalizedValue,
|
||||
getPublishedPortfolioProjects,
|
||||
} from "@/lib/portfolio";
|
||||
import { type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
||||
|
||||
type HomePageProps = {
|
||||
@@ -65,10 +54,9 @@ export default async function HomePage({ params }: HomePageProps) {
|
||||
siteSettings.defaultLocale,
|
||||
);
|
||||
|
||||
const [t, marqueeSettings, publishedProjects] = await Promise.all([
|
||||
const [t, marqueeSettings] = await Promise.all([
|
||||
getTranslations({ locale: localeKey, namespace: "homepage" }),
|
||||
getMarqueeSettings(),
|
||||
getPublishedPortfolioProjects(),
|
||||
]);
|
||||
|
||||
const bentoCards = [
|
||||
@@ -112,28 +100,6 @@ export default async function HomePage({ params }: HomePageProps) {
|
||||
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 = {
|
||||
eyebrow: t("contactCta.eyebrow"),
|
||||
title: t("contactCta.title"),
|
||||
@@ -157,45 +123,6 @@ export default async function HomePage({ params }: HomePageProps) {
|
||||
|
||||
const portfolioHref = getLocalizedPath(localeKey, "/portfolio", 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 (
|
||||
<>
|
||||
@@ -226,19 +153,7 @@ export default async function HomePage({ params }: HomePageProps) {
|
||||
<MarqueeSection copy={marqueeCopy} rows={marqueeRows} />
|
||||
</MotionFade>
|
||||
|
||||
<MotionFade delay={0.08}>
|
||||
<ProjectsSection copy={projectsCopy} items={mergedProjectCards} />
|
||||
</MotionFade>
|
||||
|
||||
<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} />
|
||||
</MotionFade>
|
||||
</Container>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { SectionHeading } from "./section-heading";
|
||||
import type { MarqueeSectionCopy } from "./types";
|
||||
|
||||
@@ -10,18 +9,18 @@ type MarqueeSectionProps = {
|
||||
|
||||
export function MarqueeSection({ copy, rows }: MarqueeSectionProps) {
|
||||
return (
|
||||
<section className="space-y-8 overflow-hidden">
|
||||
<section className="space-y-8">
|
||||
<SectionHeading
|
||||
eyebrow={copy.eyebrow}
|
||||
title={copy.title}
|
||||
description={copy.description}
|
||||
/>
|
||||
|
||||
<AppCard className="overflow-hidden">
|
||||
<div className="rounded-nested border border-border/70 bg-background py-6">
|
||||
{/* Full-bleed band: breaks out of the centered container to span the
|
||||
entire site width instead of sitting inside a card. */}
|
||||
<div className="relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-y border-border/60 bg-background/40 py-8">
|
||||
<StackedMarqueeSection rows={rows} className="py-0" />
|
||||
</div>
|
||||
</AppCard>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user