1// CSS-in-JS patterns with anti-patterns (styled-components + emotion)
 2
 3import styled from 'styled-components';
 4import { css } from '@emotion/react';
 5
 6// styled-components: side-tab + border-accent-on-rounded
 7export const Card = styled.div`
 8  border-left: 4px solid #3b82f6;
 9  border-radius: 12px;
10  padding: 24px;
11  font-family: 'Inter', sans-serif;
12`;
13
14// styled-components: pure black background + gradient text
15export const Hero = styled.section`
16  background-color: #000000;
17  padding: 80px 20px;
18  text-align: center;
19
20  h1 {
21    background: linear-gradient(to right, #a855f7, #06b6d4);
22    -webkit-background-clip: text;
23    background-clip: text;
24    color: transparent;
25  }
26`;
27
28// emotion css: bounce animation + layout transition
29export const animatedPanel = css`
30  animation: bounce 1s infinite;
31  transition: width 0.3s ease;
32`;
33
34// styled with parenthesized component
35export const AccentBox = styled(Box)`
36  border-right: 5px solid #8b5cf6;
37  border-radius: 8px;
38`;
39
40// Object style pattern
41export const inlineStyles = {
42  borderLeft: '4px solid #6366f1',
43  borderRadius: '12px',
44};