feat: whyrating - initial project from turbostarter boilerplate

This commit is contained in:
Alejandro Gutiérrez
2026-02-04 01:54:52 +01:00
commit 5cdc07cd39
1618 changed files with 338230 additions and 0 deletions

View File

@@ -0,0 +1,611 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "card-1",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-1"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-1-icon",
"type": "ellipse",
"x": 20,
"y": 20,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-1"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-1-title",
"type": "rectangle",
"x": 20,
"y": 72,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-1"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-1-desc",
"type": "rectangle",
"x": 20,
"y": 100,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-1"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-1-action",
"type": "rectangle",
"x": 20,
"y": 144,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-1"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-2",
"type": "rectangle",
"x": 368,
"y": 0,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-2"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-2-icon",
"type": "ellipse",
"x": 388,
"y": 20,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-2"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-2-title",
"type": "rectangle",
"x": 388,
"y": 72,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-2"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-2-desc",
"type": "rectangle",
"x": 388,
"y": 100,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-2"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-2-action",
"type": "rectangle",
"x": 388,
"y": 144,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-2"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-3",
"type": "rectangle",
"x": 736,
"y": 0,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-3"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-3-icon",
"type": "ellipse",
"x": 756,
"y": 20,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-3"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-3-title",
"type": "rectangle",
"x": 756,
"y": 72,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-3"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-3-desc",
"type": "rectangle",
"x": 756,
"y": 100,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-3"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-3-action",
"type": "rectangle",
"x": 756,
"y": 144,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-3"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-4",
"type": "rectangle",
"x": 0,
"y": 196,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-4"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-4-icon",
"type": "ellipse",
"x": 20,
"y": 216,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-4"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-4-title",
"type": "rectangle",
"x": 20,
"y": 268,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-4"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-4-desc",
"type": "rectangle",
"x": 20,
"y": 296,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-4"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-4-action",
"type": "rectangle",
"x": 20,
"y": 340,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-4"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-5",
"type": "rectangle",
"x": 368,
"y": 196,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-5"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-5-icon",
"type": "ellipse",
"x": 388,
"y": 216,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-5"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-5-title",
"type": "rectangle",
"x": 388,
"y": 268,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-5"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-5-desc",
"type": "rectangle",
"x": 388,
"y": 296,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-5"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-5-action",
"type": "rectangle",
"x": 388,
"y": 340,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-5"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-6",
"type": "rectangle",
"x": 736,
"y": 196,
"width": 352,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-6"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-6-icon",
"type": "ellipse",
"x": 756,
"y": 216,
"width": 40,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-6"],
"roundness": { "type": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-6-title",
"type": "rectangle",
"x": 756,
"y": 268,
"width": 200,
"height": 20,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-6"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-6-desc",
"type": "rectangle",
"x": 756,
"y": 296,
"width": 300,
"height": 32,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["card-group-6"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "card-6-action",
"type": "rectangle",
"x": 756,
"y": 340,
"width": 100,
"height": 24,
"strokeColor": "$primary",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["card-group-6"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,433 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "form-container",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 400,
"height": 500,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 12 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-title",
"type": "rectangle",
"x": 24,
"y": 24,
"width": 352,
"height": 28,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-description",
"type": "rectangle",
"x": 24,
"y": 60,
"width": 352,
"height": 20,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": [],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "label-1",
"type": "rectangle",
"x": 24,
"y": 100,
"width": 80,
"height": 16,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 80,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "input-1",
"type": "rectangle",
"x": 24,
"y": 120,
"width": 352,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "label-2",
"type": "rectangle",
"x": 24,
"y": 172,
"width": 80,
"height": 16,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 80,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "input-2",
"type": "rectangle",
"x": 24,
"y": 192,
"width": 352,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "label-3",
"type": "rectangle",
"x": 24,
"y": 244,
"width": 80,
"height": 16,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 80,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "input-3",
"type": "rectangle",
"x": 24,
"y": 264,
"width": 352,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "eye-icon",
"type": "rectangle",
"x": 340,
"y": 276,
"width": 20,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "checkbox",
"type": "rectangle",
"x": 24,
"y": 316,
"width": 20,
"height": 20,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "checkbox-label",
"type": "rectangle",
"x": 52,
"y": 318,
"width": 100,
"height": 16,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 80,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "forgot-link",
"type": "rectangle",
"x": 276,
"y": 318,
"width": 100,
"height": 16,
"strokeColor": "$primary",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 80,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "primary-button",
"type": "rectangle",
"x": 24,
"y": 352,
"width": 352,
"height": 44,
"strokeColor": "$primary",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "secondary-button",
"type": "rectangle",
"x": 24,
"y": 404,
"width": 352,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "divider-left",
"type": "line",
"x": 24,
"y": 468,
"width": 140,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [140, 0]]
},
{
"id": "divider-text",
"type": "rectangle",
"x": 172,
"y": 460,
"width": 56,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": [],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "divider-right",
"type": "line",
"x": 236,
"y": 468,
"width": 140,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [140, 0]]
},
{
"id": "oauth-google",
"type": "rectangle",
"x": 100,
"y": 484,
"width": 60,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["oauth-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "oauth-github",
"type": "rectangle",
"x": 170,
"y": 484,
"width": 60,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["oauth-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "oauth-apple",
"type": "rectangle",
"x": 240,
"y": 484,
"width": 60,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["oauth-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,221 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "header-container",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 1160,
"height": 64,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "title-text",
"type": "text",
"x": 24,
"y": 14,
"width": 200,
"height": 24,
"strokeColor": "$foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "title-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Page Title",
"fontSize": 20,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 18
},
{
"id": "description-text",
"type": "text",
"x": 24,
"y": 42,
"width": 300,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "title-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Brief description of this page",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 12
},
{
"id": "breadcrumb-area",
"type": "rectangle",
"x": 360,
"y": 22,
"width": 400,
"height": 20,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "breadcrumb-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "breadcrumb-text",
"type": "text",
"x": 360,
"y": 22,
"width": 200,
"height": 20,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "breadcrumb-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Home > Section > Current",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 10
},
{
"id": "help-icon",
"type": "ellipse",
"x": 1000,
"y": 14,
"width": 36,
"height": 36,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "actions-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "help-icon-text",
"type": "text",
"x": 1012,
"y": 22,
"width": 12,
"height": 20,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "actions-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "?",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"baseline": 14
},
{
"id": "action-button",
"type": "rectangle",
"x": 1048,
"y": 14,
"width": 100,
"height": 36,
"strokeColor": "transparent",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "actions-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "action-button-text",
"type": "text",
"x": 1068,
"y": 24,
"width": 60,
"height": 16,
"strokeColor": "$card",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group", "actions-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Action",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"baseline": 12
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,335 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "backdrop",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 800,
"height": 600,
"strokeColor": "transparent",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 30,
"groupIds": [],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "modal-container",
"type": "rectangle",
"x": 160,
"y": 140,
"width": 480,
"height": 320,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 12 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-border",
"type": "line",
"x": 160,
"y": 196,
"width": 480,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [480, 0]]
},
{
"id": "modal-title",
"type": "rectangle",
"x": 184,
"y": 160,
"width": 200,
"height": 24,
"strokeColor": "$foreground",
"backgroundColor": "$foreground",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "close-button",
"type": "rectangle",
"x": 592,
"y": 156,
"width": 32,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "close-x-h",
"type": "line",
"x": 600,
"y": 164,
"width": 16,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [16, 16]]
},
{
"id": "close-x-v",
"type": "line",
"x": 616,
"y": 164,
"width": -16,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [-16, 16]]
},
{
"id": "content-desc-1",
"type": "rectangle",
"x": 184,
"y": 220,
"width": 432,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-desc-2",
"type": "rectangle",
"x": 184,
"y": 244,
"width": 380,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-desc-3",
"type": "rectangle",
"x": 184,
"y": 268,
"width": 300,
"height": 16,
"strokeColor": "$muted",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 60,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 2 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "optional-input",
"type": "rectangle",
"x": 184,
"y": 304,
"width": 432,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-bg",
"type": "rectangle",
"x": 160,
"y": 396,
"width": 480,
"height": 64,
"strokeColor": "transparent",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 12 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-bg-top-mask",
"type": "rectangle",
"x": 160,
"y": 396,
"width": 480,
"height": 20,
"strokeColor": "transparent",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-border",
"type": "line",
"x": 160,
"y": 396,
"width": 480,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [480, 0]]
},
{
"id": "cancel-button",
"type": "rectangle",
"x": 408,
"y": 408,
"width": 100,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "confirm-button",
"type": "rectangle",
"x": 516,
"y": 408,
"width": 100,
"height": 40,
"strokeColor": "$primary",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 0,
"roughness": 0,
"opacity": 100,
"groupIds": ["modal-group"],
"roundness": { "type": 3, "value": 6 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,441 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "sidebar-container",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 280,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "logo-area",
"type": "rectangle",
"x": 24,
"y": 24,
"width": 232,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "logo-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "logo-text",
"type": "text",
"x": 44,
"y": 34,
"width": 80,
"height": 20,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "logo-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Logo",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 14
},
{
"id": "section-divider-1",
"type": "line",
"x": 24,
"y": 88,
"width": 232,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [232, 0]]
},
{
"id": "nav-item-1-active",
"type": "rectangle",
"x": 24,
"y": 108,
"width": 232,
"height": 40,
"strokeColor": "transparent",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "nav-item-1-text",
"type": "text",
"x": 44,
"y": 118,
"width": 100,
"height": 20,
"strokeColor": "$card",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Dashboard",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 12
},
{
"id": "nav-item-2",
"type": "rectangle",
"x": 24,
"y": 160,
"width": 232,
"height": 40,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "nav-item-2-text",
"type": "text",
"x": 44,
"y": 170,
"width": 100,
"height": 20,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Browse MCPs",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 12
},
{
"id": "nav-item-3",
"type": "rectangle",
"x": 24,
"y": 212,
"width": 232,
"height": 40,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "nav-item-3-text",
"type": "text",
"x": 44,
"y": 222,
"width": 100,
"height": 20,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Bundles",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 12
},
{
"id": "nav-item-4",
"type": "rectangle",
"x": 24,
"y": 264,
"width": 232,
"height": 40,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "nav-item-4-text",
"type": "text",
"x": 44,
"y": 274,
"width": 100,
"height": 20,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "My Installs",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 12
},
{
"id": "nav-item-5",
"type": "rectangle",
"x": 24,
"y": 316,
"width": 232,
"height": 40,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "nav-item-5-text",
"type": "text",
"x": 44,
"y": 326,
"width": 100,
"height": 20,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "nav-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "Settings",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 12
},
{
"id": "section-divider-2",
"type": "line",
"x": 24,
"y": 812,
"width": 232,
"height": 0,
"strokeColor": "$border",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"points": [[0, 0], [232, 0]]
},
{
"id": "user-footer",
"type": "rectangle",
"x": 24,
"y": 824,
"width": 232,
"height": 64,
"strokeColor": "transparent",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "user-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "user-avatar",
"type": "ellipse",
"x": 24,
"y": 836,
"width": 40,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "user-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "user-name",
"type": "text",
"x": 76,
"y": 840,
"width": 120,
"height": 16,
"strokeColor": "$sidebar-foreground",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "user-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "John Doe",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 12
},
{
"id": "user-email",
"type": "text",
"x": 76,
"y": 858,
"width": 140,
"height": 14,
"strokeColor": "$muted",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group", "user-group"],
"roundness": null,
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false,
"text": "john@example.com",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 10
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,271 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "outer-frame",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 1440,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "left-column",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 720,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["left-column-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "right-column",
"type": "rectangle",
"x": 720,
"y": 0,
"width": 720,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["right-column-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "logo-placeholder",
"type": "rectangle",
"x": 300,
"y": 80,
"width": 120,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["left-column-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-container",
"type": "rectangle",
"x": 160,
"y": 250,
"width": 400,
"height": 400,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-title",
"type": "rectangle",
"x": 200,
"y": 290,
"width": 320,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-input-1",
"type": "rectangle",
"x": 200,
"y": 360,
"width": 320,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-input-2",
"type": "rectangle",
"x": 200,
"y": 420,
"width": 320,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-submit-button",
"type": "rectangle",
"x": 200,
"y": 500,
"width": 320,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-divider",
"type": "rectangle",
"x": 200,
"y": 564,
"width": 320,
"height": 2,
"strokeColor": "$border",
"backgroundColor": "$border",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "form-oauth-button",
"type": "rectangle",
"x": 200,
"y": 586,
"width": 320,
"height": 44,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["form-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "right-branding-logo",
"type": "rectangle",
"x": 1000,
"y": 400,
"width": 160,
"height": 60,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["right-column-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "right-branding-tagline",
"type": "rectangle",
"x": 920,
"y": 480,
"width": 320,
"height": 24,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["right-column-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,391 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "outer-frame",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 1440,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 280,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-logo-area",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 280,
"height": 64,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-logo-placeholder",
"type": "rectangle",
"x": 20,
"y": 16,
"width": 120,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-nav-item-1",
"type": "rectangle",
"x": 20,
"y": 100,
"width": 240,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-nav-item-2",
"type": "rectangle",
"x": 20,
"y": 160,
"width": 240,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-nav-item-3",
"type": "rectangle",
"x": 20,
"y": 220,
"width": 240,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-nav-item-4",
"type": "rectangle",
"x": 20,
"y": 280,
"width": 240,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-footer",
"type": "rectangle",
"x": 0,
"y": 836,
"width": 280,
"height": 64,
"strokeColor": "$border",
"backgroundColor": "$sidebar",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "sidebar-footer-user",
"type": "rectangle",
"x": 20,
"y": 852,
"width": 240,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["sidebar-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header",
"type": "rectangle",
"x": 280,
"y": 0,
"width": 1160,
"height": 64,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-title",
"type": "rectangle",
"x": 304,
"y": 20,
"width": 200,
"height": 24,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-action-1",
"type": "rectangle",
"x": 1280,
"y": 16,
"width": 60,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-action-2",
"type": "rectangle",
"x": 1360,
"y": 16,
"width": 60,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-area",
"type": "rectangle",
"x": 280,
"y": 64,
"width": 1160,
"height": 836,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-card-1",
"type": "rectangle",
"x": 304,
"y": 88,
"width": 360,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-card-2",
"type": "rectangle",
"x": 684,
"y": 88,
"width": 360,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-card-3",
"type": "rectangle",
"x": 1064,
"y": 88,
"width": 360,
"height": 180,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-main-card",
"type": "rectangle",
"x": 304,
"y": 288,
"width": 1120,
"height": 400,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}

View File

@@ -0,0 +1,451 @@
{
"type": "excalidraw",
"version": 2,
"source": "turbostarter-wireframes",
"elements": [
{
"id": "outer-frame",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 1440,
"height": 900,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": [],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header",
"type": "rectangle",
"x": 0,
"y": 0,
"width": 1440,
"height": 64,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-logo",
"type": "rectangle",
"x": 40,
"y": 16,
"width": 100,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-nav-1",
"type": "rectangle",
"x": 580,
"y": 20,
"width": 80,
"height": 24,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-nav-2",
"type": "rectangle",
"x": 680,
"y": 20,
"width": 80,
"height": 24,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-nav-3",
"type": "rectangle",
"x": 780,
"y": 20,
"width": 80,
"height": 24,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-auth-login",
"type": "rectangle",
"x": 1260,
"y": 16,
"width": 80,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "header-auth-signup",
"type": "rectangle",
"x": 1360,
"y": 16,
"width": 80,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["header-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "content-area",
"type": "rectangle",
"x": 0,
"y": 64,
"width": 1440,
"height": 716,
"strokeColor": "$border",
"backgroundColor": "$background",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "hero-headline",
"type": "rectangle",
"x": 320,
"y": 160,
"width": 800,
"height": 60,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "hero-subheadline",
"type": "rectangle",
"x": 420,
"y": 240,
"width": 600,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "hero-cta-primary",
"type": "rectangle",
"x": 560,
"y": 320,
"width": 160,
"height": 48,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "hero-cta-secondary",
"type": "rectangle",
"x": 740,
"y": 320,
"width": 140,
"height": 48,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "hero-image",
"type": "rectangle",
"x": 220,
"y": 420,
"width": 1000,
"height": 320,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["content-group"],
"roundness": { "type": 3, "value": 12 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer",
"type": "rectangle",
"x": 0,
"y": 780,
"width": 1440,
"height": 120,
"strokeColor": "$border",
"backgroundColor": "$secondary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 0 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-logo",
"type": "rectangle",
"x": 40,
"y": 800,
"width": 100,
"height": 32,
"strokeColor": "$border",
"backgroundColor": "$primary",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-links-1",
"type": "rectangle",
"x": 400,
"y": 800,
"width": 140,
"height": 80,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-links-2",
"type": "rectangle",
"x": 560,
"y": 800,
"width": 140,
"height": 80,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-links-3",
"type": "rectangle",
"x": 720,
"y": 800,
"width": 140,
"height": 80,
"strokeColor": "$border",
"backgroundColor": "$muted",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 4 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-social-1",
"type": "rectangle",
"x": 1280,
"y": 820,
"width": 40,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-social-2",
"type": "rectangle",
"x": 1340,
"y": 820,
"width": 40,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
},
{
"id": "footer-social-3",
"type": "rectangle",
"x": 1400,
"y": 820,
"width": 40,
"height": 40,
"strokeColor": "$border",
"backgroundColor": "$card",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 0,
"opacity": 100,
"groupIds": ["footer-group"],
"roundness": { "type": 3, "value": 8 },
"isDeleted": false,
"boundElements": null,
"link": null,
"locked": false
}
],
"appState": {
"gridSize": 20,
"viewBackgroundColor": "$background"
}
}