mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Simplify hero backgrounds and add entrance animations

Browse Source 
- Replace animated blob/wave/noise backdrop with clean static gradient
  (radial ellipse highlights + linear fade) in hero-motion-backdrop
- Remove all framer-motion from background layer; delete unused CSS
  classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise,
  hero-title-shift keyframe, and responsive blob media queries
- Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem,
  and HeroTitle (slide-up + fade on mount)
- Refactor coming-soon page to use HeroContentMotion/HeroMotionItem
  instead of MotionFade (whileInView unreliable above the fold)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MOH
2026-03-17 22:48:51 +01:00
co-authored by Claude Sonnet 4.6
parent f490133345
commit 868eb80374
10 changed files with 92 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/(site)/portfolio/[slug]/page.tsx
+1 -4
View File
@@ -61,10 +61,7 @@ export default async function PortfolioItemPage({
return (
<>
<PageHero
title={getLocalizedValue(item.title, localeKey)}
description={getLocalizedValue(item.summary, localeKey)}
/>
<PageHero />
<Container size="wide" className="pb-12 lg:pb-16">
<PortfolioProjectDetail
app/[locale]/coming-soon/page.tsx
+19 -14
View File
@@ -4,8 +4,7 @@ import { Sparkles } from "lucide-react";
import { getLocale, getTranslations } from "next-intl/server";
import { FloatingPreferences } from "@/components/layout/floating-preferences";
import { MotionFade } from "@/components/motion-fade";
import { HeroShell, HeroTitle } from "@/components/layout/site-hero";
import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { resolveLocale } from "@/lib/locale";
@@ -67,24 +66,30 @@ export default async function ComingSoonPage({
<FloatingPreferences locale={localeKey} defaultLocale={siteSettings.defaultLocale} />
<HeroShell className="min-h-screen" showBridges>
<MotionFade className="relative z-10 w-full">
<HeroContentMotion className="relative z-10 w-full">
<div className="mx-auto max-w-[56rem] text-center">
<p className="inline-flex items-center gap-2 rounded-pill border border-foreground/8 bg-background/55 px-4 py-2 text-sm font-medium tracking-[0.08em] text-[hsl(var(--hero-ink)/0.84)] shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/10 dark:bg-background/20 dark:text-foreground/84">
<Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
{t("kicker")}
</p>
<HeroMotionItem>
<p className="inline-flex items-center gap-2 rounded-pill border border-foreground/8 bg-background/55 px-4 py-2 text-sm font-medium tracking-[0.08em] text-[hsl(var(--hero-ink)/0.84)] shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/10 dark:bg-background/20 dark:text-foreground/84">
<Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
{t("kicker")}
</p>
</HeroMotionItem>
<HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8" />
<p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
{t("description")}
</p>
<HeroMotionItem>
<p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
{t("description")}
</p>
</HeroMotionItem>
<p className="mx-auto mt-4 max-w-[32rem] text-sm leading-6 text-foreground/54 sm:text-base">
{t("note")}
</p>
<HeroMotionItem>
<p className="mx-auto mt-4 max-w-[32rem] text-sm leading-6 text-foreground/54 sm:text-base">
{t("note")}
</p>
</HeroMotionItem>
</div>
</MotionFade>
</HeroContentMotion>
</HeroShell>
</div>
);