From fc74a5a3e8f52594f6fd8683cff72af731d580fa Mon Sep 17 00:00:00 2001
From: Luke Hagar <lukeslakemail@gmail.com>
Date: Fri, 30 May 2025 15:55:02 -0500
Subject: [PATCH] adding some svg graphics and other edits

---
 src/lib/assets/Sveltey-full-dark.svelte     | 215 +++++++++++++++++++
 src/lib/assets/Sveltey-full-light.svelte    | 209 ++++++++++++++++++
 src/lib/assets/Sveltey-logo-filled.svelte   | 161 ++++++++++++++
 src/lib/assets/Sveltey-logo-letter.svelte   | 166 +++++++++++++++
 src/lib/assets/Sveltey-text-outlined.svelte | 221 ++++++++++++++++++++
 src/routes/+layout.svelte                   |   7 +-
 src/routes/+page.svelte                     |  16 +-
 7 files changed, 983 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/assets/Sveltey-full-dark.svelte
 create mode 100644 src/lib/assets/Sveltey-full-light.svelte
 create mode 100644 src/lib/assets/Sveltey-logo-filled.svelte
 create mode 100644 src/lib/assets/Sveltey-logo-letter.svelte
 create mode 100644 src/lib/assets/Sveltey-text-outlined.svelte

