pixies

1@use "@/common/styles/colors" as *
2
3.home-page
4  overflow-x: hidden
5
6.hero
7  min-height: 100vh
8  display: flex
9  align-items: center
10  padding: 120px 6rem 80px
11  position: relative
12
13.hero-grid
14  display: grid
15  grid-template-columns: 1fr 1.2fr
16  gap: 4rem
17  align-items: center
18  width: 100%
19  max-width: 1400px
20  margin: 0 auto
21
22.hero-content
23  display: flex
24  flex-direction: column
25  gap: 1.5rem
26
27.hero-title
28  font-size: 3.5rem
29  font-weight: 800
30  color: $text
31  line-height: 1.1
32  letter-spacing: -0.02em
33
34  .highlight
35    position: relative
36    display: inline-block
37    color: $primary
38    
39  .underline-scribble
40    position: absolute
41    bottom: -4px
42    left: -5%
43    width: 110%
44    height: 16px
45    overflow: visible
46    
47    path
48      fill: none
49      stroke: $primary
50      stroke-width: 3
51      stroke-linecap: round
52      stroke-dasharray: 200
53      stroke-dashoffset: 200
54      animation: draw-underline 1s ease-out 0.5s forwards
55
56@keyframes draw-underline
57  to
58    stroke-dashoffset: 0
59
60.hero-description
61  font-size: 1.125rem
62  color: $text-secondary
63  line-height: 1.7
64  max-width: 480px
65
66.hero-actions
67  display: flex
68  gap: 1rem
69  margin-top: 0.5rem
70
71.hero-visual
72  position: relative
73  display: flex
74  justify-content: center
75  align-items: center
76  perspective: 1000px
77
78.interface-preview
79  position: relative
80  z-index: 2
81  width: 100%
82  max-width: 650px
83  transform: rotateY(-8deg) rotateX(4deg)
84  transform-style: preserve-3d
85
86  img
87    width: 100%
88    border-radius: 12px
89
90@media (max-width: 1100px)
91  .hero
92    padding: 120px 3rem 60px
93
94  .hero-grid
95    grid-template-columns: 1fr
96    gap: 3rem
97    text-align: center
98
99  .hero-content
100    align-items: center
101
102  .hero-description
103    max-width: 600px
104
105  .hero-title
106    font-size: 3rem
107
108  .hero-actions
109    justify-content: center
110
111@media (max-width: 640px)
112  .hero
113    padding: 100px 1.5rem 40px
114
115  .hero-title
116    font-size: 2.25rem
117
118  .hero-description
119    font-size: 1rem
120
121  .hero-actions
122    flex-direction: column
123    width: 100%
124
125    .btn
126      width: 100%
127      justify-content: center
128