1import styled from "styled-components";
 2
 3const Section = styled.section`
 4  min-height: 100vh;
 5  display: flex;
 6  flex-direction: column;
 7  align-items: center;
 8  justify-content: center;
 9  padding: 80px 24px;
10  text-align: center;
11`;
12
13const Title = styled.h1`
14  font-size: 64px;
15  font-weight: 800;
16  font-family: 'Montserrat', sans-serif;
17  background: linear-gradient(135deg, #a855f7, #06b6d4);
18  -webkit-background-clip: text;
19  background-clip: text;
20  color: transparent;
21  margin-bottom: 24px;
22  line-height: 1.1;
23`;
24
25const Subtitle = styled.p`
26  font-size: 20px;
27  color: #6b7280;
28  max-width: 600px;
29  margin-bottom: 48px;
30`;
31
32const CTAButton = styled.button`
33  padding: 16px 48px;
34  font-size: 18px;
35  font-weight: 600;
36  color: white;
37  background: linear-gradient(135deg, #8b5cf6, #6366f1);
38  border: none;
39  border-radius: 12px;
40  cursor: pointer;
41  box-shadow: 0 0 40px rgba(139, 92, 246, 0.4);
42  transition: transform 0.2s ease, box-shadow 0.2s ease;
43
44  &:hover {
45    transform: translateY(-2px);
46    box-shadow: 0 0 60px rgba(139, 92, 246, 0.6);
47  }
48`;
49
50export function Hero() {
51  return (
52    <Section>
53      <Title>Build the Future</Title>
54      <Subtitle>
55        The most powerful platform for modern web development.
56        Ship faster, scale easier.
57      </Subtitle>
58      <CTAButton>Get Started Free</CTAButton>
59    </Section>
60  );
61}