Tighten Impressum text blocks and drop Reveal's y-translate jump

AnbieterAngaben.tsx's address/VAT/register blocks each got the same
gap-4 as the section headings, so related lines (e.g. name/street/zip+
city) read as visually disconnected paragraphs instead of one block —
wrapped each in its own gap-1 container, keeping gap-4 only between
sections.

Reveal.tsx's shared fadeUp variant animated opacity and a 28px y-
translate together, which read as the whole section hopping into place
on top of the fade. Renamed to fadeIn, opacity only — applies site-wide
via Reveal/RevealGroup/RevealItem.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-24 17:47:06 +00:00
parent f0aec851d3
commit 9bfd0affd0
2 changed files with 46 additions and 28 deletions
+12 -7
View File
@@ -3,9 +3,14 @@
import { motion, type Variants } from "motion/react";
import type { CSSProperties, ReactNode } from "react";
const fadeUp: Variants = {
hidden: { opacity: 0, y: 28 },
show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
// Plain fade, no y-translate — fixed 2026-07-24. Used to animate opacity
// 0→1 *and* y 28→0 together ("fade up"), which read as the whole section
// visibly hopping/jumping into place on top of the fade — one motion cue
// too many. The fade alone is already a clear enough "this just appeared"
// signal without the extra jump.
const fadeIn: Variants = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
};
type RevealProps = {
@@ -16,7 +21,7 @@ type RevealProps = {
delay?: number;
};
/** Fades a section up into place once, the first time it scrolls into view. */
/** Fades a section into view once, the first time it scrolls into view. */
export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
return (
<motion.div
@@ -25,7 +30,7 @@ export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
initial="hidden"
whileInView="show"
viewport={{ once: true, margin: "-80px" }}
variants={fadeUp}
variants={fadeIn}
transition={{ delay }}
>
{children}
@@ -53,10 +58,10 @@ export function RevealGroup({ children, className }: { children: ReactNode; clas
);
}
/** Child item for use inside a RevealGroup — same fade-up motion, driven by the parent's stagger. */
/** Child item for use inside a RevealGroup — same fade motion, driven by the parent's stagger. */
export function RevealItem({ children, className }: { children: ReactNode; className?: string }) {
return (
<motion.div className={className} variants={fadeUp}>
<motion.div className={className} variants={fadeIn}>
{children}
</motion.div>
);
+34 -21
View File
@@ -63,27 +63,38 @@ export function AnbieterAngaben({ seller }: { seller: CompanySettings }) {
return (
<div className="flex flex-col gap-4 w-full">
<Heading>Angaben zum Anbieter</Heading>
<P>{seller.sellerName}</P>
<P>{seller.sellerStreet}</P>
<P>
{seller.sellerZip} {seller.sellerCity}
</P>
<P>{seller.sellerCountry}</P>
<P>E-Mail: {seller.sellerEmail}</P>
{/* gap-1, not the outer container's own gap-4 — these 5 lines are one
continuous address block, not 5 separate paragraphs; the large
inter-section gap only belongs between a heading's own block and
the next, not between lines that visually belong together
(fixed 2026-07-24, same fix applied to every block below). */}
<div className="flex flex-col gap-1">
<P>{seller.sellerName}</P>
<P>{seller.sellerStreet}</P>
<P>
{seller.sellerZip} {seller.sellerCity}
</P>
<P>{seller.sellerCountry}</P>
<P>E-Mail: {seller.sellerEmail}</P>
</div>
<Heading>Umsatzsteuer</Heading>
<P>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</P>
<P>{seller.vatId}</P>
<div className="flex flex-col gap-1">
<P>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</P>
<P>{seller.vatId}</P>
</div>
{seller.registerCourt && seller.registerNumber && (
<>
<Heading>Handelsregister</Heading>
<P>{seller.registerCourt}</P>
<P>{seller.registerNumber}</P>
{/* Optional/voluntary, not a Pflichtangabe — see
CompanySettings.ts's own comment on shareCapital. Only shows
if an admin deliberately filled it in. */}
{seller.shareCapital ? <P>Stammkapital: {seller.shareCapital.toLocaleString("de-DE")} </P> : null}
<div className="flex flex-col gap-1">
<P>{seller.registerCourt}</P>
<P>{seller.registerNumber}</P>
{/* Optional/voluntary, not a Pflichtangabe — see
CompanySettings.ts's own comment on shareCapital. Only shows
if an admin deliberately filled it in. */}
{seller.shareCapital ? <P>Stammkapital: {seller.shareCapital.toLocaleString("de-DE")} </P> : null}
</div>
</>
)}
@@ -100,12 +111,14 @@ export function AnbieterAngaben({ seller }: { seller: CompanySettings }) {
proprietorship/e.K., already a natural person's own name). No
OHG/KG general-partner fallback here — see this file's top
comment on why that field doesn't exist yet. */}
<P>{seller.managingDirector || seller.sellerName}</P>
<P>{seller.sellerStreet}</P>
<P>
{seller.sellerZip} {seller.sellerCity}
</P>
<P>{seller.sellerCountry}</P>
<div className="flex flex-col gap-1">
<P>{seller.managingDirector || seller.sellerName}</P>
<P>{seller.sellerStreet}</P>
<P>
{seller.sellerZip} {seller.sellerCity}
</P>
<P>{seller.sellerCountry}</P>
</div>
</div>
);
}