Remove impeccable A/B variants from Hero -- keep only FlippingCards
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
@@ -166,285 +166,32 @@ export const Hero: React.FC<HeroProps> = ({ t, headingAs = 'h1' }) => {
|
||||
{/* Right Preview Widget */}
|
||||
<div className="relative">
|
||||
<div className="relative perspective-[1000px]">
|
||||
{/* impeccable-variants-start eb49f55c */}
|
||||
<div data-impeccable-variants="eb49f55c" data-impeccable-variant-count="2" style={{ display: "contents" }}>
|
||||
{/* Original */}
|
||||
<div data-impeccable-variant="original">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
{
|
||||
front: { title: 'URL/Website', color: 'bg-blue-500/10 text-blue-600', icon: Globe },
|
||||
back: { title: 'PDF / Menu', color: 'bg-orange-500/10 text-orange-600', icon: FileText },
|
||||
delay: 3
|
||||
front: { title: 'URL/Website', color: 'bg-blue-500/10 text-blue-600', icon: Globe },
|
||||
back: { title: 'PDF / Menu', color: 'bg-orange-500/10 text-orange-600', icon: FileText },
|
||||
delay: 3
|
||||
},
|
||||
{
|
||||
front: { title: 'Contact Card', color: 'bg-purple-500/10 text-purple-600', icon: User },
|
||||
back: { title: 'Coupon / Deals', color: 'bg-red-500/10 text-red-600', icon: Ticket },
|
||||
delay: 5
|
||||
front: { title: 'Contact Card', color: 'bg-purple-500/10 text-purple-600', icon: User },
|
||||
back: { title: 'Coupon / Deals', color: 'bg-red-500/10 text-red-600', icon: Ticket },
|
||||
delay: 5
|
||||
},
|
||||
{
|
||||
front: { title: 'Location', color: 'bg-green-500/10 text-green-600', icon: MapPin },
|
||||
back: { title: 'App Store', color: 'bg-sky-500/10 text-sky-600', icon: Smartphone },
|
||||
delay: 7
|
||||
front: { title: 'Location', color: 'bg-green-500/10 text-green-600', icon: MapPin },
|
||||
back: { title: 'App Store', color: 'bg-sky-500/10 text-sky-600', icon: Smartphone },
|
||||
delay: 7
|
||||
},
|
||||
{
|
||||
front: { title: 'Phone Number', color: 'bg-pink-500/10 text-pink-600', icon: Phone },
|
||||
back: { title: 'Feedback', color: 'bg-yellow-500/10 text-yellow-600', icon: Star },
|
||||
delay: 9
|
||||
front: { title: 'Phone Number', color: 'bg-pink-500/10 text-pink-600', icon: Phone },
|
||||
back: { title: 'Feedback', color: 'bg-yellow-500/10 text-yellow-600', icon: Star },
|
||||
delay: 9
|
||||
},
|
||||
].map((card, index) => (
|
||||
].map((card, index) => (
|
||||
<FlippingCard key={index} {...card} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Variants: insert below this line */}
|
||||
<style data-impeccable-css="eb49f55c">{`
|
||||
@scope ([data-impeccable-variant="1"]) {
|
||||
.qr-instrument-grid {
|
||||
--accent-strength: var(--p-accent-strength, 0.58);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid oklch(91% 0.018 260);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(135deg, oklch(99% 0.006 260), oklch(96% 0.018 278)),
|
||||
repeating-linear-gradient(90deg, oklch(93% 0.012 260) 0 1px, transparent 1px 44px);
|
||||
box-shadow:
|
||||
rgba(50, 50, 93, 0.24) 0 30px 45px -30px,
|
||||
rgba(3, 3, 39, 0.10) 0 18px 36px -18px;
|
||||
}
|
||||
.qr-instrument-tile {
|
||||
position: relative;
|
||||
min-height: 126px;
|
||||
overflow: hidden;
|
||||
border: 1px solid oklch(88% 0.018 260);
|
||||
border-radius: 6px;
|
||||
background: oklch(99% 0.004 260 / 0.92);
|
||||
color: oklch(22% 0.07 260);
|
||||
box-shadow: rgba(23, 23, 23, 0.06) 0 3px 6px;
|
||||
transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1), border-color 220ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 220ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
.qr-instrument-tile:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: color-mix(in oklch, oklch(55% 0.25 280) calc(var(--accent-strength) * 100%), oklch(88% 0.018 260));
|
||||
box-shadow:
|
||||
rgba(50, 50, 93, 0.26) 0 24px 40px -26px,
|
||||
rgba(83, 58, 253, calc(var(--accent-strength) * 0.16)) 0 10px 24px -16px;
|
||||
}
|
||||
.qr-instrument-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
padding: 14px;
|
||||
}
|
||||
.qr-instrument-code {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: oklch(55% 0.04 260);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.qr-instrument-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: oklch(52% 0.24 280);
|
||||
background: color-mix(in oklch, oklch(62% 0.25 280) calc(var(--accent-strength) * 16%), oklch(97% 0.01 260));
|
||||
}
|
||||
.qr-instrument-label {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.15;
|
||||
font-weight: 600;
|
||||
color: oklch(20% 0.065 260);
|
||||
}
|
||||
.qr-instrument-spark {
|
||||
width: 34px;
|
||||
height: 12px;
|
||||
background: linear-gradient(90deg, transparent 0 12%, oklch(58% 0.24 280 / calc(var(--accent-strength) * 0.55)) 12% 18%, transparent 18% 34%, oklch(58% 0.24 280 / calc(var(--accent-strength) * 0.75)) 34% 44%, transparent 44% 100%);
|
||||
transform: skewX(-18deg);
|
||||
}
|
||||
.qr-instrument-tile:hover .qr-instrument-spark {
|
||||
animation: qrInstrumentPulse 720ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
@keyframes qrInstrumentPulse {
|
||||
from { opacity: 0.25; transform: translateX(-4px) skewX(-18deg); }
|
||||
to { opacity: 1; transform: translateX(0) skewX(-18deg); }
|
||||
}
|
||||
:scope[data-p-density="compact"] .qr-instrument-grid { gap: 8px; padding: 8px; }
|
||||
:scope[data-p-density="compact"] .qr-instrument-tile { min-height: 114px; }
|
||||
:scope[data-p-density="open"] .qr-instrument-grid { gap: 14px; padding: 12px; }
|
||||
:scope[data-p-density="open"] .qr-instrument-tile { min-height: 136px; }
|
||||
}
|
||||
@scope ([data-impeccable-variant="2"]) {
|
||||
.qr-rhythm-grid {
|
||||
--motion-depth: var(--p-motion-depth, 0.45);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.qr-rhythm-tile {
|
||||
position: relative;
|
||||
min-height: 126px;
|
||||
overflow: hidden;
|
||||
border: 1px solid oklch(90% 0.018 260);
|
||||
border-radius: 8px;
|
||||
background: oklch(99% 0.004 260 / 0.86);
|
||||
box-shadow:
|
||||
rgba(50, 50, 93, 0.18) 0 24px 34px -28px,
|
||||
rgba(0, 0, 0, 0.08) 0 14px 24px -18px;
|
||||
transition: transform 260ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 260ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
.qr-rhythm-tile:hover {
|
||||
transform: translateY(calc(var(--motion-depth) * -8px));
|
||||
box-shadow:
|
||||
rgba(50, 50, 93, 0.26) 0 30px 45px -30px,
|
||||
rgba(83, 58, 253, 0.14) 0 16px 30px -22px;
|
||||
}
|
||||
.qr-rhythm-tile::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
border-radius: 6px;
|
||||
background:
|
||||
linear-gradient(90deg, oklch(55% 0.25 280 / 0.10), transparent 42%),
|
||||
repeating-linear-gradient(90deg, oklch(68% 0.16 280 / 0.32) 0 3px, transparent 3px 8px);
|
||||
clip-path: inset(72% 0 10% 0);
|
||||
opacity: calc(0.36 + var(--motion-depth) * 0.5);
|
||||
}
|
||||
.qr-rhythm-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.qr-rhythm-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
color: oklch(48% 0.24 280);
|
||||
background: oklch(96% 0.025 280);
|
||||
box-shadow: inset oklch(100% 0.004 260 / 0.82) 0 1px 0;
|
||||
transition: transform 260ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
.qr-rhythm-tile:hover .qr-rhythm-icon {
|
||||
transform: translateY(calc(var(--motion-depth) * -5px)) scale(calc(1 + var(--motion-depth) * 0.05));
|
||||
}
|
||||
.qr-rhythm-label {
|
||||
color: oklch(20% 0.065 260);
|
||||
font-size: 13px;
|
||||
line-height: 1.12;
|
||||
font-weight: 600;
|
||||
}
|
||||
.qr-rhythm-meta {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
color: oklch(58% 0.04 260);
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
:scope[data-p-signal="quiet"] .qr-rhythm-tile::before { opacity: 0.18; }
|
||||
:scope[data-p-signal="bright"] .qr-rhythm-tile::before { opacity: 0.78; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.qr-rhythm-tile,
|
||||
.qr-rhythm-icon,
|
||||
.qr-instrument-tile,
|
||||
.qr-instrument-spark {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
<div
|
||||
data-impeccable-variant="1"
|
||||
data-impeccable-params='[
|
||||
{"id":"accent-strength","kind":"range","min":0.25,"max":0.9,"step":0.05,"default":0.58,"label":"Accent strength"},
|
||||
{"id":"density","kind":"steps","default":"balanced","label":"Density","options":[
|
||||
{"value":"compact","label":"Compact"},
|
||||
{"value":"balanced","label":"Balanced"},
|
||||
{"value":"open","label":"Open"}
|
||||
]}
|
||||
]'
|
||||
>
|
||||
<div className="qr-instrument-grid">
|
||||
{[
|
||||
{ code: '01', title: 'URL/Website', icon: Globe },
|
||||
{ code: '02', title: 'PDF / Menu', icon: FileText },
|
||||
{ code: '03', title: 'Contact Card', icon: User },
|
||||
{ code: '04', title: 'Coupon / Deals', icon: Ticket },
|
||||
].map((card) => (
|
||||
<div className="qr-instrument-tile" key={card.title}>
|
||||
<div className="qr-instrument-face">
|
||||
<div className="qr-instrument-code">
|
||||
<span>QR-{card.code}</span>
|
||||
<span>READY</span>
|
||||
</div>
|
||||
<div className="qr-instrument-icon">
|
||||
<card.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="qr-instrument-label">
|
||||
<span>{card.title}</span>
|
||||
<span className="qr-instrument-spark" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-impeccable-variant="2"
|
||||
style={{ display: 'none' }}
|
||||
data-impeccable-params='[
|
||||
{"id":"motion-depth","kind":"range","min":0,"max":1,"step":0.05,"default":0.45,"label":"Motion depth"},
|
||||
{"id":"signal","kind":"steps","default":"calm","label":"Signal","options":[
|
||||
{"value":"quiet","label":"Quiet"},
|
||||
{"value":"calm","label":"Calm"},
|
||||
{"value":"bright","label":"Bright"}
|
||||
]}
|
||||
]'
|
||||
>
|
||||
<div className="qr-rhythm-grid">
|
||||
{[
|
||||
{ code: 'URL', title: 'URL/Website', icon: Globe },
|
||||
{ code: 'PDF', title: 'PDF / Menu', icon: FileText },
|
||||
{ code: 'LOC', title: 'Location', icon: MapPin },
|
||||
{ code: 'APP', title: 'App Store', icon: Smartphone },
|
||||
].map((card) => (
|
||||
<div className="qr-rhythm-tile" key={card.title}>
|
||||
<span className="qr-rhythm-meta">{card.code}</span>
|
||||
<div className="qr-rhythm-content">
|
||||
<div className="qr-rhythm-icon">
|
||||
<card.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="qr-rhythm-label">{card.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* impeccable-variants-end eb49f55c */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user