1// Clean CSS-in-JS patterns -- no anti-patterns
 2
 3import styled from 'styled-components';
 4import { css } from '@emotion/react';
 5
 6export const Card = styled.div`
 7  border-radius: 12px;
 8  padding: 24px;
 9  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
10  font-family: 'Geist', system-ui, sans-serif;
11`;
12
13export const Hero = styled.section`
14  background-color: #0f172a;
15  padding: 80px 20px;
16
17  h1 {
18    color: #f8fafc;
19    font-size: 3rem;
20  }
21`;
22
23export const smoothPanel = css`
24  transition: opacity 0.3s ease, transform 0.2s ease;
25`;