onboarding screen

.vscode/launch.json

@@ -16,6 +16,31 @@
 				"IS_DEV": "true",
 				"DEV_WORKSPACE_FOLDER": "${workspaceFolder}"
 			}
+		},
+		{
+			"name": "Run Extension (Fresh Install Mode)",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": ["--extensionDevelopmentPath=${workspaceFolder} --profile-temp"],
+			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
+			"preLaunchTask": "${defaultBuildTask}",
+			"env": {
+				"IS_DEV": "true",
+				"DEV_WORKSPACE_FOLDER": "${workspaceFolder}"
+			}
+		},
+		{
+			"name": "Run Extension (Test Mode)",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
+			"preLaunchTask": "${defaultBuildTask}",
+			"env": {
+				"IS_DEV": "true",
+				"IS_TEST": "true",
+				"DEV_WORKSPACE_FOLDER": "${workspaceFolder}"
+			}
 		}
 	]
 }

package.json

@@ -118,6 +118,11 @@
 				"command": "cline.focusChatInput",
 				"title": "Jump to Chat Input",
 				"category": "Cline"
+			},
+			{
+				"command": "cline.showWelcomeTab",
+				"title": "Show Welcome Tab",
+				"category": "Cline"
 			}
 		],
 		"keybindings": [
@@ -280,6 +285,11 @@
 					"type": "boolean",
 					"default": true,
 					"description": "Controls whether the MCP Marketplace is enabled."
+				},
+				"cline.showWelcomeTabOnInstall": {
+					"type": "boolean",
+					"default": true,
+					"description": "Controls whether the welcome tab is shown when the extension is installed."
 				}
 			}
 		}

src/core/welcome/WelcomeTabProvider.ts

@@ -0,0 +1,137 @@
+import * as vscode from "vscode"
+import * as path from "path"
+import { Logger } from "../../services/logging/Logger"
+import { getUri } from "../webview/getUri"
+
+export class WelcomeTabProvider {
+	private static readonly WELCOME_TAB_SHOWN_KEY = "cline.welcomeTabShown"
+
+	constructor(private readonly context: vscode.ExtensionContext) {}
+
+	/**
+	 * Shows the welcome tab if it hasn't been shown before and is enabled in settings
+	 */
+	public async showWelcomeTabIfNeeded(): Promise<void> {
+		// Check if we've already shown the welcome tab
+		const hasShownWelcomeTab = this.context.globalState.get<boolean>(WelcomeTabProvider.WELCOME_TAB_SHOWN_KEY, false)
+
+		// Check if showing the welcome tab on install is enabled in settings
+		const showWelcomeTabOnInstall = vscode.workspace.getConfiguration("cline").get<boolean>("showWelcomeTabOnInstall", true)
+
+		if (!hasShownWelcomeTab && showWelcomeTabOnInstall) {
+			await this.showWelcomeTab()
+			// Mark that we've shown the welcome tab
+			await this.context.globalState.update(WelcomeTabProvider.WELCOME_TAB_SHOWN_KEY, true)
+		}
+	}
+
+	/**
+	 * Shows the welcome tab
+	 */
+	public async showWelcomeTab(): Promise<vscode.WebviewPanel> {
+		Logger.log("Showing welcome tab")
+
+		// Create and show the webview panel
+		const panel = vscode.window.createWebviewPanel(
+			"clineWelcomeTab", // Unique ID
+			"Welcome to Cline", // Title displayed in the tab
+			vscode.ViewColumn.One, // Show in the first column
+			{
+				enableScripts: true,
+				localResourceRoots: [this.context.extensionUri],
+			},
+		)
+
+		// Set the icon for the tab
+		panel.iconPath = {
+			light: vscode.Uri.joinPath(this.context.extensionUri, "assets", "icons", "robot_panel_light.png"),
+			dark: vscode.Uri.joinPath(this.context.extensionUri, "assets", "icons", "robot_panel_dark.png"),
+		}
+
+		// Get the content of the welcome tab
+		panel.webview.html = await this.getWelcomeTabContent(panel.webview)
+
+		// Handle messages from the webview
+		panel.webview.onDidReceiveMessage(
+			(message) => {
+				switch (message.command) {
+					case "openCline":
+						// Open Cline when the button is clicked
+						vscode.commands.executeCommand("cline.openInNewTab")
+						return
+				}
+			},
+			undefined,
+			this.context.subscriptions,
+		)
+
+		return panel
+	}
+
+	/**
+	 * Gets the HTML content for the welcome tab
+	 */
+	private async getWelcomeTabContent(webview: vscode.Webview): Promise<string> {
+		// Get the path to the welcome tab HTML file
+		const htmlPath = vscode.Uri.joinPath(this.context.extensionUri, "webview-ui", "src", "assets", "welcome-tab.html")
+
+		// Read the HTML file
+		const htmlContent = await vscode.workspace.fs.readFile(htmlPath)
+		let htmlString = Buffer.from(htmlContent).toString("utf-8")
+
+		// Get the base path for assets
+		const assetsPath = vscode.Uri.joinPath(this.context.extensionUri, "webview-ui", "src", "assets")
+
+		// Convert resource paths to webview URIs
+		const cssUri = webview.asWebviewUri(vscode.Uri.joinPath(assetsPath, "css", "styles.css"))
+		const jsUri = webview.asWebviewUri(vscode.Uri.joinPath(assetsPath, "js", "script.js"))
+
+		// Replace CSS and JS paths
+		htmlString = htmlString.replace("css/styles.css", cssUri.toString())
+		htmlString = htmlString.replace("js/script.js", jsUri.toString())
+
+		// Replace image paths
+		const imageFiles = [
+			"back-icon.svg",
+			"vector.svg",
+			"vector-1.svg",
+			"feature-icon-1.svg",
+			"feature-icon-2.svg",
+			"feature-icon-3.svg",
+			"feature-icon-4.svg",
+			"action-icon-1.svg",
+			"action-icon-2.svg",
+			"button-icon-1.svg",
+			"anthropic-model.jpg",
+			"google-model.jpg",
+			"meta-model.jpg",
+			"feature-bg.png",
+			"50.svg",
+		]
+
+		for (const imageFile of imageFiles) {
+			const imageUri = webview.asWebviewUri(vscode.Uri.joinPath(assetsPath, "images", imageFile))
+			htmlString = htmlString.replace(`images/${imageFile}`, imageUri.toString())
+		}
+
+		// Add Content Security Policy
+		const csp = `
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; 
+    style-src ${webview.cspSource} https://fonts.googleapis.com; 
+    font-src ${webview.cspSource} https://fonts.googleapis.com https://fonts.gstatic.com; 
+    img-src ${webview.cspSource} https: data:; 
+    script-src ${webview.cspSource};">
+  `
+
+		// Insert CSP meta tag into the head section
+		htmlString = htmlString.replace("</head>", `${csp}</head>`)
+
+		// Get the logo path (if needed)
+		const logoUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, "assets", "icons", "icon.png"))
+
+		// Replace the placeholder with the actual logo path (if needed)
+		htmlString = htmlString.replace("{{logoPath}}", logoUri.toString())
+
+		return htmlString
+	}
+}

src/extension.ts

@@ -12,6 +12,7 @@ import { telemetryService } from "./services/telemetry/TelemetryService"
 import { WebviewProvider } from "./core/webview"
 import { ErrorService } from "./services/error/ErrorService"
 import { initializeTestMode, cleanupTestMode } from "./services/test/TestMode"
