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>
);
app/_admin/portfolio/actions.ts
+1 -1
View File
@@ -582,7 +582,7 @@ export async function deleteProjectAction(formData: FormData) {
});
if (!project) {
redirect(withMessage(getAdminAppPath("/portfolio"), "error", "Project not found."));
redirect(withMessage(getAdminAppPath("/portfolio"), "error", "Projekt nicht gefunden."));
}
await prisma.portfolioProject.delete({
app/globals.css
+10 -133
View File
@@ -266,91 +266,21 @@ html[lang="ar"] {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 14% 18%, hsl(var(--hero-left) / 0.42), transparent 26%),
radial-gradient(circle at 84% 14%, hsl(var(--hero-right) / 0.28), transparent 24%),
radial-gradient(circle at 52% 84%, hsl(var(--hero-bottom) / 0.24), transparent 32%),
linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 88%);
}
.hero-blob {
position: absolute;
border-radius: 9999px;
filter: blur(110px);
will-change: transform, opacity;
}
.hero-blob-left {
left: -8%;
top: 8%;
height: 24rem;
width: 24rem;
background: radial-gradient(circle, hsl(var(--hero-left) / 0.48), transparent 68%);
}
.hero-blob-right {
right: -10%;
top: 2%;
height: 22rem;
width: 22rem;
background: radial-gradient(circle, hsl(var(--hero-right) / 0.36), transparent 70%);
}
.hero-blob-bottom {
left: 18%;
bottom: -10%;
height: 24rem;
width: 38rem;
background: radial-gradient(circle, hsl(var(--hero-bottom) / 0.32), transparent 70%);
}
.hero-sheet-glow {
position: absolute;
inset: -10% -8%;
background:
radial-gradient(circle at 18% 24%, hsl(var(--hero-left) / 0.24), transparent 18%),
radial-gradient(circle at 86% 18%, hsl(var(--hero-right) / 0.16), transparent 18%),
radial-gradient(circle at 50% 78%, hsl(var(--hero-bottom) / 0.14), transparent 24%);
filter: blur(36px);
will-change: transform, opacity;
}
.hero-sheet-wave {
position: absolute;
inset: -16% -10%;
background:
conic-gradient(
from 180deg at 50% 50%,
transparent 0deg,
hsl(var(--hero-left) / 0.08) 58deg,
transparent 120deg,
transparent 228deg,
hsl(var(--hero-right) / 0.1) 300deg,
transparent 360deg
);
filter: blur(90px);
mix-blend-mode: screen;
will-change: transform, opacity;
}
.hero-sheet-noise {
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
background-size: auto, 160px 160px;
mix-blend-mode: soft-light;
opacity: 0.22;
will-change: background-position, opacity, transform;
radial-gradient(ellipse 90% 55% at 50% -5%, hsl(var(--hero-left) / 0.38), transparent),
radial-gradient(ellipse 55% 40% at 92% 10%, hsl(var(--hero-right) / 0.22), transparent),
radial-gradient(ellipse 60% 35% at 8% 15%, hsl(var(--hero-left) / 0.18), transparent),
linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 90%);
}
.hero-sheet-veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0));
backdrop-filter: blur(20px) saturate(112%);
-webkit-backdrop-filter: blur(20px) saturate(112%);
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.02) 40%,
rgba(255, 255, 255, 0) 100%
);
}
.hero-sheet-fade {
@@ -439,20 +369,6 @@ html[lang="ar"] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
}
@keyframes hero-title-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 45% 100%;
}
}
@keyframes hero-scroll-bob {
0%,
100% {
@@ -627,42 +543,3 @@ html[lang="ar"] {
}
}
@media (min-width: 640px) {
.hero-blob-left {
height: 30rem;
width: 30rem;
}
.hero-blob-right {
height: 28rem;
width: 28rem;
}
.hero-blob-bottom {
height: 28rem;
width: 44rem;
}
}
@media (min-width: 1024px) {
.hero-blob-left {
left: -4%;
top: 10%;
height: 36rem;
width: 36rem;
}
.hero-blob-right {
right: -4%;
top: 0;
height: 34rem;
width: 34rem;
}
.hero-blob-bottom {
left: 14%;
bottom: -16%;
height: 32rem;
width: 52rem;
}
}