|  | 
| 10 | 10 | </script> | 
| 11 | 11 | 
 | 
| 12 | 12 | <svelte:head> | 
| 13 |  | -	<!-- Primary Meta Tags --> | 
| 14 |  | -	<title>Kampsy UI</title> | 
| 15 |  | -	<meta name="title" content="Kampsy-ui | A Svelte 5 component library" /> | 
| 16 |  | -	<meta | 
| 17 |  | -		name="description" | 
| 18 |  | -		content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences." | 
| 19 |  | -	/> | 
| 20 |  | - | 
| 21 |  | -	<!-- Open Graph / Facebook --> | 
| 22 |  | -	<meta property="og:type" content="website" /> | 
| 23 |  | -	<meta property="og:url" content="https://ui.kampsy.xyz" /> | 
| 24 |  | -	<meta property="og:title" content="Kampsy-ui | A Svelte 5 component library" /> | 
| 25 |  | -	<meta | 
| 26 |  | -		property="og:description" | 
| 27 |  | -		content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences." | 
| 28 |  | -	/> | 
| 29 |  | -	<meta | 
| 30 |  | -		property="og:image" | 
| 31 |  | -		content="https://ucarecdn.com/91722eb1-c95a-42b2-b851-cdfe01a9bdf7/-/preview/1200x628/" | 
| 32 |  | -	/> | 
| 33 |  | - | 
| 34 |  | -	<!-- Twitter --> | 
| 35 |  | -	<meta property="twitter:card" content="summary_large_image" /> | 
| 36 |  | -	<meta property="twitter:url" content="https://ui.kampsy.xyz" /> | 
| 37 |  | -	<meta property="twitter:title" content="Kampsy-ui | A Svelte 5 component library" /> | 
| 38 |  | -	<meta | 
| 39 |  | -		property="twitter:description" | 
| 40 |  | -		content="Kampsy-ui - A Svelte 5 component library, thoughtfully designed to deliver consistent and cohesive web experiences." | 
| 41 |  | -	/> | 
| 42 |  | -	<meta | 
| 43 |  | -		property="twitter:image" | 
| 44 |  | -		content="https://ucarecdn.com/91722eb1-c95a-42b2-b851-cdfe01a9bdf7/-/preview/1200x628/" | 
| 45 |  | -	/> | 
| 46 |  | - | 
| 47 |  | -	<!-- Meta Tags Generated with https://metatags.io --> | 
| 48 |  | -	<meta name="robots" content="noindex,nofollow" /> | 
|  | 13 | +	<title>Kampsy-ui</title> | 
| 49 | 14 | </svelte:head> | 
| 50 | 15 | 
 | 