+import { WelcomeTabProvider } from "./core/welcome/WelcomeTabProvider"
 
 /*
 Built using https://github.com/microsoft/vscode-webview-ui-toolkit
@@ -34,6 +35,23 @@ export function activate(context: vscode.ExtensionContext) {
 	Logger.initialize(outputChannel)
 	Logger.log("Cline extension activated")
 
+	// Create the welcome tab provider
+	const welcomeTabProvider = new WelcomeTabProvider(context)
+
+	// Show the welcome tab if it hasn't been shown before
+	welcomeTabProvider.showWelcomeTabIfNeeded().catch((err) => {
+		Logger.error("Failed to show welcome tab", err)
+	})
+
+	// Register command to manually show the welcome tab
+	context.subscriptions.push(
+		vscode.commands.registerCommand("cline.showWelcomeTab", () => {
+			welcomeTabProvider.showWelcomeTab().catch((err) => {
+				Logger.error("Failed to show welcome tab", err)
+			})
+		}),
+	)
+
 	const sidebarWebview = new WebviewProvider(context, outputChannel)
 
 	// Initialize test mode and add disposables to context

webview-ui/src/assets/css/styles.css

@@ -0,0 +1,943 @@
+/* Global Styles */
+:root {
+	/* Colores exactos del diseño Figma actualizado */
+	--background-color: #181818; /* fill_8WL57W */
+	--container-bg: #1c1c1c; /* fill_4TPDFH */
+	--card-bg: #2b2b2b; /* fill_19R5B2 */
+	--input-bg: #313131; /* fill_XT87QJ */
+	--primary-color: #0078d4; /* fill_GFEHTQ */
+	--secondary-color: #313131; /* fill_XT87QJ */
+	--text-color: #ffffff; /* fill_UEF7SS */
+	--text-secondary: #cccccc;
+	--text-placeholder: #c5c5c5;
+	--border-color: #333333; /* stroke_H0B5JR */
+	--border-light: #3d3d3d; /* stroke_Y5VPFU */
+	--border-card: #414141; /* stroke_H220VQ */
+	--border-input: #3c3c3c; /* stroke_ZPDGQX */
+	--border-primary: #2282d7; /* stroke_II32J1 */
+	--border-tab: #4e4e4e; /* stroke_K3DJNL */
+	--link-color: #4daafc; /* fill_AJL987 */
+	--active-tab-color: #026ec1; /* fill_R3WUBX */
+	--social-bg: #390e67; /* fill_DWNHUJ */
+	--social-card-bg: #18181b; /* fill_73UY73 */
+	--social-card-purple: #c8abff; /* fill_PRU1UJ */
+	--social-card-purple-text: #8623de; /* fill_A5PYCT */
+	--social-card-violet: #9535f2; /* fill_GCX7BL */
+	--social-card-violet-text: #f7f3ff; /* fill_K63Y8F */
+
+	/* Espaciados exactos */
+	--gap-small: 8px;
+	--gap-medium: 16px;
+	--gap-large: 24px;
+	--gap-xlarge: 40px;
+	--gap-xxlarge: 80px;
+
+	/* Radios de borde */
+	--radius-small: 4px;
+	--radius-medium: 8px;
+	--radius-large: 12px;
+	--radius-xlarge: 14px;
+	--radius-round: 9999px;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "SF Pro", "Inter", sans-serif;
+	background-color: var(--background-color);
+	color: var(--text-color);
+	line-height: 1.3;
+	letter-spacing: -0.01em;
+}
+
+/* Layout */
+.home {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: var(--gap-large);
+	min-height: 100vh;
+}
+
+.main-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--gap-xxlarge);
+	padding: 16px var(--gap-large);
+	width: 100%;
+	max-width: 1200px;
+}
+
+/* Back Button */
+.back-button-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-small);
+	width: 100%;
+	margin-bottom: 20px;
+}
+
+.back-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.back-text {
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--link-color);
+}
+
+/* Account Info */
+.account-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--gap-xlarge);
+	width: 100%;
+}
+
+.vector-icon {
+	width: 48px;
+	height: 48px;
+}
+
+.welcome-message-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--gap-large);
+}
+
+.welcome-message {
+	font-size: 48px;
+	font-weight: 510;
+	text-align: center;
+	line-height: 1em;
+}
+
+.description {
+	font-family: "Inter", sans-serif;
+	font-size: 18px;
+	font-weight: 400;
+	text-align: center;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+}
+
+/* Buttons */
+.buttons-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-medium);
+	width: 100%;
+}
+
+.primary-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 0 16px;
+	height: 36px;
+	background-color: var(--primary-color);
+	border: 1px solid var(--border-primary);
+	border-radius: var(--radius-small);
+	color: var(--text-color);
+	font-size: 14px;
+	font-weight: 510;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+}
+
+.secondary-button {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 0 16px;
+	width: 208px;
+	height: 36px;
+	background-color: var(--secondary-color);
+	border: 1px solid var(--border-light);
+	border-radius: var(--radius-small);
+	color: var(--text-color);
+	font-size: 14px;
+	font-weight: 510;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+}
+
+/* Features Container */
+.features-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-medium);
+	padding: var(--gap-medium);
+	width: 100%;
+	background-color: var(--container-bg);
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius-large);
+}
+
+.feature-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: stretch;
+	align-items: stretch;
+	gap: var(--gap-medium);
+	width: 100%;
+	flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+	.feature-row {
+		flex-direction: column;
+	}
+}
+
+.feature-card {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 10px;
+	flex: 1;
+	min-width: 200px;
+	background-color: var(--card-bg);
+	border: 1px solid var(--border-card);
+	border-radius: var(--radius-medium);
+}
+
+.feature-icon-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-small);
+	width: 100%;
+}
+
+.feature-icon {
+	width: 20px;
+	height: 20px;
+}
+
+.feature-title {
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1;
+}
+
+.feature-description {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	color: var(--text-secondary);
+}
+
+/* Footer */
+.footer {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 100%;
+	gap: var(--gap-medium);
+}
+
+.input-field {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	width: 100%;
+	gap: var(--gap-small);
+	padding: 12px;
+	height: 104px;
+	background-color: var(--input-bg);
+	border: 1px solid var(--border-input);
+	border-radius: 6px;
+}
+
+.input-placeholder {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	color: var(--text-placeholder);
+}
+
+.input-actions-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: center;
+	width: 100%;
+	gap: 10px;
+}
+
+.input-actions {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-medium);
+}
+
+.action-button {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 7px 8px;
+	border-radius: var(--radius-small);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+	opacity: 0.5;
+}
+
+.action-button:hover {
+	opacity: 1;
+}
+
+.action-button-secondary {
+	background-color: var(--secondary-color);
+	border: 1px solid var(--border-light);
+	color: var(--text-color);
+}
+
+.action-button-primary {
+	background-color: var(--primary-color);
+	border: 1px solid var(--border-primary);
+	color: var(--text-color);
+}
+
+.action-icon {
+	width: 14px;
+	height: 14px;
+}
+
+.action-text {
+	font-size: 14px;
+	font-weight: 400;
+}
+
+/* Divider */
+.divider {
+	width: 100%;
+	height: 1px;
+	background-color: var(--border-color);
+	border: none;
+	border-top: 1px dashed var(--border-color);
+	margin: 20px 0;
+}
+
+.divider-dashed {
+	width: 100%;
+	height: 1px;
+	background-color: transparent;
+	border: none;
+	border-top: 1px dashed var(--border-color);
+	margin: 0;
+}
+
+/* Features Section */
+.features-section-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	width: 100%;
+	gap: var(--gap-xlarge);
+	margin-bottom: 40px;
+}
+
+@media (max-width: 992px) {
+	.features-section-container {
+		grid-template-columns: 1fr;
+		justify-items: center;
+	}
+}
+
+.features-text-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-large);
+	flex: 1;
+}
+
+.features-heading {
+	font-size: 32px;
+	font-weight: 510;
+	max-width: 320px;
+	line-height: 1.2em;
+}
+
+.features-description {
+	font-family: "Inter", sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+}
+
+.features-tabs-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	flex-wrap: wrap;
+	gap: var(--gap-small);
+}
+
+.tab-button {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 0 16px;
+	height: 32px;
+	background-color: transparent;
+	border: 1px solid var(--border-tab);
+	border-radius: var(--radius-round);
+	color: var(--text-color);
+	font-family: "Inter", sans-serif;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+}
+
+.tab-button.active {
+	background-color: var(--active-tab-color);
+	border: none;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--gap-medium);
+}
+
+.additional-feedback-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	gap: var(--gap-medium);
+	padding: var(--gap-medium);
+}
+
+.feature-highlight {
+	background-color: var(--card-bg);
+	border: 1px solid var(--border-card);
+	border-radius: var(--radius-large);
+}
+
+.feature-option {
+	border-radius: var(--radius-large);
+}
+
+.icon-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 20px;
+	height: 20px;
+	background-color: var(--primary-color);
+	border-radius: var(--radius-round);
+}
+
+.vector-1-icon {
+	width: 12px;
+	height: 12px;
+	stroke: var(--text-color);
+	stroke-width: 1.5px;
+}
+
+.prompt-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-medium);
+	padding: 1px 0 0;
+	flex: 1;
+}
+
+.prompt-text-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--gap-small);
+}
+
+h3.feature-title {
+	font-size: 15px;
+	font-weight: 510;
+	line-height: 1em;
+}
+
+.prompt-buttons-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	flex-wrap: wrap;
+	gap: var(--gap-small);
+}
+
+.feature-button {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 0 8px;
+	height: 28px;
+	background-color: transparent;
+	border: 1px solid var(--border-light);
+	border-radius: var(--radius-medium);
+	color: var(--text-color);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1em;
+	cursor: pointer;
+}
+
+.button-icon {
+	width: 14px;
+	height: 14px;
+}
+
+.button-text {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1;
+}
+
+.feature-circle {
+	width: 24px;
+	height: 24px;
+	border: 1.5px solid var(--primary-color);
+	border-radius: var(--radius-round);
+}
+
+.feature-image-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: block;
+	overflow: hidden;
+}
+
+.feature-bg {
+	width: 100%;
+	height: 100%;
+	background-image: url("../images/feature-bg.png");
+	background-size: cover;
+	background-position: center;
+	border-radius: var(--radius-xlarge);
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	object-fit: fill;
+}
+
+.feature-image {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	height: 100%;
+	width: auto;
+	object-fit: contain;
+	z-index: 2;
+}
+
+@media (max-width: 992px) {
+	.feature-image-container {
+		margin-top: 30px;
+		width: 100%;
+		max-width: 500px;
+		height: 400px;
+	}
+}
+
+/* Models Section */
+.models-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--gap-xlarge);
+}
+
+.models-heading {
+	font-size: 32px;
+	font-weight: 510;
+	text-align: center;
+	line-height: 1.2em;
+}
+
+.models-section-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: stretch;
+	align-items: stretch;
+	width: 100%;
+	gap: var(--gap-large);
+	flex-wrap: wrap;
+}
+
+@media (max-width: 992px) {
+	.models-section-container {
+		flex-direction: column;
+	}
+}
+
+.model-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-medium);
+	padding: var(--gap-medium);
+	flex: 1;
+	min-width: 250px;
+	background-color: var(--container-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+}
+
+.model-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	gap: var(--gap-large);
+}
+
+.model-name {
+	font-size: 16px;
+	font-weight: 590;
+	text-transform: uppercase;
+	line-height: 1em;
+}
+
+.model-badge {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	padding: 1px 8px;
+	height: 20px;
+	border-radius: var(--radius-round);
+	font-size: 11px;
+	font-weight: 510;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	text-transform: uppercase;
+	filter: drop-shadow(0px 25px 50px rgba(0, 0, 0, 0.25));
+}
+
+.model-badge.best {
+	background-color: #8078d4;
+}
+
+.model-badge.trending {
+	background-color: var(--text-color);
+	color: var(--background-color);
+}
+
+.model-badge.new {
+	background-color: var(--text-color);
+	color: var(--background-color);
+}
+
+.model-description {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	width: 100%;
+}
+
+.model-divider {
+	width: 100%;
+	height: 1px;
+	background-color: transparent;
+	border: none;
+	border-top: 1px dashed var(--border-light);
+	margin: 0;
+}
+
+.model-image {
+	width: 100%;
+	height: 200px;
+	border-radius: 8px;
+	object-fit: cover;
+}
+
+.model-button {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 7px 8px;
+	width: 100%;
+	background-color: var(--secondary-color);
+	border: 1px solid var(--border-light);
+	border-radius: var(--radius-small);
+	color: var(--text-color);
+	font-size: 14px;
+	font-weight: 510;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+}
+
+/* Plan/Act Mode Section */
+.plan-act-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	gap: var(--gap-large);
+	margin-bottom: 40px;
+}
+
+.plan-act-heading {
+	font-size: 32px;
+	font-weight: 510;
+	text-align: center;
+	line-height: 1.2em;
+}
+
+.plan-act-description {
+	font-family: "Inter", sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	text-align: center;
+}
+
+.plan-act-content {
+	display: flex;
+	flex-direction: row;
+	justify-content: stretch;
+	align-items: stretch;
+	gap: 32px;
+	width: 100%;
+	max-width: 880px;
+	margin-top: 20px;
+	min-height: 500px;
+}
+
+@media (max-width: 768px) {
+	.plan-act-content {
+		flex-direction: column;
+	}
+}
+
+.plan-mode-container {
+	display: flex;
+	flex-direction: column;
+	padding: 4px;
+	flex: 1;
+	background-color: #f5a524;
+	border-radius: var(--radius-xlarge);
+	height: 500px;
+}
+
+.act-mode-container {
+	display: flex;
+	flex-direction: column;
+	padding: 4px;
+	flex: 1;
+	background-color: #006fee;
+	border-radius: var(--radius-xlarge);
+	margin-top: 80px;
+	height: 500px;
+}
+
+.mode-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: stretch;
+	align-items: stretch;
+	width: 100%;
+	gap: var(--gap-small);
+	padding: var(--gap-medium);
+}
+
+.mode-title {
+	font-family: "Azeret Mono", monospace;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 1.4em;
+	color: var(--text-color);
+	filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1));
+}
+
+.mode-content {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--gap-medium);
+	padding: var(--gap-large);
+	background-color: var(--text-color);
+	border-radius: var(--radius-xlarge);
+	height: 100%;
+	justify-content: space-around;
+	min-height: 450px;
+}
+
+.plan-mode-container .mode-content {
+	border: 2px solid #f5a524;
+}
+
+.act-mode-container .mode-content {
+	border: 2px solid #006fee;
+}
+
+.mode-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	gap: 10px;
+	height: 50px;
+	padding-left: 10px;
+}
+
+.mode-item.disabled {
+	opacity: 0.5;
+}
+
+.mode-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mode-text {
+	font-family: "Azeret Mono", monospace;
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 1.5em;
+	color: #18181b;
+	text-align: left;
+	margin-left: 10px;
+}
+
+.line-icon {
+	width: 14px;
+	height: 14px;
+	display: block;
+}
+
+/* MCP Servers Section */
+.mcp-servers-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--gap-large);
+	margin-bottom: 40px;
+}
+
+.mcp-content-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	gap: 56px;
+}
+
+@media (max-width: 992px) {
+	.mcp-content-container {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+}
+
+.mcp-text-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-large);
+	width: 100%;
+}
+
+.mcp-heading {
+	font-size: 32px;
+	font-weight: 510;
+	line-height: 1.2em;
+}
+
+.mcp-description {
+	font-family: "Inter", sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+}
+
+.mcp-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-small);
+	padding: 0 16px;
+	height: 36px;
+	background-color: var(--primary-color);
+	border: 1px solid var(--border-primary);
+	border-radius: var(--radius-small);
+	color: var(--text-color);
+	font-size: 14px;
+	font-weight: 510;
+	line-height: 1.3em;
+	letter-spacing: -1%;
+	cursor: pointer;
+	width: fit-content;
+}
+
+.mcp-count {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}
+
+.mcp-count svg {
+	width: auto;
+	height: auto;
+	max-width: 100%;
+}
+
+@media (max-width: 992px) {
+	.mcp-count {
+		margin-top: 20px;
+	}
+
+	.mcp-count svg {
+		transform: scale(0.8);
+	}
+}

