https://rising-spaces.de/ExpectationsSection.jsx?v=20260703c

1// ExpectationsSection — Intro-Hero über der Galerie.
2// Haupt-Headline "RISING SPACES", darunter die Zeile "expectations and
3// reality" als Unterzeile. Danach folgt die Galerie.
4// Bekommt width/isPhone wie die anderen Sektionen (kein Media-Query nötig).
5
6function ExpectationsSection({ width = 1440, isPhone = false }) {
7  const fg = '#f1ede4';
8  const muted = 'rgba(241,237,228,0.62)';
9  const pad = isPhone ? 20 : 48;
10  const isTablet = width >= 640 && width < 1024;
11  const titleFont = isPhone ? Math.min(width * 0.155, 60) : isTablet ? 88 : 108;
12  const subFont = isPhone ? Math.min(width * 0.06, 24) : isTablet ? 30 : 34;
13
14  return (
15    <section
16      style={{
17        position: 'relative',
18        zIndex: 1,
19        width: '100%',
20        boxSizing: 'border-box',
21        background: '#0a0a0a',
22        color: fg,
23        fontFamily: 'Oswald, system-ui, sans-serif',
24        padding: `${isPhone ? 76 : 110}px ${pad}px ${isPhone ? 28 : 40}px`,
25        display: 'flex',
26        flexDirection: 'column',
27        alignItems: 'center',
28        gap: isPhone ? 14 : 20,
29        textAlign: 'center',
30      }}
31    >
32      {/* Kleiner gelber Punkt als Marker */}
33      <span
34        style={{
35          width: 8,
36          height: 8,
37          borderRadius: 999,
38          background: '#F7E94A',
39          display: 'inline-block',
40          boxShadow: '0 0 10px 2px rgba(247,233,74,0.6)',
41        }}
42      />
43
44      {/* Haupt-Headline */}
45      <h1
46        style={{
47          margin: 0,
48          fontSize: titleFont,
49          lineHeight: 0.92,
50          letterSpacing: isPhone ? '0.08em' : '0.12em',
51          fontWeight: 700,
52          textTransform: 'uppercase',
53        }}
54      >
55        rising spaces
56      </h1>
57
58      {/* Unterzeile */}
59      <p
60        style={{
61          margin: 0,
62          fontSize: subFont,
63          lineHeight: 1.1,
64          letterSpacing: isPhone ? '0.14em' : '0.22em',
65          fontWeight: 600,
66          textTransform: 'uppercase',
67          color: muted,
68        }}
69      >
70        expectations and reality
71      </p>
72    </section>
73  );
74}
75
76window.ExpectationsSection = ExpectationsSection;