|
1 | 1 | import "../components/Button.coi"; |
2 | 2 |
|
3 | 3 | component Hero { |
4 | | - mut string popupDisplay = "none"; |
5 | | - |
6 | | - def openPopup() : void { |
7 | | - popupDisplay = "flex"; |
8 | | - } |
9 | | - |
10 | | - def closePopup() : void { |
11 | | - popupDisplay = "none"; |
12 | | - } |
13 | | - |
14 | 4 | style { |
15 | 5 | .hero { |
| 6 | + position: relative; |
| 7 | + overflow: hidden; |
| 8 | + padding: 160px 24px 100px; |
16 | 9 | text-align: center; |
17 | | - padding: 180px 20px 120px; |
18 | | - max-width: 900px; |
19 | | - margin: 0 auto; |
| 10 | + background-image: radial-gradient(#e5e7eb 1px, transparent 1px); |
| 11 | + background-size: 24px 24px; |
| 12 | + /* Keep layout properties to ensure centering */ |
| 13 | + display: flex; |
| 14 | + flex-direction: column; |
| 15 | + align-items: center; |
| 16 | + } |
| 17 | + .hero::before { |
| 18 | + content: ""; |
| 19 | + position: absolute; |
| 20 | + top: 0; |
| 21 | + left: 0; |
| 22 | + right: 0; |
| 23 | + height: 100%; |
| 24 | + background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, #fafafa 100%); |
| 25 | + pointer-events: none; |
20 | 26 | } |
21 | 27 | .logo { |
22 | 28 | width: 180px; |
23 | 29 | height: auto; |
24 | 30 | margin: 0 auto 40px auto; |
25 | | - filter: drop-shadow(0 20px 40px rgba(148, 119, 255, 0.2)); |
| 31 | + filter: drop-shadow(0 20px 40px rgba(148, 119, 255, 0.25)); |
| 32 | + animation: float 6s ease-in-out infinite; |
| 33 | + } |
| 34 | + @keyframes float { |
| 35 | + 0% { transform: translateY(0px); } |
| 36 | + 50% { transform: translateY(-15px); } |
| 37 | + 100% { transform: translateY(0px); } |
26 | 38 | } |
27 | 39 | h1 { |
28 | | - font-size: 72px; |
| 40 | + font-size: 80px; |
29 | 41 | font-weight: 800; |
30 | | - margin: 0 0 24px 0; |
31 | | - letter-spacing: -2px; |
32 | | - line-height: 1.1; |
33 | | - background: linear-gradient(135deg, #1a1a1a 30%, #9477ff 100%); |
| 42 | + margin: 0 0 16px 0; |
| 43 | + letter-spacing: -2.5px; |
| 44 | + line-height: 1; |
| 45 | + background: linear-gradient(135deg, #9477ff 30%, #7c5cff 100%); |
34 | 46 | -webkit-background-clip: text; |
35 | 47 | -webkit-text-fill-color: transparent; |
36 | 48 | background-clip: text; |
37 | | - color: #1a1a1a; |
| 49 | + color: #9477ff; |
38 | 50 | } |
39 | 51 | .tagline { |
40 | | - font-size: 24px; |
41 | | - color: #666; |
42 | | - margin: 0 auto 32px auto; |
43 | | - line-height: 1.5; |
44 | | - max-width: 600px; |
| 52 | + font-size: 20px; |
| 53 | + color: #555; |
| 54 | + margin: 0 auto 40px auto; |
| 55 | + line-height: 1.6; |
| 56 | + max-width: 620px; |
45 | 57 | } |
46 | 58 | .buttons { |
47 | 59 | display: flex; |
48 | 60 | gap: 16px; |
49 | 61 | justify-content: center; |
| 62 | + margin-bottom: 48px; |
50 | 63 | } |
51 | 64 | .subtitle { |
52 | | - font-size: 20px; |
53 | | - font-weight: 500; |
54 | | - color: #4a4a4a; |
55 | | - margin: -5px 0 24px 0; |
56 | | - letter-spacing: -0.2px; |
| 65 | + font-size: 24px; |
| 66 | + font-weight: 600; |
| 67 | + color: #4f4f4f; |
| 68 | + margin: -5px 0 20px 0; |
| 69 | + letter-spacing: -0.5px; |
57 | 70 | } |
58 | 71 | .built-with { |
59 | | - margin-top: 48px; |
60 | | - font-size: 13px; |
61 | | - color: #9477ff; |
62 | | - opacity: 0.8; |
63 | | - font-weight: 500; |
64 | | - letter-spacing: 0.5px; |
65 | | - text-transform: uppercase; |
66 | | - } |
67 | | - .popup-overlay { |
68 | | - position: fixed; |
69 | | - top: 0; |
70 | | - left: 0; |
71 | | - width: 100%; |
72 | | - height: 100%; |
73 | | - background: rgba(0,0,0,0.5); |
74 | | - z-index: 1000; |
75 | | - display: flex; |
| 72 | + display: inline-flex; |
76 | 73 | align-items: center; |
77 | | - justify-content: center; |
78 | | - backdrop-filter: blur(4px); |
79 | | - } |
80 | | - .popup { |
81 | | - background: white; |
82 | | - padding: 40px; |
| 74 | + padding: 8px 16px; |
| 75 | + margin-bottom: 32px; |
| 76 | + background: rgba(148, 119, 255, 0.1); |
83 | 77 | border-radius: 20px; |
84 | | - max-width: 420px; |
85 | | - text-align: center; |
86 | | - box-shadow: 0 20px 60px rgba(0,0,0,0.2); |
87 | | - animation: popupIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); |
| 78 | + font-size: 14px; |
| 79 | + color: #7c5cff; |
| 80 | + font-weight: 600; |
| 81 | + letter-spacing: 0.3px; |
| 82 | + transition: all 0.2s ease; |
| 83 | + cursor: default; |
88 | 84 | } |
89 | | - @keyframes popupIn { |
90 | | - from { opacity: 0; transform: scale(0.95); } |
91 | | - to { opacity: 1; transform: scale(1); } |
| 85 | + .built-with:hover { |
| 86 | + background: rgba(148, 119, 255, 0.15); |
| 87 | + transform: translateY(-1px); |
92 | 88 | } |
93 | | - .popup h3 { |
94 | | - font-size: 24px; |
95 | | - margin: 0 0 16px 0; |
96 | | - color: #1a1a1a; |
| 89 | + |
| 90 | + @keyframes fadeIn { |
| 91 | + from { opacity: 0; transform: translateY(20px); } |
| 92 | + to { opacity: 1; transform: translateY(0); } |
97 | 93 | } |
98 | | - .popup p { |
99 | | - color: #666; |
100 | | - margin: 0 0 32px 0; |
101 | | - line-height: 1.6; |
102 | | - font-size: 16px; |
| 94 | + |
| 95 | + .built-with { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; animation-delay: 0.1s; } |
| 96 | + .logo-wrapper { |
| 97 | + margin: 0 auto 40px auto; |
| 98 | + animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; |
| 99 | + opacity: 0; |
| 100 | + animation-delay: 0.2s; |
103 | 101 | } |
| 102 | + .logo { |
| 103 | + width: 180px; |
| 104 | + height: auto; |
| 105 | + margin: 0; |
| 106 | + display: block; |
| 107 | + filter: drop-shadow(0 20px 40px rgba(148, 119, 255, 0.25)); |
| 108 | + animation: float 6s ease-in-out infinite; |
| 109 | + } |
| 110 | + h1 { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; animation-delay: 0.3s; } |
| 111 | + .subtitle { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; animation-delay: 0.4s; } |
| 112 | + .tagline { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; animation-delay: 0.5s; } |
| 113 | + .buttons { animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; animation-delay: 0.6s; } |
| 114 | + |
104 | 115 |
|
105 | 116 | @media (max-width: 768px) { |
106 | 117 | .hero { |
@@ -128,33 +139,24 @@ component Hero { |
128 | 139 | padding: 16px 20px; |
129 | 140 | font-size: 18px; |
130 | 141 | } |
131 | | - .popup { |
132 | | - width: 90%; |
133 | | - max-width: 420px; |
134 | | - padding: 24px; |
135 | | - } |
136 | 142 | } |
137 | 143 | } |
138 | 144 |
|
139 | 145 | view { |
140 | 146 | <div class="hero"> |
141 | | - <img class="logo" src="assets/images/logo.png" alt="Coi logo" /> |
| 147 | + <div class="built-with">✨ This site is built with Coi</div> |
| 148 | + |
| 149 | + <div class="logo-wrapper"> |
| 150 | + <img class="logo" src="assets/images/logo.png" alt="Coi logo" /> |
| 151 | + </div> |
| 152 | + |
142 | 153 | <h1>Coi</h1> |
143 | 154 | <p class="subtitle">WebAssembly for the Modern Web</p> |
144 | 155 | <p class="tagline">A component-based language for high-performance web apps.<br/>Fast. Minimal. Type-safe.</p> |
145 | 156 | <div class="buttons"> |
146 | | - <Button label="Get Started" type="primary" &onclick={openPopup} /> |
| 157 | + <Button label="Get Started" type="primary" href="https://github.com/io-eric/coi/blob/main/docs/getting-started.md" /> |
147 | 158 | <Button label="GitHub" type="secondary" href="https://github.com/io-eric/coi"/> |
148 | 159 | </div> |
149 | | - <p class="built-with">✨ This site is built with Coi</p> |
150 | | - |
151 | | - <div class="popup-overlay" style="display: ${popupDisplay};"> |
152 | | - <div class="popup"> |
153 | | - <h3>Work in Progress 🚧</h3> |
154 | | - <p>This section is not finished yet... but you can look into the demos below or in the git repository to get a good start with this language :D</p> |
155 | | - <Button label="Got it!" type="primary" &onclick={closePopup} /> |
156 | | - </div> |
157 | | - </div> |
158 | 160 | </div> |
159 | 161 | } |
160 | 162 | } |
0 commit comments