webview-ui/src/assets/images/50.svg

@@ -0,0 +1,8 @@
+<svg width="1048" height="187" viewBox="0 0 1048 187" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64.0535 186.531C51.9601 186.531 41.2428 184.279 31.9016 179.775C22.6439 175.271 15.221 169.141 9.63304 161.385C4.12845 153.545 0.959134 144.704 0.125104 134.863L0 133.361H26.7724L26.8975 134.237C27.7315 139.658 29.8166 144.579 33.1527 148.999C36.5722 153.336 40.9509 156.798 46.2886 159.383C51.6264 161.885 57.5898 163.136 64.1786 163.136C71.7683 163.136 78.4822 161.51 84.3204 158.257C90.1586 155.004 94.7041 150.501 97.9568 144.746C101.21 138.991 102.836 132.402 102.836 124.979V124.729C102.836 117.39 101.168 110.884 97.8317 105.213C94.579 99.5414 90.0752 95.0794 84.3204 91.8267C78.5656 88.574 71.9768 86.9476 64.5539 86.9476C58.9659 86.9476 53.7949 87.7816 49.0409 89.4497C44.287 91.0343 40.0751 93.453 36.4054 96.7057C34.8207 98.1236 33.2778 99.7082 31.7765 101.46C30.3587 103.211 29.0659 105.088 27.8983 107.089H3.25272L12.1351 3.00251H119.85V26.6472H34.9041L29.3995 83.82H30.0251C32.694 79.7332 36.0718 76.272 40.1585 73.4363C44.3287 70.6006 48.9992 68.4738 54.1702 67.056C59.4246 65.5547 65.0126 64.8041 70.9342 64.8041C82.4438 64.8041 92.6607 67.3896 101.585 72.5606C110.509 77.6482 117.515 84.654 122.602 93.5781C127.773 102.502 130.359 112.719 130.359 124.229V124.479C130.359 136.656 127.523 147.415 121.852 156.756C116.18 166.097 108.34 173.395 98.3321 178.649C88.4071 183.904 76.9809 186.531 64.0535 186.531Z" fill="white"/>
+<path d="M218.933 186.531C204.587 186.531 192.244 182.736 181.902 175.146C171.643 167.557 163.762 156.798 158.257 142.869C152.753 128.941 150 112.427 150 93.3279V93.0777C150 73.9784 152.753 57.4646 158.257 43.5363C163.762 29.6081 171.643 18.8908 181.902 11.3845C192.244 3.79483 204.587 0 218.933 0C233.278 0 245.58 3.79483 255.839 11.3845C266.181 18.8908 274.104 29.6081 279.608 43.5363C285.196 57.4646 287.99 73.9784 287.99 93.0777V93.3279C287.99 112.427 285.196 128.941 279.608 142.869C274.104 156.798 266.181 167.557 255.839 175.146C245.58 182.736 233.278 186.531 218.933 186.531ZM218.933 163.011C227.523 163.011 234.821 160.217 240.826 154.629C246.914 149.041 251.543 141.034 254.713 130.609C257.965 120.184 259.592 107.757 259.592 93.3279V93.0777C259.592 78.649 257.965 66.2637 254.713 55.9217C251.543 45.4963 246.914 37.4896 240.826 31.9016C234.821 26.3136 227.523 23.5196 218.933 23.5196C210.342 23.5196 203.003 26.3136 196.914 31.9016C190.909 37.4896 186.322 45.4963 183.153 55.9217C179.984 66.2637 178.399 78.649 178.399 93.0777V93.3279C178.399 107.757 179.984 120.184 183.153 130.609C186.322 141.034 190.909 149.041 196.914 154.629C203.003 160.217 210.342 163.011 218.933 163.011Z" fill="white"/>
+<path d="M313.512 122.602V97.9568H443.745V122.602H313.512ZM366.306 173.019V47.5397H390.826V173.019H366.306Z" fill="white"/>
+<path d="M526.44 183.528V3.00251H558.842L617.265 146.998H618.016L676.44 3.00251H708.967V183.528H683.321V50.4171H670.435L699.709 8.00668L628.024 183.528H607.257L535.697 8.00668L564.972 50.4171H552.086V183.528H526.44Z" fill="white"/>
+<path d="M819.559 186.531C802.545 186.531 787.741 182.736 775.147 175.146C762.637 167.557 752.962 156.798 746.123 142.869C739.284 128.858 735.864 112.302 735.864 93.2028V93.0777C735.864 73.9784 739.284 57.4646 746.123 43.5363C752.962 29.6081 762.637 18.8908 775.147 11.3845C787.658 3.79483 802.462 0 819.559 0C832.82 0 844.789 2.54379 855.464 7.63137C866.14 12.719 874.939 19.7665 881.861 28.774C888.784 37.7815 893.162 48.2486 894.997 60.1752L895.122 61.4263H867.224L866.473 58.9242C864.555 51.8349 861.428 45.7465 857.091 40.6589C852.837 35.5714 847.541 31.6931 841.202 29.0242C834.947 26.2719 827.733 24.8958 819.559 24.8958C808.383 24.8958 798.667 27.6898 790.41 33.2778C782.236 38.8658 775.898 46.7474 771.394 56.9225C766.89 67.0977 764.638 79.1494 764.638 93.0777V93.2028C764.638 107.048 766.89 119.141 771.394 129.483C775.898 139.742 782.278 147.665 790.535 153.253C798.792 158.841 808.467 161.635 819.559 161.635C827.566 161.635 834.697 160.301 840.952 157.632C847.291 154.879 852.67 150.876 857.091 145.622C861.511 140.367 864.805 133.945 866.974 126.355L867.349 125.104H895.247L894.997 126.355C893.162 138.366 888.784 148.916 881.861 158.007C875.022 167.014 866.265 174.02 855.589 179.024C844.914 184.029 832.904 186.531 819.559 186.531Z" fill="white"/>
+<path d="M934.78 121.852V98.3321H981.069C993.163 98.3321 1002.55 95.2045 1009.22 88.9493C1015.97 82.6106 1019.35 73.8533 1019.35 62.6773V62.4271C1019.35 51.0843 1015.97 42.2853 1009.22 36.0301C1002.55 29.7749 993.163 26.6472 981.069 26.6472H934.78V3.00251H988.075C999.918 3.00251 1010.3 5.5046 1019.23 10.5088C1028.23 15.4295 1035.28 22.352 1040.37 31.2761C1045.46 40.1168 1048 50.4171 1048 62.1769V62.4271C1048 74.1869 1045.46 84.5706 1040.37 93.5781C1035.28 102.502 1028.23 109.466 1019.23 114.471C1010.3 119.391 999.918 121.852 988.075 121.852H934.78ZM920.769 183.528V3.00251H948.792V183.528H920.769Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/action-icon-1.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.982 0C19.7852 0.00900726 13.6746 3.96537 9.31269 8H1L0 9V15L0.294 15.708L2.27591 17.6899L2.27799 17.708L10.278 25.708L10.296 25.7101L12.294 27.7081L13 28.0001H19L20 27.0001V18.692C24.0381 14.3368 27.992 8.22601 27.984 1L26.982 0ZM2 10H7.28614C5.18494 12.208 3.6634 14.2399 2.83687 15.4219L2 14.586V10ZM13.4 26.0001L12.561 25.1531C13.7452 24.331 15.7799 22.8169 17.99 20.7222V26.0001H13.4ZM11.114 23.712L4.27199 16.874C6.25599 14 14.758 2.71 25.956 2.032C25.304 13.256 13.982 21.738 11.114 23.712ZM6 28V26H2V22H0V28H6ZM19.4951 12.6657C19.8243 12.1726 20 11.5929 20 11C20 10.6052 19.9221 10.2143 19.7707 9.84965C19.6193 9.48502 19.3974 9.15386 19.1178 8.87515C18.8382 8.59645 18.5063 8.37568 18.1411 8.2255C17.776 8.07533 17.3848 7.9987 16.99 8.00002C16.3971 8.00199 15.8181 8.17962 15.326 8.51046C14.834 8.84131 14.451 9.31053 14.2255 9.85888C14 10.4072 13.942 11.0101 14.0589 11.5914C14.1758 12.1727 14.4623 12.7063 14.8822 13.1248C15.3022 13.5434 15.8367 13.8281 16.4184 13.9431C17.0001 14.058 17.6028 13.998 18.1504 13.7707C18.6979 13.5433 19.1659 13.1588 19.4951 12.6657Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/action-icon-2.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8572 12.5L0 25V0L17.8572 12.5ZM1.99311 21.1699L14.3843 12.5L1.99311 3.83016V21.1699ZM7.01095 25V22.5375L21.3953 12.5L7.01095 2.46254V0L24.8681 12.5L7.01095 25Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/back-icon.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.8648 9.99911L10.6222 18.7565L9.37867 20L-0.000461927 10.6209V9.37736L9.37867 -0.00177104L10.6222 1.24174L1.8648 9.99911Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/button-icon-1.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="28" viewBox="0 0 26 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.14 0.28L25.7 6.88L26 7.6V27L25 28H18V26H24V10H17L16 9V2H4V10H2V1L3 0H18.44L19.14 0.28ZM18 8H24L18 2V8ZM15 12H1L0 13V27L1 28H15L16 27V13L15 12ZM14 26H2V14H14V26ZM12 17V23H9.99999V19.414L4.70799 24.708L3.29199 23.292L8.58599 18H5.05999V16H11L12 17Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/feature-icon-1.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.982 0C19.7852 0.00900726 13.6746 3.96537 9.31269 8H1L0 9V15L0.294 15.708L2.27591 17.6899L2.27799 17.708L10.278 25.708L10.296 25.7101L12.294 27.7081L13 28.0001H19L20 27.0001V18.692C24.0381 14.3368 27.992 8.22601 27.984 1L26.982 0ZM2 10H7.28614C5.18494 12.208 3.6634 14.2399 2.83687 15.4219L2 14.586V10ZM13.4 26.0001L12.561 25.1531C13.7452 24.331 15.7799 22.8169 17.99 20.7222V26.0001H13.4ZM11.114 23.712L4.27199 16.874C6.25599 14 14.758 2.71 25.956 2.032C25.304 13.256 13.982 21.738 11.114 23.712ZM6 28V26H2V22H0V28H6ZM19.4951 12.6657C19.8243 12.1726 20 11.5929 20 11C20 10.6052 19.9221 10.2143 19.7707 9.84965C19.6193 9.48502 19.3974 9.15386 19.1178 8.87515C18.8382 8.59645 18.5063 8.37568 18.1411 8.2255C17.776 8.07533 17.3848 7.9987 16.99 8.00002C16.3971 8.00199 15.8181 8.17962 15.326 8.51046C14.834 8.84131 14.451 9.31053 14.2255 9.85888C14 10.4072 13.942 11.0101 14.0589 11.5914C14.1758 12.1727 14.4623 12.7063 14.8822 13.1248C15.3022 13.5434 15.8367 13.8281 16.4184 13.9431C17.0001 14.058 17.6028 13.998 18.1504 13.7707C18.6979 13.5433 19.1659 13.1588 19.4951 12.6657Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/feature-icon-2.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8.38L13.28 21.66H14.72L28 8.38V6.94L21.36 0.3L20.64 0H7.36L6.64 0.3L0 6.94V8.38ZM14 19.5L2.16 7.66L7.78 2H20.22L25.84 7.66L14 19.5ZM14 4.04004H19.38L23 7.66004L14 16.46V4.04004Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/feature-icon-3.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.26 12L22 4H24V2H14V0H12V2H2V4H4L0.76 12H0V14H0.3C0.612778 14.9958 1.24551 15.8606 2.1 16.46C2.9433 17.0715 3.95832 17.4008 5 17.4008C6.04168 17.4008 7.0567 17.0715 7.9 16.46C8.75472 15.8563 9.39277 14.9939 9.72 14H10V12H9.1L5.76 4H12V20H8L7.22 20.36L3.22 25.38L4 27H22L22.78 25.38L18.78 20.36L18 20H14V4H20.26L16.92 12H16V14H16.3C16.6271 14.9909 17.2584 15.8534 18.104 16.4647C18.9496 17.0761 19.9665 17.4052 21.01 17.4052C22.0535 17.4052 23.0704 17.0761 23.916 16.4647C24.7616 15.8534 25.3929 14.9909 25.72 14H26V12H25.26ZM6.44 15.02C5.99893 15.2641 5.50408 15.3947 5 15.4C4.50189 15.3974 4.01284 15.2665 3.58 15.02C3.13862 14.7781 2.76675 14.4268 2.5 14H7.5C7.2355 14.4217 6.87151 14.7719 6.44 15.02ZM6.94 12H2.94L4.94 7.2L6.94 12ZM17.52 22L20 25H6L8.48 22H17.52ZM21.08 7.24L23.08 12.04H19.08L21.08 7.24ZM22.44 15.06C22.0027 15.3134 21.5054 15.4447 21 15.44C20.5006 15.4471 20.0091 15.3156 19.58 15.06C19.138 14.8013 18.7669 14.4371 18.5 14H23.5C23.2521 14.445 22.885 14.8121 22.44 15.06Z" fill="white"/>
+</svg>