diff --git a/src/lib/assets/Sveltey-full-dark.svelte b/src/lib/assets/Sveltey-full-dark.svelte
new file mode 100644
index 0000000..6e34a68
--- /dev/null
+++ b/src/lib/assets/Sveltey-full-dark.svelte
@@ -0,0 +1,215 @@
+<svg
+	width="712"
+	xmlns="http://www.w3.org/2000/svg"
+	height="306"
+	id="screenshot-f01f32d1-06bb-80c1-8006-43d194b33e2f"
+	viewBox="0 0 712 306"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+>
+	<style>
+		/* cyrillic-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+		}
+		/* cyrillic */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+		}
+		/* greek-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+1F00-1FFF;
+		}
+		/* greek */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+		}
+		/* latin-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2)
+				format('woff2');
+			unicode-range:
+				U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+				U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+				U+2C60-2C7F, U+A720-A7FF;
+		}
+		/* latin */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2)
+				format('woff2');
+			unicode-range:
+				U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+				U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+	</style>
+	<g id="shape-f01f32d1-06bb-80c1-8006-43d194b33e2f" rx="0" ry="0">
+		<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cc50f4" rx="0" ry="0" style="fill: rgb(0, 0, 0)">
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1ccdce9" style="display: none">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1ccdce9">
+					<rect
+						width="306"
+						height="306.0000000000001"
+						x="-2.842170943040401e-14"
+						transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+						style="fill: none"
+						ry="0"
+						fill="none"
+						rx="0"
+						y="0"
+					/>
+				</g>
+			</g>
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cd6f5a">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1cd6f5a">
+					<path
+						d="M249.163,55.642C224.599,20.440,176.010,10.041,140.868,32.393L79.189,71.719C62.336,82.297,50.741,99.510,47.215,119.113C44.286,135.429,46.856,152.283,54.566,166.925C49.307,174.934,45.661,183.959,43.987,193.342C40.461,213.304,45.063,233.863,56.897,250.358C81.520,285.560,130.050,295.959,165.192,273.607L226.870,234.281C243.724,223.703,255.319,206.490,258.845,186.887C261.773,170.571,259.204,153.717,251.494,139.075C256.753,131.066,260.399,122.101,262.072,112.658C265.539,92.696,260.937,72.137,249.163,55.642Z"
+						style="fill: rgb(255, 62, 0)"
+					/>
+				</g>
+			</g>
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cda621">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1cda621">
+					<path
+						d="M134.831,253.705C114.929,258.845,93.952,251.075,82.238,234.221C75.125,224.300,72.376,211.929,74.468,199.916C74.827,197.944,75.305,196.031,75.962,194.179L77.098,190.652L80.265,192.983C87.557,198.362,95.745,202.426,104.411,205.056L106.682,205.773L106.443,208.044C106.144,211.271,107.040,214.559,108.953,217.188C112.479,222.268,118.814,224.599,124.791,223.045C126.105,222.687,127.420,222.149,128.556,221.372L190.234,182.046C193.282,180.134,195.374,177.026,196.031,173.440C196.689,169.794,195.852,166.089,193.700,163.100C190.174,158.020,183.839,155.689,177.863,157.243C176.548,157.602,175.233,158.140,174.097,158.917L150.609,173.918C146.725,176.368,142.541,178.221,138.059,179.416C118.157,184.556,97.179,176.787,85.465,159.933C78.353,150.012,75.604,137.640,77.695,125.627C79.787,113.854,86.780,103.514,96.940,97.119L158.618,57.793C162.503,55.343,166.686,53.490,171.169,52.295C191.071,47.155,212.048,54.925,223.763,71.779C230.875,81.700,233.624,94.071,231.532,106.084C231.173,108.056,230.695,109.969,230.038,111.821L228.902,115.348L225.735,113.017C218.443,107.638,210.255,103.574,201.589,100.944L199.318,100.227L199.557,97.956C199.856,94.729,198.960,91.441,197.047,88.812C193.521,83.732,187.186,81.401,181.209,82.955C179.895,83.313,178.580,83.851,177.444,84.628L115.766,123.954C112.718,125.866,110.626,128.974,109.969,132.560C109.311,136.206,110.148,139.911,112.300,142.900C115.826,147.980,122.161,150.311,128.138,148.757C129.452,148.398,130.767,147.860,131.903,147.083L155.391,132.082C159.275,129.632,163.459,127.779,167.941,126.584C187.843,121.444,208.821,129.213,220.535,146.067C227.647,155.988,230.396,168.360,228.305,180.373C226.213,192.146,219.220,202.486,209.060,208.881L147.382,248.207C143.497,250.657,139.254,252.510,134.831,253.705Z"
+						style="fill: rgb(255, 255, 255)"
+					/>
+				</g>
+			</g>
+		</g>
+		<g id="shape-f01f32d1-06bb-80c1-8006-43cc45071da6">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="306"
+				y="55"
+				width="406"
+				height="135.9999999999999"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern
+						patternUnits="objectBoundingBox"
+						width="391.28125"
+						height="124"
+						id="fill-0-render-6-0"
+					>
+						<g>
+							<rect
+								width="391.28125"
+								height="124"
+								style="fill: rgb(255, 255, 255); fill-opacity: 1"
+							/>
+						</g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cc45071da6">
+					<text
+						x="306"
+						y="183"
+						dominant-baseline="ideographic"
+						textLength="391.28125"
+						lengthAdjust="spacingAndGlyphs"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 110px;
+							text-decoration: none solid rgb(255, 255, 255);
+							direction: ltr;
+							fill: rgb(255, 255, 255);
+							fill-opacity: 1;
+						"
+					>
+						Sveltey
+					</text>
+				</g>
+			</g>
+		</g>
+		<g id="shape-f01f32d1-06bb-80c1-8006-43ceeab40aad">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="306"
+				y="191"
+				width="274"
+				height="95"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern
+						patternUnits="objectBoundingBox"
+						width="259.125"
+						height="41"
+						id="fill-0-render-7-0"
+					>
+						<g>
+							<rect width="259.125" height="41" style="fill: rgb(255, 255, 255); fill-opacity: 1" />
+						</g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43ceeab40aad">
+					<text
+						x="306"
+						y="233"
+						dominant-baseline="ideographic"
+						textLength="259.125"
+						lengthAdjust="spacingAndGlyphs"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 37px;
+							text-decoration: none solid rgb(255, 255, 255);
+							direction: ltr;
+							fill: rgb(255, 255, 255);
+							fill-opacity: 1;
+						"
+					>
+						SaaS Template
+					</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/lib/assets/Sveltey-full-light.svelte b/src/lib/assets/Sveltey-full-light.svelte
new file mode 100644
index 0000000..b94e94e
--- /dev/null
+++ b/src/lib/assets/Sveltey-full-light.svelte
@@ -0,0 +1,209 @@
+<svg
+	width="712"
+	xmlns="http://www.w3.org/2000/svg"
+	height="306"
+	id="screenshot-f01f32d1-06bb-80c1-8006-43d194b33e2f"
+	viewBox="0 0 712 306"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+>
+	<style>
+		/* cyrillic-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+		}
+		/* cyrillic */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+		}
+		/* greek-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+1F00-1FFF;
+		}
+		/* greek */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+		}
+		/* latin-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2)
+				format('woff2');
+			unicode-range:
+				U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+				U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+				U+2C60-2C7F, U+A720-A7FF;
+		}
+		/* latin */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2)
+				format('woff2');
+			unicode-range:
+				U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+				U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+	</style>
+	<g id="shape-f01f32d1-06bb-80c1-8006-43d194b33e2f" rx="0" ry="0">
+		<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cc50f4" rx="0" ry="0" style="fill: rgb(0, 0, 0)">
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1ccdce9" style="display: none">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1ccdce9">
+					<rect
+						width="306"
+						height="306.0000000000001"
+						x="-2.842170943040401e-14"
+						transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+						style="fill: none"
+						ry="0"
+						fill="none"
+						rx="0"
+						y="0"
+					/>
+				</g>
+			</g>
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cd6f5a">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1cd6f5a">
+					<path
+						d="M249.163,55.642C224.599,20.440,176.010,10.041,140.868,32.393L79.189,71.719C62.336,82.297,50.741,99.510,47.215,119.113C44.286,135.429,46.856,152.283,54.566,166.925C49.307,174.934,45.661,183.959,43.987,193.342C40.461,213.304,45.063,233.863,56.897,250.358C81.520,285.560,130.050,295.959,165.192,273.607L226.870,234.281C243.724,223.703,255.319,206.490,258.845,186.887C261.773,170.571,259.204,153.717,251.494,139.075C256.753,131.066,260.399,122.101,262.072,112.658C265.539,92.696,260.937,72.137,249.163,55.642Z"
+						style="fill: rgb(255, 62, 0)"
+					/>
+				</g>
+			</g>
+			<g id="shape-f01f32d1-06bb-80c1-8006-43cbb1cda621">
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cbb1cda621">
+					<path
+						d="M134.831,253.705C114.929,258.845,93.952,251.075,82.238,234.221C75.125,224.300,72.376,211.929,74.468,199.916C74.827,197.944,75.305,196.031,75.962,194.179L77.098,190.652L80.265,192.983C87.557,198.362,95.745,202.426,104.411,205.056L106.682,205.773L106.443,208.044C106.144,211.271,107.040,214.559,108.953,217.188C112.479,222.268,118.814,224.599,124.791,223.045C126.105,222.687,127.420,222.149,128.556,221.372L190.234,182.046C193.282,180.134,195.374,177.026,196.031,173.440C196.689,169.794,195.852,166.089,193.700,163.100C190.174,158.020,183.839,155.689,177.863,157.243C176.548,157.602,175.233,158.140,174.097,158.917L150.609,173.918C146.725,176.368,142.541,178.221,138.059,179.416C118.157,184.556,97.179,176.787,85.465,159.933C78.353,150.012,75.604,137.640,77.695,125.627C79.787,113.854,86.780,103.514,96.940,97.119L158.618,57.793C162.503,55.343,166.686,53.490,171.169,52.295C191.071,47.155,212.048,54.925,223.763,71.779C230.875,81.700,233.624,94.071,231.532,106.084C231.173,108.056,230.695,109.969,230.038,111.821L228.902,115.348L225.735,113.017C218.443,107.638,210.255,103.574,201.589,100.944L199.318,100.227L199.557,97.956C199.856,94.729,198.960,91.441,197.047,88.812C193.521,83.732,187.186,81.401,181.209,82.955C179.895,83.313,178.580,83.851,177.444,84.628L115.766,123.954C112.718,125.866,110.626,128.974,109.969,132.560C109.311,136.206,110.148,139.911,112.300,142.900C115.826,147.980,122.161,150.311,128.138,148.757C129.452,148.398,130.767,147.860,131.903,147.083L155.391,132.082C159.275,129.632,163.459,127.779,167.941,126.584C187.843,121.444,208.821,129.213,220.535,146.067C227.647,155.988,230.396,168.360,228.305,180.373C226.213,192.146,219.220,202.486,209.060,208.881L147.382,248.207C143.497,250.657,139.254,252.510,134.831,253.705Z"
+						style="fill: rgb(255, 255, 255)"
+					/>
+				</g>
+			</g>
+		</g>
+		<g id="shape-f01f32d1-06bb-80c1-8006-43cc45071da6">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="306"
+				y="55"
+				width="406"
+				height="135.9999999999999"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern
+						patternUnits="objectBoundingBox"
+						width="391.28125"
+						height="124"
+						id="fill-0-render-6-0"
+					>
+						<g>
+							<rect width="391.28125" height="124" style="fill: rgb(0, 0, 0); fill-opacity: 1" />
+						</g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43cc45071da6">
+					<text
+						x="306"
+						y="183"
+						dominant-baseline="ideographic"
+						textLength="391.28125"
+						lengthAdjust="spacingAndGlyphs"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 110px;
+							text-decoration: none solid rgb(0, 0, 0);
+							direction: ltr;
+							fill: rgb(0, 0, 0);
+							fill-opacity: 1;
+						"
+					>
+						Sveltey
+					</text>
+				</g>
+			</g>
+		</g>
+		<g id="shape-f01f32d1-06bb-80c1-8006-43ceeab40aad">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="306"
+				y="191"
+				width="274"
+				height="95"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern
+						patternUnits="objectBoundingBox"
+						width="259.125"
+						height="41"
+						id="fill-0-render-7-0"
+					>
+						<g><rect width="259.125" height="41" style="fill: rgb(0, 0, 0); fill-opacity: 1" /></g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43ceeab40aad">
+					<text
+						x="306"
+						y="233"
+						dominant-baseline="ideographic"
+						textLength="259.125"
+						lengthAdjust="spacingAndGlyphs"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 37px;
+							text-decoration: none solid rgb(0, 0, 0);
+							direction: ltr;
+							fill: rgb(0, 0, 0);
+							fill-opacity: 1;
+						"
+					>
+						SaaS Template
+					</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/lib/assets/Sveltey-logo-filled.svelte b/src/lib/assets/Sveltey-logo-filled.svelte
new file mode 100644
index 0000000..fb61f1d
--- /dev/null
+++ b/src/lib/assets/Sveltey-logo-filled.svelte
@@ -0,0 +1,161 @@
+<svg
+	width="512"
+	xmlns="http://www.w3.org/2000/svg"
+	height="512"
+	id="screenshot-2867b978-8541-809c-8006-43e763dd1e29"
+	viewBox="0 0 512 512"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+>
+	<style>
+		/* cyrillic-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+		}
+		/* cyrillic */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+		}
+		/* greek-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+1F00-1FFF;
+		}
+		/* greek */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+		}
+		/* latin-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2)
+				format('woff2');
+			unicode-range:
+				U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+				U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+				U+2C60-2C7F, U+A720-A7FF;
+		}
+		/* latin */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2)
+				format('woff2');
+			unicode-range:
+				U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+				U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+	</style>
+	<g id="shape-2867b978-8541-809c-8006-43e763dd1e29" rx="0" ry="0">
+		<g
+			id="shape-242410dc-b845-8092-8006-43d68ae9c46c"
+			width="512"
+			height="512"
+			rx="0"
+			ry="0"
+			style="fill: rgb(0, 0, 0)"
+		>
+			<g id="shape-242410dc-b845-8092-8006-43d68aea75ed" style="display: none">
+				<g class="fills" id="fills-242410dc-b845-8092-8006-43d68aea75ed">
+					<rect
+						width="512"
+						height="512"
+						x="0"
+						transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+						style="fill: none"
+						ry="0"
+						fill="none"
+						rx="0"
+						y="0"
+					/>
+				</g>
+			</g>
+			<g id="shape-242410dc-b845-8092-8006-43d68aea75ee">
+				<g class="fills" id="fills-242410dc-b845-8092-8006-43d68aea75ee">
+					<path
+						d="M32.000,0.000L480.000,0.000C512.000,0.000,512.000,0.000,512.000,32.000L512.000,480.000C512.000,512.000,512.000,512.000,480.000,512.000L32.000,512.000C0.000,512.000,0.000,512.000,0.000,480.000L0.000,32.000C0.000,0.000,0.000,0.000,32.000,0.000Z"
+						style="fill: rgb(0, 136, 255)"
+					/>
+				</g>
+			</g>
+		</g>
+		<g id="shape-2867b978-8541-809c-8006-43e7065cb7bb">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="34"
+				y="180"
+				width="464"
+				height="160"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern
+						patternUnits="objectBoundingBox"
+						width="448.1875"
+						height="141"
+						id="fill-0-render-5-0"
+					>
+						<g>
+							<rect width="448.1875" height="141" style="fill: rgb(0, 0, 0); fill-opacity: 1" />
+						</g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-2867b978-8541-809c-8006-43e7065cb7bb">
+					<text
+						x="34"
+						y="326"
+						dominant-baseline="ideographic"
+						textLength="448.1875"
+						lengthAdjust="spacingAndGlyphs"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 126px;
+							text-decoration: none solid rgb(0, 0, 0);
+							direction: ltr;
+							fill: rgb(0, 0, 0);
+							fill-opacity: 1;
+						"
+					>
+						Sveltey
+					</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/lib/assets/Sveltey-logo-letter.svelte b/src/lib/assets/Sveltey-logo-letter.svelte
new file mode 100644
index 0000000..73a6a36
--- /dev/null
+++ b/src/lib/assets/Sveltey-logo-letter.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+	let {
+		backgroundFill = 'fill-primary-500',
+		textFill = 'fill-primary-contrast-500',
+		size = 'size-12',
+		rounding = ''
+	}: {
+		backgroundFill?: string;
+		textFill?: string;
+		size?: string;
+		rounding?: string;
+	} = $props();
+</script>
+
+<svg
+	class={`${size} ${rounding} rounded-base`}
+	xmlns="http://www.w3.org/2000/svg"
+	id="screenshot-2867b978-8541-809c-8006-43e8df0380f7"
+	viewBox="0 0 512 512"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+>
+	<style>
+		/* cyrillic-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+		}
+		/* cyrillic */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+		}
+		/* greek-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+1F00-1FFF;
+		}
+		/* greek */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+		}
+		/* latin-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2)
+				format('woff2');
+			unicode-range:
+				U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+				U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+				U+2C60-2C7F, U+A720-A7FF;
+		}
+		/* latin */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2)
+				format('woff2');
+			unicode-range:
+				U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+				U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+	</style>
+	<g id="shape-2867b978-8541-809c-8006-43e8df0380f7" rx="0" ry="0">
+		<g
+			id="shape-2867b978-8541-809c-8006-43e8df0380f8"
+			width="512"
+			height="512"
+			rx="0"
+			ry="0"
+			style="fill: rgb(0, 0, 0)"
+		>
+			<g id="shape-2867b978-8541-809c-8006-43e8df0380fa" style="display: none">
+				<g class="fills" id="fills-2867b978-8541-809c-8006-43e8df0380fa">
+					<rect
+						width="512"
+						height="512"
+						x="0"
+						transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+						style="fill: none"
+						ry="0"
+						fill="none"
+						rx="0"
+						y="0"
+					/>
+				</g>
+			</g>
+			<g id="shape-2867b978-8541-809c-8006-43e8df0380fb">
+				<g class="fills" id="fills-2867b978-8541-809c-8006-43e8df0380fb">
+					<path
+						d="M32.000,0.000L480.000,0.000C512.000,0.000,512.000,0.000,512.000,32.000L512.000,480.000C512.000,512.000,512.000,512.000,480.000,512.000L32.000,512.000C0.000,512.000,0.000,512.000,0.000,480.000L0.000,32.000C0.000,0.000,0.000,0.000,32.000,0.000Z"
+						class={`${backgroundFill}`}
+					/>
+				</g>
+			</g>
+		</g>
+		<g id="shape-2867b978-8541-809c-8006-43e8df0380f9">
+			<g
+				transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				class="text-container"
+				x="111"
+				y="56"
+				width="291"
+				height="400"
+				rx="0"
+				ry="0"
+			>
+				<defs>
+					<pattern patternUnits="objectBoundingBox" width="291" height="561" id="fill-0-render-5-0">
+						<g><rect width="291" height="561" style="fill: {textFill}; fill-opacity: 1" /></g>
+					</pattern>
+				</defs>
+				<g class="fills" id="fills-2867b978-8541-809c-8006-43e8df0380f9">
+					<text
+						x="111"
+						y="536"
+						dominant-baseline="ideographic"
+						textLength="291"
+						lengthAdjust="spacingAndGlyphs"
+						class={`${textFill}`}
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 500px;
+							direction: ltr;
+							fill-opacity: 1;
+						"
+					>
+						S
+					</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/lib/assets/Sveltey-text-outlined.svelte b/src/lib/assets/Sveltey-text-outlined.svelte
new file mode 100644
index 0000000..756fc80
--- /dev/null
+++ b/src/lib/assets/Sveltey-text-outlined.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+	let { restProps } = $props();
+
+</script>
+
+<svg
+	{...restProps}
+	width="414"
+	xmlns="http://www.w3.org/2000/svg"
+	height="151"
+	id="screenshot-f01f32d1-06bb-80c1-8006-43d496cb4211"
+	viewBox="-6 -6 414 151"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+>
+	<style>
+		/* cyrillic-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+		}
+		/* cyrillic */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+		}
+		/* greek-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2)
+				format('woff2');
+			unicode-range: U+1F00-1FFF;
+		}
+		/* greek */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2)
+				format('woff2');
+			unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+		}
+		/* latin-ext */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2)
+				format('woff2');
+			unicode-range:
+				U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+				U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+				U+2C60-2C7F, U+A720-A7FF;
+		}
+		/* latin */
+		@font-face {
+			font-family: 'Ubuntu';
+			font-style: normal;
+			font-weight: 700;
+			font-display: block;
+			src: url(https://design.penpot.app/internal/gfonts/font/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2)
+				format('woff2');
+			unicode-range:
+				U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+				U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+	</style>
+	<g id="shape-f01f32d1-06bb-80c1-8006-43d496cb4211">
+		<g
+			transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+			class="text-container"
+			x="0"
+			y="0"
+			width="401.9999999999999"
+			height="139"
+			rx="0"
+			ry="0"
+		>
+			<defs>
+				<pattern
+					patternUnits="objectBoundingBox"
+					width="391.28125"
+					height="124"
+					id="fill-0-render-1-0"
+				>
+					<g>
+						<rect
+							width="391.28125"
+							height="124"
+							style="fill: rgb(255, 255, 255); fill-opacity: 1"
+						/>
+					</g>
+				</pattern>
+			</defs>
+			<g class="fills" id="fills-f01f32d1-06bb-80c1-8006-43d496cb4211">
+				<text
+					x="0"
+					y="128"
+					dominant-baseline="ideographic"
+					textLength="391.28125"
+					lengthAdjust="spacingAndGlyphs"
+					style="
+						text-transform: none;
+						font-family: Ubuntu;
+						letter-spacing: normal;
+						font-style: normal;
+						font-weight: 700;
+						white-space: pre;
+						font-size: 110px;
+						text-decoration: none solid rgb(255, 255, 255);
+						direction: ltr;
+						fill: rgb(255, 255, 255);
+						fill-opacity: 1;
+					"
+				>
+					Sveltey
+				</text>
+			</g>
+			<g
+				id="strokes-179c1b95-0cf0-80d0-8006-43eab6e68b18-f01f32d1-06bb-80c1-8006-43d496cb4211"
+				class="strokes"
+			>
+				<g class="outer-stroke-shape">
+					<defs>
+						<mask
+							id="outer-stroke-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+							x="-5.656854249492381"
+							y="-1.6568542494923806"
+							width="402.59495849898474"
+							height="135.31370849898477"
+							maskUnits="userSpaceOnUse"
+						>
+							<use
+								href="#stroke-shape-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+								style="fill: none; stroke: white; stroke-width: 8"
+							/>
+							<use
+								href="#stroke-shape-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+								style="fill: black; stroke: none"
+							/>
+						</mask>
+						<text
+							x="0"
+							y="128"
+							dominant-baseline="ideographic"
+							textLength="391.28125"
+							lengthAdjust="spacingAndGlyphs"
+							id="stroke-shape-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+							style="
+								text-transform: none;
+								font-family: Ubuntu;
+								letter-spacing: normal;
+								font-style: normal;
+								font-weight: 700;
+								white-space: pre;
+								font-size: 110px;
+								text-decoration: none solid rgb(255, 255, 255);
+								direction: ltr;
+							"
+						>
+							Sveltey
+						</text>
+					</defs>
+					<use
+						href="#stroke-shape-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+						mask="url(#outer-stroke-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0)"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 110px;
+							text-decoration: none solid rgb(255, 255, 255);
+							direction: ltr;
+							fill: none;
+							stroke-width: 8;
+							stroke: rgb(0, 0, 0);
+							stroke-opacity: 1;
+						"
+					/>
+					<use
+						href="#stroke-shape-render-1-0-f01f32d1-06bb-80c1-8006-43d496cb4211-0"
+						style="
+							text-transform: none;
+							font-family: Ubuntu;
+							letter-spacing: normal;
+							font-style: normal;
+							font-weight: 700;
+							white-space: pre;
+							font-size: 110px;
+							text-decoration: none solid rgb(255, 255, 255);
+							direction: ltr;
+							fill: none;
+							stroke-width: 4;
+							stroke: none;
+							stroke-opacity: 1;
+						"
+					/>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e9146ac..d2099c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
 	import { onMount } from 'svelte';
 	import { MetaTags, deepMerge } from 'svelte-meta-tags';
 	import '../app.css';
+	import SvelteyLogoLetter from '$lib/assets/Sveltey-logo-letter.svelte';
 
 	let { data, children } = $props();
 	let { session, supabase } = $derived(data);
@@ -66,16 +67,14 @@
 <Modal />
 
 <!-- Navigation Header -->
-<header class="bg-surface-50-950-token border-surface-200-700-token border-b">
+<header class="bg-surface-50-950-token border-surface-200-700-token border-b sticky top-0 z-50 backdrop-blur-xl">
 	<nav class="container mx-auto px-6 py-4">
 		<div class="flex items-center justify-between">
 			<!-- Left side - Brand and Main navigation -->
 			<div class="flex items-center space-x-8">
 				<!-- Brand -->
 				<a href="/" class="flex items-center gap-2 transition-opacity hover:opacity-75">
-					<div class="bg-primary-500 flex h-8 w-8 items-center justify-center rounded-lg">
-						<span class="text-lg font-bold text-white">S</span>
-					</div>
+					<SvelteyLogoLetter size="size-12" />
 					<span class="text-xl font-bold">Sveltey</span>
 				</a>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5eb2082..a791388 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -100,26 +100,26 @@
         <h2 class="h2">Built With Modern Tools</h2>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-60">
             <div class="space-y-2">
-                <div class="mx-auto w-16 h-16 bg-orange-500 rounded-lg flex items-center justify-center">
-                    <span class="text-white font-bold text-xl">S</span>
+                <div class="mx-auto w-16 h-16 bg-primary-500 rounded-lg flex items-center justify-center">
+                    <span class="text-primary-contrast-500 font-bold text-xl">S</span>
                 </div>
                 <p class="text-sm">SvelteKit</p>
             </div>
             <div class="space-y-2">
-                <div class="mx-auto w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center">
-                    <span class="text-white font-bold text-xl">S</span>
+                <div class="mx-auto w-16 h-16 bg-secondary-500 rounded-lg flex items-center justify-center">
+                    <span class="text-secondary-contrast-500 font-bold text-xl">S</span>
                 </div>
                 <p class="text-sm">Supabase</p>
             </div>
             <div class="space-y-2">
-                <div class="mx-auto w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center">
-                    <span class="text-white font-bold text-xl">T</span>
+                <div class="mx-auto w-16 h-16 bg-tertiary-500 rounded-lg flex items-center justify-center">
+                    <span class="text-tertiary-contrast-500 font-bold text-xl">T</span>
                 </div>
                 <p class="text-sm">TypeScript</p>
             </div>
             <div class="space-y-2">
-                <div class="mx-auto w-16 h-16 bg-purple-500 rounded-lg flex items-center justify-center">
-                    <span class="text-white font-bold text-xl">S</span>
+                <div class="mx-auto w-16 h-16 bg-surface-500 rounded-lg flex items-center justify-center">
+                    <span class="text-surface-contrast-500 font-bold text-xl">S</span>
                 </div>
                 <p class="text-sm">Skeleton UI</p>
             </div>