feat(frontend): try to improve onboarding and selection or website/application (#2478)

Author: peterpeterparker

src/frontend/src/lib/components/modals/factory/create/SatelliteCreateModal.svelte

@@ -153,7 +153,10 @@
 									value="website"
 									bind:group={satelliteKind}
 								/>
-								{$i18n.satellites.website}
+								<span class="option">
+									<span>{$i18n.satellites.website}</span>
+									<span>{$i18n.satellites.website_description}</span>
+								</span>
 							</label>
 
 							<label>
@@ -164,7 +167,10 @@
 									value="application"
 									bind:group={satelliteKind}
 								/>
-								{$i18n.satellites.application}
+								<span class="option">
+									<span>{$i18n.satellites.application}</span>
+									<span>{$i18n.satellites.application_description}</span>
+								</span>
 							</label>
 						</div>
 					</Value>
@@ -222,5 +228,21 @@
 	.options {
 		display: flex;
 		flex-direction: column;
+		gap: var(--padding);
+		padding: var(--padding-0_5x) 0 var(--padding-6x);
+	}
+
+	.option {
+		display: inline-flex;
+		flex-direction: column;
+
+		span:last-child {
+			font-size: var(--font-size-very-small);
+			font-style: italic;
+		}
+	}
+
+	input {
+		vertical-align: text-top;
 	}
 </style>

src/frontend/src/lib/i18n/en.json

@@ -316,7 +316,9 @@
 		"satellite_name": "Satellite name",
 		"what_are_you_building": "What are you building",
 		"website": "Website",
+		"website_description": "Landing pages, blogs, portfolios",
 		"application": "Application",
+		"application_description": "Data storage, user management, serverless functions",
 		"environment": "Environment",
 		"tags": "Tags",
 		"tags_placeholder": "Comma-separated or one per line. Leave empty for no tags.",

src/frontend/src/lib/i18n/zh-cn.json

@@ -316,7 +316,9 @@
 		"satellite_name": "卫星名称",
 		"what_are_you_building": "您正在构建什么",
 		"website": "网站",
+		"website_description": "落地页、博客、作品集",
 		"application": "应用程序",
+		"application_description": "数据存储、用户管理、无服务器函数",
 		"environment": "运行环境",
 		"tags": "标签",
 		"tags_placeholder": "逗号分隔或每行一个，留空则不添加标签。",

src/frontend/src/lib/types/i18n.d.ts

@@ -324,7 +324,9 @@ interface I18nSatellites {
 	satellite_name: string;
 	what_are_you_building: string;
 	website: string;
+	website_description: string;
 	application: string;
+	application_description: string;
 	environment: string;
 	tags: string;
 	tags_placeholder: string;