webview-ui/src/assets/images/feature-icon-4.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7866 27.0006H14.214L17.672 23.5426H22.4972L23.5024 22.5374V17.672L27.0006 14.214V12.7866L23.5627 9.32859V4.42304L22.5575 3.43791H17.672L14.214 0H12.7866L9.42911 3.43791H4.46325L3.3977 4.44314V9.32859L0 12.7866V14.214L3.3977 17.672V22.5374L4.46325 23.5426H9.42911L12.7866 27.0006ZM9.75079 21.5321H5.40817V17.2498L5.16691 16.5462L2.1311 13.4903L5.1066 10.4544L5.40817 9.75079V5.44838H9.75079L10.4746 5.16691L13.4501 2.1311L16.5462 5.16691L17.2498 5.44838H21.4919V9.75079L21.8337 10.4544L24.8896 13.4903L21.7734 16.5462L21.4919 17.2498V21.5321H17.2498L16.4859 21.8337L13.4501 24.8695L10.4746 21.8136L9.75079 21.5321ZM10.8968 18.476H12.3243L19.9036 10.8967L18.4762 9.46924L11.6206 16.3449L8.84607 13.5703L7.41864 14.9977L10.8968 18.476Z" fill="#E2D5FF"/>
+</svg>

webview-ui/src/assets/images/vector-1.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.20874 8.03249L5.75511 13.5892L17.8788 1.08664" stroke="white" stroke-width="1.5"/>
+</svg>