| 51 | 16 | {#snippet foundation()} | 
|  | 
| 58 | 23 | 		<p | 
| 59 | 24 | 			class="first-letter:capitalize text-kui-light-gray-900 dark:text-kui-dark-gray-900 text-[16px] lg:text-[20px] font-normal leading-[24px] lg:leading-[30px] tracking-normal lg:tracking-[-0.33px]" | 
| 60 | 25 | 		> | 
| 61 |  | -			A Svelte 5 component library, inspired by Vercel's Geist, thoughtfully designed to deliver | 
|  | 26 | +			A Svelte 5 component library, inspired by Vercel's Geist, is thoughtfully designed to provide | 
| 62 | 27 | 			consistent and cohesive web experiences. | 
| 63 | 28 | 		</p> | 
| 64 | 29 | 	</Row> | 
|  | 
| 115 | 80 | 				</div> | 
| 116 | 81 | 			</a> | 
| 117 | 82 | 		</div> | 
|  | 83 | + | 
| 118 | 84 | 		<div class="border-b border-kui-light-gray-200 dark:border-kui-dark-gray-400"> | 
|  | 85 | +			<a | 
|  | 86 | +				href="/colors" | 
|  | 87 | +				class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg" | 
|  | 88 | +			> | 
|  | 89 | +				<div class="flex justify-between"> | 
|  | 90 | +					<div | 
|  | 91 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 92 | +					> | 
|  | 93 | +						<div | 
|  | 94 | +							class="h-[72px] w-2 rounded-full bg-kui-light-gray-800 dark:bg-kui-dark-gray-800" | 
|  | 95 | +						></div> | 
|  | 96 | +					</div> | 
|  | 97 | +					<div | 
|  | 98 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 99 | +					> | 
|  | 100 | +						<div | 
|  | 101 | +							class="h-[72px] w-2 rounded-full bg-kui-light-blue-800 dark:bg-kui-dark-blue-800" | 
|  | 102 | +						></div> | 
|  | 103 | +					</div> | 
|  | 104 | +					<div | 
|  | 105 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 106 | +					> | 
|  | 107 | +						<div | 
|  | 108 | +							class="h-[72px] w-2 rounded-full bg-kui-light-purple-800 dark:bg-kui-dark-purple-800" | 
|  | 109 | +						></div> | 
|  | 110 | +					</div> | 
|  | 111 | +					<div | 
|  | 112 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 113 | +					> | 
|  | 114 | +						<div | 
|  | 115 | +							class="h-[72px] w-2 rounded-full bg-kui-light-pink-800 dark:bg-kui-dark-pink-800" | 
|  | 116 | +						></div> | 
|  | 117 | +					</div> | 
|  | 118 | +					<div | 
|  | 119 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 120 | +					> | 
|  | 121 | +						<div | 
|  | 122 | +							class="h-[72px] w-2 rounded-full bg-kui-light-red-800 dark:bg-kui-dark-red-800" | 
|  | 123 | +						></div> | 
|  | 124 | +					</div> | 
|  | 125 | +					<div | 
|  | 126 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 127 | +					> | 
|  | 128 | +						<div | 
|  | 129 | +							class="h-[72px] w-2 rounded-full bg-kui-light-amber-800 dark:bg-kui-dark-amber-800" | 
|  | 130 | +						></div> | 
|  | 131 | +					</div> | 
|  | 132 | +					<div | 
|  | 133 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 134 | +					> | 
|  | 135 | +						<div | 
|  | 136 | +							class="h-[72px] w-2 rounded-full bg-kui-light-green-800 dark:bg-kui-dark-green-800" | 
|  | 137 | +						></div> | 
|  | 138 | +					</div> | 
|  | 139 | +					<div | 
|  | 140 | +						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
|  | 141 | +					> | 
|  | 142 | +						<div | 
|  | 143 | +							class="h-[72px] w-2 rounded-full bg-kui-light-teal-800 dark:bg-kui-dark-teal-800" | 
|  | 144 | +						></div> | 
|  | 145 | +					</div> | 
|  | 146 | +				</div> | 
|  | 147 | +				<div class="mt-[32px] w-full h-[48px]"> | 
|  | 148 | +					<p | 
|  | 149 | +						class="first-letter:capitalize text-base text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold leading-6 tracking-[-0.32px]" | 
|  | 150 | +					> | 
|  | 151 | +						colors | 
|  | 152 | +					</p> | 
|  | 153 | +					<p | 
|  | 154 | +						class="first-letter:capitalize text-sm text-kui-light-gray-900 dark:text-kui-dark-gray-900 leading-6" | 
|  | 155 | +					> | 
|  | 156 | +						a high contrast accessible color system. | 
|  | 157 | +					</p> | 
|  | 158 | +				</div> | 
|  | 159 | +			</a> | 
|  | 160 | +		</div> | 
|  | 161 | + | 
|  | 162 | +		<!--<div class="border-b border-kui-light-gray-200 dark:border-kui-dark-gray-400"> | 
| 119 | 163 | 			<a | 
| 120 | 164 | 				href="#/" | 
| 121 | 165 | 				class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg" | 
|  | 
| 552 | 596 | 					</p> | 
| 553 | 597 | 				</div> | 
| 554 | 598 | 			</a> | 
| 555 |  | -		</div> | 
| 556 |  | - | 
| 557 |  | -		<div class="border-b border-r border-kui-light-gray-200 dark:border-kui-dark-gray-400"> | 
| 558 |  | -			<a | 
| 559 |  | -				href="/colors" | 
| 560 |  | -				class="w-full h-full group block p-[32px] transition-colors hover:bg-kui-light-bg dark:hover:bg-kui-dark-bg" | 
| 561 |  | -			> | 
| 562 |  | -				<div class="flex justify-between"> | 
| 563 |  | -					<div | 
| 564 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 565 |  | -					> | 
| 566 |  | -						<div | 
| 567 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-gray-800 dark:bg-kui-dark-gray-800" | 
| 568 |  | -						></div> | 
| 569 |  | -					</div> | 
| 570 |  | -					<div | 
| 571 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 572 |  | -					> | 
| 573 |  | -						<div | 
| 574 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-blue-800 dark:bg-kui-dark-blue-800" | 
| 575 |  | -						></div> | 
| 576 |  | -					</div> | 
| 577 |  | -					<div | 
| 578 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 579 |  | -					> | 
| 580 |  | -						<div | 
| 581 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-purple-800 dark:bg-kui-dark-purple-800" | 
| 582 |  | -						></div> | 
| 583 |  | -					</div> | 
| 584 |  | -					<div | 
| 585 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 586 |  | -					> | 
| 587 |  | -						<div | 
| 588 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-pink-800 dark:bg-kui-dark-pink-800" | 
| 589 |  | -						></div> | 
| 590 |  | -					</div> | 
| 591 |  | -					<div | 
| 592 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 593 |  | -					> | 
| 594 |  | -						<div | 
| 595 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-red-800 dark:bg-kui-dark-red-800" | 
| 596 |  | -						></div> | 
| 597 |  | -					</div> | 
| 598 |  | -					<div | 
| 599 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 600 |  | -					> | 
| 601 |  | -						<div | 
| 602 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-amber-800 dark:bg-kui-dark-amber-800" | 
| 603 |  | -						></div> | 
| 604 |  | -					</div> | 
| 605 |  | -					<div | 
| 606 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 607 |  | -					> | 
| 608 |  | -						<div | 
| 609 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-green-800 dark:bg-kui-dark-green-800" | 
| 610 |  | -						></div> | 
| 611 |  | -					</div> | 
| 612 |  | -					<div | 
| 613 |  | -						class="bg-background-200 border border-kui-light-gray-alpha-400 dark:border-kui-dark-gray-alpha-400 flex h-[96px] w-[32px] items-center justify-center overflow-hidden rounded-full" | 
| 614 |  | -					> | 
| 615 |  | -						<div | 
| 616 |  | -							class="h-[72px] w-2 rounded-full bg-kui-light-teal-800 dark:bg-kui-dark-teal-800" | 
| 617 |  | -						></div> | 
| 618 |  | -					</div> | 
| 619 |  | -				</div> | 
| 620 |  | -				<div class="mt-[32px] w-full h-[48px]"> | 
| 621 |  | -					<p | 
| 622 |  | -						class="first-letter:capitalize text-base text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold leading-6 tracking-[-0.32px]" | 
| 623 |  | -					> | 
| 624 |  | -						colors | 
| 625 |  | -					</p> | 
| 626 |  | -					<p | 
| 627 |  | -						class="first-letter:capitalize text-sm text-kui-light-gray-900 dark:text-kui-dark-gray-900 leading-6" | 
| 628 |  | -					> | 
| 629 |  | -						a high contrast accessible color system. | 
| 630 |  | -					</p> | 
| 631 |  | -				</div> | 
| 632 |  | -			</a> | 
| 633 |  | -		</div> | 
|  | 599 | +		</div>--> | 
| 634 | 600 | 	</section> | 
| 635 | 601 | {/snippet} | 
| 636 | 602 | 
 | 
|  | 
0 commit comments