{ "dependencies": {}, "onepage": { "control": { "eyebrow": { "title": "Name", "type": "text", "default": "GABRIÆL VORTÆX", "tab": "content", "group": "root" }, "eyebrow2": { "title": "Titel", "type": "text", "default": "ARCHITEKT DER AUTONOMIE", "tab": "content", "group": "root" }, "headline": { "title": "Headline", "type": "text", "default": "EYETERNITY AI", "tab": "content", "group": "root" }, "subheadline": { "title": "Vision", "type": "text", "default": "DIE ARCHITEKTUR DER INFORMATIONSHOHEIT", "tab": "content", "group": "root" }, "ki_details": { "title": "Modelle (mit • trennen)", "type": "textarea", "default": "GPT 5.5 • CLAUDE OPUS 4.8 • GROK 4 • GEMINI 3.5 • ÜBER 50 FÜHRENDE KI-MODELLE!", "tab": "content", "group": "root" }, "benefit_text": { "title": "Vorteil & Preis (kursiv)", "type": "text", "default": "STATT 150€ NUR 21€ (+MWST) / MONAT", "tab": "content", "group": "root" }, "bgColor": { "title": "Hintergrund (Tiefschwarz)", "type": "color", "default": "#050406", "tab": "styles", "group": "root" }, "accent": { "title": "Gold", "type": "color", "default": "var(--color-kit-white)", "tab": "styles", "group": "root" }, "violetGlow": { "title": "Violetter Glow", "type": "color", "default": "#7C3AED", "tab": "styles", "group": "root" }, "glowIntensity": { "title": "Glow Intensität", "type": "number-slider", "default": 55, "min": 0, "max": 100, "step": 5, "tab": "styles", "group": "root" }, "fullHeight": { "title": "Volle Höhe", "type": "checkbox", "default": false, "tab": "layout", "group": "root" }, "ctaText": { "title": "Button Text", "type": "text", "default": "ZUGANG AKTIVIEREN", "tab": "content", "group": "cta" }, "ctaLink": { "title": "Button Link", "type": "text", "default": "#", "tab": "content", "group": "cta" } }, "group": { "cta": { "title": "Button" } } } }
My Portfolio
This text is at 50% opacity. Drag the opacity slider in color settings to adjust.
Mary Schmidt
CEO of GoodCompany
import React from 'react'; import { motion } from 'framer-motion'; import Button from '@siteui/button'; import styles from './styles.module.css'; type Props = { eyebrow: string; eyebrow2: string; headline: string; subheadline: string; ki_details: string; benefit_text: string; bgColor: string; accent: string; violetGlow: string; glowIntensity: number; fullHeight: boolean; ctaText: string; ctaLink: string; }; export default function EyeternityHero({ eyebrow, eyebrow2, headline, subheadline, ki_details, benefit_text, bgColor, accent, violetGlow, glowIntensity, fullHeight, ctaText, ctaLink, }: Props) { const models = (ki_details || '') .split('\u2022') .map((m) => m.trim()) .filter(Boolean); const ease = [0.22, 1, 0.36, 1]; const rootCls = [styles.hero, fullHeight ? styles.full : ''].filter(Boolean).join(' '); return (
{/* Signatur — maximale Leere oben */}

{eyebrow}

{eyebrow2}

 {/* Headline */}

{headline}

{subheadline}

 {/* Herzstück: Gold-umrandete Modell-Matrix */} ENGINE STACK
{models.map((m, i) => ( {i > 0 && } {m} ))}
{/* Vorteil — kursiv */} {benefit_text} {/* Finale: Goldener Button ganz unten */}
); }