webview-ui/src/assets/images/vector.svg

@@ -0,0 +1,3 @@
+<svg width="122" height="128" viewBox="0 0 122 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M121.441 72.2998L113.772 56.859V47.9663C113.772 33.2261 101.976 21.2884 87.4275 21.2884H74.3218C75.2704 19.3347 75.7914 17.1385 75.7914 14.8211C75.7914 6.62905 69.2185 0 61.096 0C52.9735 0 46.4006 6.62905 46.4006 14.8211C46.4006 17.1385 46.9217 19.3347 47.8702 21.2884H34.7646C20.2162 21.2884 8.41978 33.2261 8.41978 47.9663V56.859L0.591155 72.2594C-0.197052 73.8088 -0.197052 75.6547 0.591155 77.2042L8.41978 92.4295V101.322C8.41978 116.062 20.2162 128 34.7646 128H87.4275C101.976 128 113.772 116.062 113.772 101.322V92.4295L121.427 77.1503C122.189 75.6278 122.189 73.8358 121.441 72.2998ZM53.0804 84.8842C53.0804 91.5806 47.6965 97.0105 41.0569 97.0105C34.4172 97.0105 29.0334 91.5806 29.0334 84.8842V63.3263C29.0334 56.6299 34.4172 51.2 41.0569 51.2C47.6965 51.2 53.0804 56.6299 53.0804 63.3263V84.8842ZM91.8227 84.8842C91.8227 91.5806 86.4389 97.0105 79.7992 97.0105C73.1596 97.0105 67.7757 91.5806 67.7757 84.8842V63.3263C67.7757 56.6299 73.1596 51.2 79.7992 51.2C86.4389 51.2 91.8227 56.6299 91.8227 63.3263V84.8842Z" fill="white"/>
+</svg>

webview-ui/src/assets/js/script.js

@@ -0,0 +1,126 @@
+document.addEventListener("DOMContentLoaded", function () {
+	// Tab switching functionality
+	const tabButtons = document.querySelectorAll(".tab-button")
+
+	tabButtons.forEach((button) => {
+		button.addEventListener("click", function () {
+			// Remove active class from all tabs
+			tabButtons.forEach((btn) => {
+				btn.classList.remove("active")
+			})
+
+			// Add active class to clicked tab
+			this.classList.add("active")
+
+			// Here you would typically show/hide content based on the selected tab
+			// For this demo, we're just changing the active state of the tab
+		})
+	})
+
+	// Button hover effects
+	const allButtons = document.querySelectorAll("button")
+
+	allButtons.forEach((button) => {
+		button.addEventListener("mouseenter", function () {
+			this.style.opacity = "1"
+			this.style.transform = "scale(1.02)"
+			this.style.transition = "all 0.2s ease"
+		})
+
+		button.addEventListener("mouseleave", function () {
+			this.style.transform = "scale(1)"
+
+			// Only reset opacity for action buttons that have default opacity of 0.5
+			if (this.classList.contains("action-button")) {
+				this.style.opacity = "0.5"
+			}
+		})
+	})
+
+	// Feature card hover effects
+	const featureCards = document.querySelectorAll(".feature-card")
+
+	featureCards.forEach((card) => {
+		card.addEventListener("mouseenter", function () {
+			this.style.transform = "translateY(-5px)"
+			this.style.boxShadow = "0 10px 20px rgba(0, 0, 0, 0.2)"
+			this.style.transition = "all 0.3s ease"
+		})
+
+		card.addEventListener("mouseleave", function () {
+			this.style.transform = "translateY(0)"
+			this.style.boxShadow = "none"
+		})
+	})
+
+	// Feature option hover effects
+	const featureOptions = document.querySelectorAll(".feature-option")
+
+	featureOptions.forEach((option) => {
+		option.addEventListener("mouseenter", function () {
+			this.style.backgroundColor = "rgba(43, 43, 43, 0.5)"
+			this.style.transition = "all 0.2s ease"
+		})
+
+		option.addEventListener("mouseleave", function () {
+			this.style.backgroundColor = "transparent"
+		})
+	})
+
+	// Input field focus effect
+	const inputField = document.querySelector(".input-field")
+	const inputPlaceholder = document.querySelector(".input-placeholder")
+
+	if (inputField && inputPlaceholder) {
+		inputField.addEventListener("click", function () {
+			inputPlaceholder.style.opacity = "0.7"
+			inputField.style.borderColor = "#4DAAFC"
+
+			// Create a temporary input element for demonstration
+			if (!document.querySelector(".temp-input")) {
+				const tempInput = document.createElement("input")
+				tempInput.type = "text"
+				tempInput.className = "temp-input"
+				tempInput.style.width = "100%"
+				tempInput.style.background = "transparent"
+				tempInput.style.border = "none"
+				tempInput.style.outline = "none"
+				tempInput.style.color = "#FFFFFF"
+				tempInput.style.fontSize = "14px"
+				tempInput.style.fontFamily = "SF Pro, Inter, sans-serif"
+
+				inputPlaceholder.style.display = "none"
+				inputField.insertBefore(tempInput, inputField.firstChild)
+				tempInput.focus()
+
+				tempInput.addEventListener("blur", function () {
+					if (!this.value) {
+						inputPlaceholder.style.display = "block"
+						inputPlaceholder.style.opacity = "1"
+						this.remove()
+					}
+					inputField.style.borderColor = "#3C3C3C"
+				})
+			}
+		})
+	}
+
+	// Back button hover effect
+	const backButton = document.querySelector(".back-button-container")
+
+	if (backButton) {
+		backButton.addEventListener("mouseenter", function () {
+			this.style.opacity = "0.8"
+			this.style.cursor = "pointer"
+		})
+
+		backButton.addEventListener("mouseleave", function () {
+			this.style.opacity = "1"
+		})
+
+		backButton.addEventListener("click", function () {
+			// This would typically navigate back to the main Cline page
+			alert("Navigating back to Cline...")
+		})
+	}
+})

webview-ui/src/assets/welcome-tab.html

@@ -0,0 +1,406 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Cline - Extension v1.0</title>
+		<link rel="stylesheet" href="css/styles.css" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&family=Inter:wght@400;500;600&family=SF+Pro:wght@400;500&display=swap"
+			rel="stylesheet" />
+	</head>
+
+	<body>
+		<div class="home">
+			<div class="main-container">
+				<!-- Back Button Container -->
+				<div class="back-button-container">
+					<div class="back-icon">
+						<img src="images/back-icon.svg" alt="Back Icon" />
+					</div>
+					<div class="back-text">Back to Cline</div>
+				</div>
+
+				<!-- Account Info -->
+				<div class="account-info">
+					<img src="images/vector.svg" alt="Vector" class="vector-icon" />
+
+					<div class="welcome-message-container">
+						<h1 class="welcome-message">Get Started on Cline</h1>
+						<p class="description">Let's start and learn the basics of Cline</p>
+					</div>
+
+					<div class="buttons-container">
+						<button class="primary-button">Let's Create your Account!</button>
+						<button class="secondary-button">Start Coding!</button>
+					</div>
+
+					<div class="features-container">
+						<div class="feature-row">
+							<div class="feature-card">
+								<div class="feature-icon-container">
+									<img src="images/feature-icon-1.svg" alt="Feature Icon" class="feature-icon" />
+									<div class="feature-title">Snake game</div>
+								</div>
+								<div class="feature-description">> Build a Snake game...</div>
+							</div>
+
+							<div class="feature-card">
+								<div class="feature-icon-container">
+									<img src="images/feature-icon-2.svg" alt="Feature Icon" class="feature-icon" />
+									<div class="feature-title">To-do App</div>
+								</div>
+								<div class="feature-description">> Generate a to-do App...</div>
+							</div>
+
+							<div class="feature-card">
+								<div class="feature-icon-container">
+									<img src="images/feature-icon-3.svg" alt="Feature Icon" class="feature-icon" />
+									<div class="feature-title">Script</div>
+								</div>
+								<div class="feature-description">> Write a script and then...</div>
+							</div>
+
+							<div class="feature-card">
+								<div class="feature-icon-container">
+									<img src="images/feature-icon-4.svg" alt="Feature Icon" class="feature-icon" />
+									<div class="feature-title">New Feature</div>
+								</div>
+								<div class="feature-description">> Read my code & suggest...</div>
+							</div>
+						</div>
+
+						<div class="footer">
+							<div class="input-field">
+								<div class="input-placeholder">Type your prompt here...</div>
+
+								<div class="input-actions-container">
+									<div class="input-actions">
+										<button class="action-button action-button-secondary">
+											<img src="images/action-icon-1.svg" alt="Action Icon" class="action-icon" />
+											<span class="action-text">Improve prompt</span>
+										</button>
+
+										<button class="action-button action-button-primary">
+											<img src="images/action-icon-2.svg" alt="Action Icon" class="action-icon" />
+											<span class="action-text">Start construction</span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="divider"></div>
+
+				<!-- Features Section -->
+				<div class="features-section-container">
+					<div class="features-text-container">
+						<h2 class="features-heading">Work better with the best features of Cline</h2>
+						<p class="features-description">
+							It's easy to lose control as they make rapid changes to your codebase. That's why we built safe
+							features to make the control on your code.
+						</p>
+
+						<div class="divider-dashed"></div>
+
+						<div class="features-tabs-container">
+							<button class="tab-button active">Key Features</button>
+							<button class="tab-button">Tools</button>
+							<button class="tab-button">Checkpoints</button>
+						</div>
+
+						<div class="container">
+							<div class="additional-feedback-container feature-highlight">
+								<div class="icon-container">
+									<img src="images/vector-1.svg" alt="Vector 1" class="vector-1-icon" />
+								</div>
+
+								<div class="prompt-container">
+									<div class="prompt-text-container">
+										<h3 class="feature-title">File Editing</h3>
+										<p class="feature-description">More context of this key feature</p>
+									</div>
+
+									<div class="divider-dashed"></div>
+
+									<div class="prompt-buttons-container">
+										<button class="feature-button">
+											<img src="images/button-icon-1.svg" alt="Button Icon" class="button-icon" />
+											<span class="button-text">Create new files</span>
+										</button>
+
+										<button class="feature-button">
+											<img src="images/button-icon-1.svg" alt="Button Icon" class="button-icon" />
+											<span class="button-text">Modify existing code</span>
+										</button>
+
+										<button class="feature-button">
+											<img src="images/button-icon-1.svg" alt="Button Icon" class="button-icon" />
+											<span class="button-text">Search and replace across files</span>
+										</button>
+									</div>
+								</div>
+							</div>
+
+							<div class="additional-feedback-container feature-option">
+								<div class="feature-circle"></div>
+								<h3 class="feature-title">Terminal Commands</h3>
+							</div>
+
+							<div class="additional-feedback-container feature-option">
+								<div class="feature-circle"></div>
+								<h3 class="feature-title">Code Analysis</h3>
+							</div>
+
+							<div class="additional-feedback-container feature-option">
+								<div class="feature-circle"></div>
+								<h3 class="feature-title">Browser Integration</h3>
+							</div>
+						</div>
+					</div>
+
+					<div class="feature-image-container">
+						<div class="feature-bg"></div>
+					</div>
+				</div>
+
+				<div class="divider"></div>
+
+				<!-- Models Section -->
+				<div class="models-container">
+					<h2 class="models-heading">Top 3 models for coding</h2>
+
+					<div class="models-section-container">
+						<!-- Anthropic Model Card -->
+						<div class="model-card">
+							<div class="model-header">
+								<div class="model-name">anthropic</div>
+								<div class="model-badge best">Best</div>
+							</div>
+
+							<div class="model-description">Leading model for agentic coding</div>
+
+							<div class="model-divider"></div>
+
+							<img src="images/anthropic-model.jpg" alt="Anthropic Model" class="model-image" />
+
+							<button class="model-button">Create a new project</button>
+						</div>
+
+						<!-- Google Model Card -->
+						<div class="model-card">
+							<div class="model-header">
+								<div class="model-name">google</div>
+								<div class="model-badge trending">Trending</div>
+							</div>
+
+							<div class="model-description">Large 1M context window, great value</div>
+
+							<div class="model-divider"></div>
+
+							<img src="images/google-model.jpg" alt="Google Model" class="model-image" />
+
+							<button class="model-button">Create a new project</button>
+						</div>
+
+						<!-- Meta-Llama Model Card -->
+						<div class="model-card">
+							<div class="model-header">
+								<div class="model-name">meta-llama</div>
+								<div class="model-badge new">New</div>
+							</div>
+
+							<div class="model-description">Efficient performance at lower cost</div>
+
+							<div class="model-divider"></div>
+
+							<img src="images/meta-model.jpg" alt="Meta-Llama Model" class="model-image" />
+
+							<button class="model-button">Create a new project</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="divider"></div>
+
+				<!-- Plan/Act Mode Section -->
+				<div class="plan-act-container">
+					<h2 class="plan-act-heading">Plan/Act Mode</h2>
+					<p class="plan-act-description">Lorem Ipsum about this topic</p>
+
+					<div class="divider-dashed"></div>
+
+					<div class="plan-act-content">
+						<!-- Plan Mode Column -->
+						<div class="plan-mode-container">
+							<div class="mode-header">
+								<h3 class="mode-title">Plan Mode</h3>
+							</div>
+							<div class="mode-content">
+								<div class="mode-item">
+									<div class="mode-icon plan-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0Y1QTUyNCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Plan Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Read files & Analysis</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon plan-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0Y1QTUyNCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Plan Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Strategy Development</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon plan-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0Y1QTUyNCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Plan Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Context Gathering</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon plan-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0Y1QTUyNCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Plan Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Requirements Analysis</div>
+								</div>
+								<div class="mode-item disabled">
+									<div class="mode-icon plan-icon-disabled">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0YzMTI2MCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Disabled Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Code Modifications</div>
+								</div>
+								<div class="mode-item disabled">
+									<div class="mode-icon plan-icon-disabled">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iI0YzMTI2MCIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Disabled Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">File Creation/Deletion</div>
+								</div>
+							</div>
+						</div>
+
+						<!-- Act Mode Column -->
+						<div class="act-mode-container">
+							<div class="mode-header">
+								<h3 class="mode-title">Act Mode</h3>
+							</div>
+							<div class="mode-content">
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Read files & Analysis</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Code Modifications</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">File Creation/Deletion</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Execute Commands</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Run Tests</div>
+								</div>
+								<div class="mode-item">
+									<div class="mode-icon act-icon">
+										<img
+											src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdIMTMiIHN0cm9rZT0iIzAwNkZFRSIgc3Ryb2tlLXdpZHRoPSIyLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
+											alt="Act Icon"
+											class="line-icon" />
+									</div>
+									<div class="mode-text">Deploy Changes</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="divider"></div>
+
+				<!-- MCP Servers Section -->
+				<div class="mcp-servers-container">
+					<div class="mcp-content-container">
+						<div class="mcp-text-container">
+							<h2 class="mcp-heading">The largest ecosystem of MCP Servers for VS Code</h2>
+							<p class="mcp-description">
+								The Model Context Protocol (MCP) allows seamless communication with locally running servers that
+								extend Cline's functionality with additional tools and context-aware resources.
+							</p>
+							<button class="mcp-button">Add an MCP Server</button>
+						</div>
+						<div class="mcp-count">
+							<svg width="1048" height="187" viewBox="0 0 1048 187" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path
+									d="M64.0535 186.531C51.9601 186.531 41.2428 184.279 31.9016 179.775C22.6439 175.271 15.221 169.141 9.63304 161.385C4.12845 153.545 0.959134 144.704 0.125104 134.863L0 133.361H26.7724L26.8975 134.237C27.7315 139.658 29.8166 144.579 33.1527 148.999C36.5722 153.336 40.9509 156.798 46.2886 159.383C51.6264 161.885 57.5898 163.136 64.1786 163.136C71.7683 163.136 78.4822 161.51 84.3204 158.257C90.1586 155.004 94.7041 150.501 97.9568 144.746C101.21 138.991 102.836 132.402 102.836 124.979V124.729C102.836 117.39 101.168 110.884 97.8317 105.213C94.579 99.5414 90.0752 95.0794 84.3204 91.8267C78.5656 88.574 71.9768 86.9476 64.5539 86.9476C58.9659 86.9476 53.7949 87.7816 49.0409 89.4497C44.287 91.0343 40.0751 93.453 36.4054 96.7057C34.8207 98.1236 33.2778 99.7082 31.7765 101.46C30.3587 103.211 29.0659 105.088 27.8983 107.089H3.25272L12.1351 3.00251H119.85V26.6472H34.9041L29.3995 83.82H30.0251C32.694 79.7332 36.0718 76.272 40.1585 73.4363C44.3287 70.6006 48.9992 68.4738 54.1702 67.056C59.4246 65.5547 65.0126 64.8041 70.9342 64.8041C82.4438 64.8041 92.6607 67.3896 101.585 72.5606C110.509 77.6482 117.515 84.654 122.602 93.5781C127.773 102.502 130.359 112.719 130.359 124.229V124.479C130.359 136.656 127.523 147.415 121.852 156.756C116.18 166.097 108.34 173.395 98.3321 178.649C88.4071 183.904 76.9809 186.531 64.0535 186.531Z"
+									fill="white" />
+								<path
+									d="M218.933 186.531C204.587 186.531 192.244 182.736 181.902 175.146C171.643 167.557 163.762 156.798 158.257 142.869C152.753 128.941 150 112.427 150 93.3279V93.0777C150 73.9784 152.753 57.4646 158.257 43.5363C163.762 29.6081 171.643 18.8908 181.902 11.3845C192.244 3.79483 204.587 0 218.933 0C233.278 0 245.58 3.79483 255.839 11.3845C266.181 18.8908 274.104 29.6081 279.608 43.5363C285.196 57.4646 287.99 73.9784 287.99 93.0777V93.3279C287.99 112.427 285.196 128.941 279.608 142.869C274.104 156.798 266.181 167.557 255.839 175.146C245.58 182.736 233.278 186.531 218.933 186.531ZM218.933 163.011C227.523 163.011 234.821 160.217 240.826 154.629C246.914 149.041 251.543 141.034 254.713 130.609C257.965 120.184 259.592 107.757 259.592 93.3279V93.0777C259.592 78.649 257.965 66.2637 254.713 55.9217C251.543 45.4963 246.914 37.4896 240.826 31.9016C234.821 26.3136 227.523 23.5196 218.933 23.5196C210.342 23.5196 203.003 26.3136 196.914 31.9016C190.909 37.4896 186.322 45.4963 183.153 55.9217C179.984 66.2637 178.399 78.649 178.399 93.0777V93.3279C178.399 107.757 179.984 120.184 183.153 130.609C186.322 141.034 190.909 149.041 196.914 154.629C203.003 160.217 210.342 163.011 218.933 163.011Z"
+									fill="white" />
+								<path
+									d="M313.512 122.602V97.9568H443.745V122.602H313.512ZM366.306 173.019V47.5397H390.826V173.019H366.306Z"
+									fill="white" />
+								<path
+									d="M526.44 183.528V3.00251H558.842L617.265 146.998H618.016L676.44 3.00251H708.967V183.528H683.321V50.4171H670.435L699.709 8.00668L628.024 183.528H607.257L535.697 8.00668L564.972 50.4171H552.086V183.528H526.44Z"
+									fill="white" />
+								<path
+									d="M819.559 186.531C802.545 186.531 787.741 182.736 775.147 175.146C762.637 167.557 752.962 156.798 746.123 142.869C739.284 128.858 735.864 112.302 735.864 93.2028V93.0777C735.864 73.9784 739.284 57.4646 746.123 43.5363C752.962 29.6081 762.637 18.8908 775.147 11.3845C787.658 3.79483 802.462 0 819.559 0C832.82 0 844.789 2.54379 855.464 7.63137C866.14 12.719 874.939 19.7665 881.861 28.774C888.784 37.7815 893.162 48.2486 894.997 60.1752L895.122 61.4263H867.224L866.473 58.9242C864.555 51.8349 861.428 45.7465 857.091 40.6589C852.837 35.5714 847.541 31.6931 841.202 29.0242C834.947 26.2719 827.733 24.8958 819.559 24.8958C808.383 24.8958 798.667 27.6898 790.41 33.2778C782.236 38.8658 775.898 46.7474 771.394 56.9225C766.89 67.0977 764.638 79.1494 764.638 93.0777V93.2028C764.638 107.048 766.89 119.141 771.394 129.483C775.898 139.742 782.278 147.665 790.535 153.253C798.792 158.841 808.467 161.635 819.559 161.635C827.566 161.635 834.697 160.301 840.952 157.632C847.291 154.879 852.67 150.876 857.091 145.622C861.511 140.367 864.805 133.945 866.974 126.355L867.349 125.104H895.247L894.997 126.355C893.162 138.366 888.784 148.916 881.861 158.007C875.022 167.014 866.265 174.02 855.589 179.024C844.914 184.029 832.904 186.531 819.559 186.531Z"
+									fill="white" />
+								<path
+									d="M934.78 121.852V98.3321H981.069C993.163 98.3321 1002.55 95.2045 1009.22 88.9493C1015.97 82.6106 1019.35 73.8533 1019.35 62.6773V62.4271C1019.35 51.0843 1015.97 42.2853 1009.22 36.0301C1002.55 29.7749 993.163 26.6472 981.069 26.6472H934.78V3.00251H988.075C999.918 3.00251 1010.3 5.5046 1019.23 10.5088C1028.23 15.4295 1035.28 22.352 1040.37 31.2761C1045.46 40.1168 1048 50.4171 1048 62.1769V62.4271C1048 74.1869 1045.46 84.5706 1040.37 93.5781C1035.28 102.502 1028.23 109.466 1019.23 114.471C1010.3 119.391 999.918 121.852 988.075 121.852H934.78ZM920.769 183.528V3.00251H948.792V183.528H920.769Z"
+									fill="white" />
+							</svg>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<script src="js/script.js"></script>
+	</body>
+</html>