svelte switch, first steps

.svelte-kit/ambient.d.ts

@@ -0,0 +1,287 @@
+
+// this file is generated — do not edit it
+
+
+/// <reference types="@sveltejs/kit" />
+
+/**
+ * Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured).
+ * 
+ * _Unlike_ [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+ * 
+ * ```ts
+ * import { API_KEY } from '$env/static/private';
+ * ```
+ * 
+ * Note that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+ * 
+ * ```
+ * MY_FEATURE_FLAG=""
+ * ```
+ * 
+ * You can override `.env` values from the command line like so:
+ * 
+ * ```bash
+ * MY_FEATURE_FLAG="enabled" npm run dev
+ * ```
+ */
+declare module '$env/static/private' {
+	export const NVM_INC: string;
+	export const __MISE_DIFF: string;
+	export const TERM_PROGRAM: string;
+	export const ET_NO_TELEMETRY: string;
+	export const NODE: string;
+	export const INIT_CWD: string;
+	export const _P9K_TTY: string;
+	export const ZSH_THEME: string;
+	export const PYENV_ROOT: string;
+	export const NVM_CD_FLAGS: string;
+	export const ANDROID_HOME: string;
+	export const TERM: string;
+	export const SHELL: string;
+	export const SAVEHIST: string;
+	export const HISTSIZE: string;
+	export const TMPDIR: string;
+	export const HOMEBREW_REPOSITORY: string;
+	export const npm_config_global_prefix: string;
+	export const TERM_PROGRAM_VERSION: string;
+	export const MallocNanoZone: string;
+	export const COLOR: string;
+	export const TERM_SESSION_ID: string;
+	export const npm_config_noproxy: string;
+	export const npm_config_local_prefix: string;
+	export const ZSH: string;
+	export const LC_ALL: string;
+	export const USER: string;
+	export const NVM_DIR: string;
+	export const LS_COLORS: string;
+	export const COMMAND_MODE: string;
+	export const npm_config_globalconfig: string;
+	export const SSH_AUTH_SOCK: string;
+	export const __CF_USER_TEXT_ENCODING: string;
+	export const SOLARIZED_THEME: string;
+	export const npm_execpath: string;
+	export const TERM_FEATURES: string;
+	export const PYENV_VIRTUALENV_INIT: string;
+	export const ATUIN_NOBIND: string;
+	export const PAGER: string;
+	export const TMUX: string;
+	export const LSCOLORS: string;
+	export const TERMINFO_DIRS: string;
+	export const PATH: string;
+	export const npm_package_json: string;
+	export const _: string;
+	export const LaunchInstanceID: string;
+	export const npm_config_userconfig: string;
+	export const npm_config_init_module: string;
+	export const __CFBundleIdentifier: string;
+	export const npm_command: string;
+	export const PWD: string;
+	export const FZF_ALT_C_COMMAND: string;
+	export const npm_lifecycle_event: string;
+	export const P9K_SSH: string;
+	export const EDITOR: string;
+	export const npm_package_name: string;
+	export const P9K_TTY: string;
+	export const LANG: string;
+	export const ITERM_PROFILE: string;
+	export const FZF_ALT_C_OPTS: string;
+	export const npm_config_npm_version: string;
+	export const XPC_FLAGS: string;
+	export const TMUX_PANE: string;
+	export const npm_config_node_gyp: string;
+	export const npm_package_version: string;
+	export const XPC_SERVICE_NAME: string;
+	export const GPG_TTY: string;
+	export const SHLVL: string;
+	export const PYENV_SHELL: string;
+	export const HOME: string;
+	export const COLORFGBG: string;
+	export const __MISE_ORIG_PATH: string;
+	export const tmux_version: string;
+	export const LC_TERMINAL_VERSION: string;
+	export const HOMEBREW_PREFIX: string;
+	export const ATUIN_HISTORY_ID: string;
+	export const MISE_SHELL: string;
+	export const ITERM_SESSION_ID: string;
+	export const npm_config_cache: string;
+	export const LOGNAME: string;
+	export const LESS: string;
+	export const npm_lifecycle_script: string;
+	export const FZF_CTRL_T_OPTS: string;
+	export const ATUIN_SESSION: string;
+	export const FZF_CTRL_T_COMMAND: string;
+	export const TMUX_PLUGIN_MANAGER_PATH: string;
+	export const FZF_DEFAULT_COMMAND: string;
+	export const NVM_BIN: string;
+	export const npm_config_user_agent: string;
+	export const __MISE_SESSION: string;
+	export const INFOPATH: string;
+	export const HOMEBREW_CELLAR: string;
+	export const _P9K_SSH_TTY: string;
+	export const LC_TERMINAL: string;
+	export const DISPLAY: string;
+	export const BAT_THEME: string;
+	export const SECURITYSESSIONID: string;
+	export const HISTFILE: string;
+	export const npm_node_execpath: string;
+	export const npm_config_prefix: string;
+	export const _fzf_git_cat: string;
+	export const COLORTERM: string;
+	export const NODE_ENV: string;
+}
+
+/**
+ * Similar to [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ * 
+ * Values are replaced statically at build time.
+ * 
+ * ```ts
+ * import { PUBLIC_BASE_URL } from '$env/static/public';
+ * ```
+ */
+declare module '$env/static/public' {
+	
+}
+
+/**
+ * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://svelte.dev/docs/kit/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured).
+ * 
+ * This module cannot be imported into client-side code.
+ * 
+ * Dynamic environment variables cannot be used during prerendering.
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/private';
+ * console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ * 
+ * > In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.
+ */
+declare module '$env/dynamic/private' {
+	export const env: {
+		NVM_INC: string;
+		__MISE_DIFF: string;
+		TERM_PROGRAM: string;
+		ET_NO_TELEMETRY: string;
+		NODE: string;
+		INIT_CWD: string;
+		_P9K_TTY: string;
+		ZSH_THEME: string;
+		PYENV_ROOT: string;
+		NVM_CD_FLAGS: string;
+		ANDROID_HOME: string;
+		TERM: string;
+		SHELL: string;
+		SAVEHIST: string;
+		HISTSIZE: string;
+		TMPDIR: string;
+		HOMEBREW_REPOSITORY: string;
+		npm_config_global_prefix: string;
+		TERM_PROGRAM_VERSION: string;
+		MallocNanoZone: string;
+		COLOR: string;
+		TERM_SESSION_ID: string;
+		npm_config_noproxy: string;
+		npm_config_local_prefix: string;
+		ZSH: string;
+		LC_ALL: string;
+		USER: string;
+		NVM_DIR: string;
+		LS_COLORS: string;
+		COMMAND_MODE: string;
+		npm_config_globalconfig: string;
+		SSH_AUTH_SOCK: string;
+		__CF_USER_TEXT_ENCODING: string;
+		SOLARIZED_THEME: string;
+		npm_execpath: string;
+		TERM_FEATURES: string;
+		PYENV_VIRTUALENV_INIT: string;
+		ATUIN_NOBIND: string;
+		PAGER: string;
+		TMUX: string;
+		LSCOLORS: string;
+		TERMINFO_DIRS: string;
+		PATH: string;
+		npm_package_json: string;
+		_: string;
+		LaunchInstanceID: string;
+		npm_config_userconfig: string;
+		npm_config_init_module: string;
+		__CFBundleIdentifier: string;
+		npm_command: string;
+		PWD: string;
+		FZF_ALT_C_COMMAND: string;
+		npm_lifecycle_event: string;
+		P9K_SSH: string;
+		EDITOR: string;
+		npm_package_name: string;
+		P9K_TTY: string;
+		LANG: string;
+		ITERM_PROFILE: string;
+		FZF_ALT_C_OPTS: string;
+		npm_config_npm_version: string;
+		XPC_FLAGS: string;
+		TMUX_PANE: string;
+		npm_config_node_gyp: string;
+		npm_package_version: string;
+		XPC_SERVICE_NAME: string;
+		GPG_TTY: string;
+		SHLVL: string;
+		PYENV_SHELL: string;
+		HOME: string;
+		COLORFGBG: string;
+		__MISE_ORIG_PATH: string;
+		tmux_version: string;
+		LC_TERMINAL_VERSION: string;
+		HOMEBREW_PREFIX: string;
+		ATUIN_HISTORY_ID: string;
+		MISE_SHELL: string;
+		ITERM_SESSION_ID: string;
+		npm_config_cache: string;
+		LOGNAME: string;
+		LESS: string;
+		npm_lifecycle_script: string;
+		FZF_CTRL_T_OPTS: string;
+		ATUIN_SESSION: string;
+		FZF_CTRL_T_COMMAND: string;
+		TMUX_PLUGIN_MANAGER_PATH: string;
+		FZF_DEFAULT_COMMAND: string;
+		NVM_BIN: string;
+		npm_config_user_agent: string;
+		__MISE_SESSION: string;
+		INFOPATH: string;
+		HOMEBREW_CELLAR: string;
+		_P9K_SSH_TTY: string;
+		LC_TERMINAL: string;
+		DISPLAY: string;
+		BAT_THEME: string;
+		SECURITYSESSIONID: string;
+		HISTFILE: string;
+		npm_node_execpath: string;
+		npm_config_prefix: string;
+		_fzf_git_cat: string;
+		COLORTERM: string;
+		NODE_ENV: string;
+		[key: `PUBLIC_${string}`]: undefined;
+		[key: `${string}`]: string | undefined;
+	}
+}
+
+/**
+ * Similar to [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ * 
+ * Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.
+ * 
+ * Dynamic environment variables cannot be used during prerendering.
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/public';
+ * console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ */
+declare module '$env/dynamic/public' {
+	export const env: {
+		[key: `PUBLIC_${string}`]: string | undefined;
+	}
+}

.svelte-kit/generated/client/app.js

@@ -0,0 +1,28 @@
+export { matchers } from './matchers.js';
+
+export const nodes = [
+	() => import('./nodes/0'),
+	() => import('./nodes/1'),
+	() => import('./nodes/2')
+];
+
+export const server_loads = [];
+
+export const dictionary = {
+		"/": [2]
+	};
+
+export const hooks = {
+	handleError: (({ error }) => { console.error(error) }),
+	
+	reroute: (() => {}),
+	transport: {}
+};
+
+export const decoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.decode]));
+
+export const hash = false;
+
+export const decode = (type, value) => decoders[type](value);
+
+export { default as root } from '../root.js';

.svelte-kit/generated/client/matchers.js

@@ -0,0 +1 @@
+export const matchers = {};

.svelte-kit/generated/client/nodes/0.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../src/routes/+layout.svelte";

.svelte-kit/generated/client/nodes/1.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../node_modules/@sveltejs/kit/src/runtime/components/svelte-5/error.svelte";

.svelte-kit/generated/client/nodes/2.js

@@ -0,0 +1 @@
+export { default as component } from "../../../../src/routes/+page.svelte";

.svelte-kit/generated/root.js

@@ -0,0 +1,3 @@
+import { asClassComponent } from 'svelte/legacy';
+import Root from './root.svelte';
+export default asClassComponent(Root);

.svelte-kit/generated/root.svelte

@@ -0,0 +1,66 @@
+<!-- This file is generated by @sveltejs/kit — do not edit it! -->
+<svelte:options runes={true} />
+<script>
+	import { setContext, onMount, tick } from 'svelte';
+	import { browser } from '$app/environment';
+
+	// stores
+	let { stores, page, constructors, components = [], form, data_0 = null, data_1 = null } = $props();
+
+	if (!browser) {
+		setContext('__svelte__', stores);
+	}
+
+	if (browser) {
+		$effect.pre(() => stores.page.set(page));
+	} else {
+		stores.page.set(page);
+	}
+	$effect(() => {
+		stores;page;constructors;components;form;data_0;data_1;
+		stores.page.notify();
+	});
+
+	let mounted = $state(false);
+	let navigated = $state(false);
+	let title = $state(null);
+
+	onMount(() => {
+		const unsubscribe = stores.page.subscribe(() => {
+			if (mounted) {
+				navigated = true;
+				tick().then(() => {
+					title = document.title || 'untitled page';
+				});
+			}
+		});
+
+		mounted = true;
+		return unsubscribe;
+	});
+
+	const Pyramid_1=$derived(constructors[1])
+</script>
+
+{#if constructors[1]}
+	{@const Pyramid_0 = constructors[0]}
+							<!-- svelte-ignore binding_property_non_reactive -->
+							<Pyramid_0 bind:this={components[0]} data={data_0} {form}>
+								<!-- svelte-ignore binding_property_non_reactive -->
+										<Pyramid_1 bind:this={components[1]} data={data_1} {form} />
+							</Pyramid_0>
+	
+{:else}
+	{@const Pyramid_0 = constructors[0]}
+	<!-- svelte-ignore binding_property_non_reactive -->
+	<Pyramid_0 bind:this={components[0]} data={data_0} {form} />
+	
+{/if}
+
+{#if mounted}
+	<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">
+		{#if navigated}
+			{title}
+		{/if}
+	</div>
+{/if}

.svelte-kit/generated/server/internal.js

@@ -0,0 +1,48 @@
+
+import root from '../root.js';
+import { set_building, set_prerendering } from '__sveltekit/environment';
+import { set_assets } from '__sveltekit/paths';
+import { set_manifest, set_read_implementation } from '__sveltekit/server';
+import { set_private_env, set_public_env, set_safe_public_env } from '../../../node_modules/@sveltejs/kit/src/runtime/shared-server.js';
+
+export const options = {
+	app_template_contains_nonce: false,
+	csp: {"mode":"auto","directives":{"upgrade-insecure-requests":false,"block-all-mixed-content":false},"reportOnly":{"upgrade-insecure-requests":false,"block-all-mixed-content":false}},
+	csrf_check_origin: true,
+	embedded: false,
+	env_public_prefix: 'PUBLIC_',
+	env_private_prefix: '',
+	hash_routing: false,
+	hooks: null, // added lazily, via `get_hooks`
+	preload_strategy: "modulepreload",
+	root,
+	service_worker: false,
+	templates: {
+		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>\n",
+		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
+	},
+	version_hash: "19ddiqn"
+};
+
+export async function get_hooks() {
+	let handle;
+	let handleFetch;
+	let handleError;
+	let init;
+	
+
+	let reroute;
+	let transport;
+	
+
+	return {
+		handle,
+		handleFetch,
+		handleError,
+		init,
+		reroute,
+		transport
+	};
+}
+
+export { set_assets, set_building, set_manifest, set_prerendering, set_private_env, set_public_env, set_read_implementation, set_safe_public_env };

.svelte-kit/non-ambient.d.ts

@@ -0,0 +1,25 @@
+
+// this file is generated — do not edit it
+
+
+declare module "svelte/elements" {
+	export interface HTMLAttributes<T> {
+		'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-preload-code'?:
+			| true
+			| ''
+			| 'eager'
+			| 'viewport'
+			| 'hover'
+			| 'tap'
+			| 'off'
+			| undefined
+			| null;
+		'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
+		'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
+		'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
+	}
+}
+
+export {};

.svelte-kit/tsconfig.json

@@ -0,0 +1,49 @@
+{
+	"compilerOptions": {
+		"paths": {
+			"$lib": [
+				"../src/lib"
+			],
+			"$lib/*": [
+				"../src/lib/*"
+			]
+		},
+		"rootDirs": [
+			"..",
+			"./types"
+		],
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"lib": [
+			"esnext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext"
+	},
+	"include": [
+		"ambient.d.ts",
+		"non-ambient.d.ts",
+		"./types/**/$types.d.ts",
+		"../vite.config.js",
+		"../vite.config.ts",
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte",
+		"../tests/**/*.js",
+		"../tests/**/*.ts",
+		"../tests/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"../src/service-worker.js",
+		"../src/service-worker/**/*.js",
+		"../src/service-worker.ts",
+		"../src/service-worker/**/*.ts",
+		"../src/service-worker.d.ts",
+		"../src/service-worker/**/*.d.ts"
+	]
+}

.svelte-kit/types/route_meta_data.json

@@ -0,0 +1,3 @@
+{
+	"/": []
+}

.svelte-kit/types/src/routes/$types.d.ts

@@ -0,0 +1,24 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = EnsureDefined<LayoutData>;
+type LayoutRouteId = RouteId | "/" | null
+type LayoutParams = RouteParams & {  }
+type LayoutParentData = EnsureDefined<{}>;
+
+export type PageServerData = null;
+export type PageData = Expand<PageParentData>;
+export type PageProps = { data: PageData }
+export type LayoutServerData = null;
+export type LayoutData = Expand<LayoutParentData>;
+export type LayoutProps = { data: LayoutData; children: import("svelte").Snippet }

README.md

@@ -1,70 +1,38 @@
-# Getting Started with Create React App
+# sv
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
-## Available Scripts
+## Creating a project
 
-In the project directory, you can run:
+If you're seeing this, you've probably already done this step. Congrats!
 
-### `npm start`
+```bash
+# create a new project in the current directory
+npx sv create
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+# create a new project in my-app
+npx sv create my-app
+```
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+## Developing
 
-### `npm test`
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+```bash
+npm run dev
 
-### `npm run build`
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## Building
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+To create a production version of your app:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+npm run build
+```
 
-### `npm run eject`
+You can preview the production build with `npm run preview`.
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

eslint.config.js

@@ -0,0 +1,37 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: { 'no-undef': 'off' }
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		ignores: ['eslint.config.js', 'svelte.config.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

package.json

@@ -1,38 +1,37 @@
 {
 	"name": "a2zsoftware",
-  "version": "0.1.0",
 	"private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
 	},
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.5"
 	}
 }

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>A2Z Software</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "A2Z Software",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.css

@@ -1,38 +1 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import 'tailwindcss';

src/App.js

@@ -1,16 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-//make scrollable webpage
-
-function App(){
-  return (
-    <div className="App">
-      <header className="App-header">
-        <h1>A2Z Software 1/14/2023</h1>
-        <img src={logo} className="App-logo" alt="logo" />
-      </header>
-    </div>
-  );
-}
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+{@render children()}

src/routes/+page.svelte

@@ -0,0 +1,504 @@
+<script>
+	import { onMount } from 'svelte';
+
+	// Animation for fading in elements
+	let visible = false;
+
+	onMount(() => {
+		visible = true;
+
+		// Add smooth scrolling for anchor links
+		const links = document.querySelectorAll('a[href^="#"]');
+
+		links.forEach((link) => {
+			link.addEventListener('click', function (e) {
+				e.preventDefault();
+
+				const targetId = this.getAttribute('href');
+				const targetElement = document.querySelector(targetId);
+
+				if (targetElement) {
+					window.scrollTo({
+						top: targetElement.offsetTop - 80, // Offset for fixed header
+						behavior: 'smooth'
+					});
+				}
+			});
+		});
+	});
+
+	// Services offered
+	const services = [
+		{
+			title: 'Digital Transformation',
+			description: 'Reimagine your business for the digital age',
+			icon: '🔄'
+		},
+		{
+			title: 'Cloud Solutions',
+			description: 'Scalable infrastructure for modern enterprises',
+			icon: '☁️'
+		},
+		{
+			title: 'AI Integration',
+			description: 'Intelligent solutions for complex problems',
+			icon: '🧠'
+		},
+		{
+			title: 'Custom Development',
+			description: 'Tailored software for your unique needs',
+			icon: '💻'
+		}
+	];
+
+	// Prevent default on empty links
+	function handleClick(e) {
+		e.preventDefault();
+	}
+</script>
+
+<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 font-sans text-gray-100">
+	<!-- Navigation -->
+	<nav class="bg-opacity-90 fixed z-10 w-full bg-gray-900">
+		<div class="container mx-auto flex items-center justify-between px-6 py-4">
+			<div class="flex items-center">
+				<span class="text-2xl font-bold text-blue-500">A2Z</span>
+				<span class="text-2xl font-bold">Software</span>
+			</div>
+			<div class="hidden space-x-8 md:flex">
+				<a href="#about" class="transition hover:text-blue-400">About</a>
+				<a href="#services" class="transition hover:text-blue-400">Services</a>
+				<a href="#solutions" class="transition hover:text-blue-400">Solutions</a>
+				<a href="#contact" class="transition hover:text-blue-400">Contact</a>
+			</div>
+			<button class="focus:outline-none md:hidden" aria-label="Toggle Menu">
+				<svg
+					class="h-6 w-6"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h16M4 18h16"
+					></path>
+				</svg>
+			</button>
+		</div>
+	</nav>
+
+	<!-- Hero Section -->
+	<section class="px-6 pt-32 pb-24">
+		<div class="container mx-auto text-center">
+			<h1
+				class="mb-6 text-5xl font-bold md:text-6xl {visible
+					? 'opacity-100'
+					: 'opacity-0'} transition-opacity duration-1000"
+			>
+				Innovating Tomorrow's Technology Today
+			</h1>
+			<p
+				class="mx-auto mb-12 max-w-3xl text-xl text-gray-300 md:text-2xl {visible
+					? 'opacity-100'
+					: 'opacity-0'} transition-opacity delay-300 duration-1000"
+			>
+				A2ZSoftware delivers cutting-edge solutions at the intersection of technology and business,
+				empowering organizations to thrive in the digital landscape.
+			</p>
+			<div
+				class="flex flex-col justify-center gap-4 sm:flex-row {visible
+					? 'opacity-100'
+					: 'opacity-0'} transition-opacity delay-500 duration-1000"
+			>
+				<!-- Changed these buttons to anchor links pointing to #solutions and #contact -->
+				<a
+					href="#solutions"
+					class="rounded-lg bg-blue-600 px-8 py-3 font-bold text-white transition hover:bg-blue-700"
+				>
+					Explore Solutions
+				</a>
+				<a
+					href="#contact"
+					class="rounded-lg border-2 border-blue-500 bg-transparent px-8 py-3 font-bold text-blue-400 transition hover:bg-blue-500 hover:text-white"
+				>
+					Contact Us
+				</a>
+			</div>
+		</div>
+	</section>
+
+	<!-- About Section -->
+	<section id="about" class="bg-opacity-70 bg-gray-800 py-20">
+		<div class="container mx-auto px-6">
+			<div class="flex flex-col items-center md:flex-row">
+				<div class="mb-10 md:mb-0 md:w-1/2">
+					<div class="bg-opacity-20 mb-4 inline-block rounded-lg bg-blue-600 p-2">
+						<span class="font-bold text-blue-400">About Us</span>
+					</div>
+					<h2 class="mb-6 text-4xl font-bold">Pioneering the Future of Technology</h2>
+					<p class="mb-6 text-gray-300">
+						At A2ZSoftware, we're a growing startup determined to redefine what's possible in the
+						tech industry. Guided by a spirit of innovation and the drive to offer unique solutions,
+						we help businesses stay competitive in a digital-first world.
+					</p>
+					<p class="mb-6 text-gray-300">
+						Our close-knit team merges deep technical expertise with entrepreneurial insight,
+						crafting tailored strategies that address current challenges and anticipate new market
+						opportunities. We’re committed to pushing boundaries and delivering transformative
+						outcomes.
+					</p>
+					<p class="mb-6 text-gray-300">
+						Although we’re still establishing our footprint, we strive to earn our clients’ trust by
+						streamlining processes, modernizing systems, and enhancing operational efficiency. At
+						A2ZSoftware, we’re passionate about tackling difficult problems and turning them into
+						innovative solutions.
+					</p>
+					<p class="mb-6 text-gray-300">
+						Our culture is built on collaboration, continuous learning, and a commitment to
+						excellence. Every project begins with open communication and ends with tangible results.
+						By embracing emerging technologies and forward-thinking strategies, we believe we can
+						empower businesses to become more adaptable, sustainable, and prepared for the future.
+					</p>
+
+					<div class="mt-8 flex flex-wrap gap-8">
+						<div class="flex items-center">
+							<div class="mr-4 text-4xl text-blue-500">10+</div>
+							<div class="text-sm text-gray-400">Years of<br />Experience</div>
+						</div>
+						<div class="flex items-center">
+							<div class="mr-4 text-4xl text-blue-500">300+</div>
+							<div class="text-sm text-gray-400">Projects<br />Completed</div>
+						</div>
+						<div class="flex items-center">
+							<div class="mr-4 text-4xl text-blue-500">98%</div>
+							<div class="text-sm text-gray-400">Client<br />Satisfaction</div>
+						</div>
+					</div>
+				</div>
+				<div class="md:w-1/2 md:pl-12">
+					<div class="grid grid-cols-2 gap-4">
+						<div
+							class="flex h-48 items-center justify-center rounded-lg bg-gradient-to-br from-blue-700 to-purple-700 p-6"
+						>
+							<span class="text-5xl">🚀</span>
+						</div>
+						<div
+							class="flex h-48 items-center justify-center rounded-lg bg-gradient-to-br from-purple-700 to-pink-700 p-6"
+						>
+							<span class="text-5xl">💡</span>
+						</div>
+						<div
+							class="flex h-48 items-center justify-center rounded-lg bg-gradient-to-br from-pink-700 to-red-700 p-6"
+						>
+							<span class="text-5xl">⚙️</span>
+						</div>
+						<div
+							class="flex h-48 items-center justify-center rounded-lg bg-gradient-to-br from-blue-700 to-green-700 p-6"
+						>
+							<span class="text-5xl">🔍</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- Services Section -->
+	<section id="services" class="bg-gray-900 py-20">
+		<div class="container mx-auto px-6">
+			<div class="mb-16 text-center">
+				<div class="bg-opacity-20 mb-4 inline-block rounded-lg bg-blue-600 p-2">
+					<span class="font-bold text-blue-400">Our Services</span>
+				</div>
+				<h2 class="mb-6 text-4xl font-bold">Comprehensive Technology Solutions</h2>
+				<p class="mx-auto max-w-3xl text-gray-300">
+					We offer a wide range of services designed to help businesses leverage technology for
+					growth, efficiency, and innovation.
+				</p>
+			</div>
+
+			<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+				{#each services as service}
+					<div
+						class="bg-opacity-50 rounded-lg bg-gray-800 p-8 transition-all duration-300 hover:-translate-y-2 hover:transform hover:bg-gray-700"
+					>
+						<div class="mb-6 text-4xl">{service.icon}</div>
+						<h3 class="mb-4 text-2xl font-bold">{service.title}</h3>
+						<p class="text-gray-300">{service.description}</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</section>
+
+	<!-- Solutions Section -->
+	<section id="solutions" class="bg-gradient-to-r from-blue-900 to-purple-900 py-20">
+		<div class="container mx-auto px-6">
+			<div class="mb-16 text-center">
+				<div class="bg-opacity-20 mb-4 inline-block rounded-lg bg-blue-500 p-2">
+					<span class="font-bold text-blue-300">Our Approach</span>
+				</div>
+				<h2 class="mb-6 text-4xl font-bold">Innovative Solutions for Complex Challenges</h2>
+				<p class="mx-auto max-w-3xl text-gray-300">
+					We combine creativity with technical expertise to develop solutions that address your most
+					pressing business challenges.
+				</p>
+			</div>
+
+			<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
+				<div class="bg-opacity-30 rounded-lg bg-gray-800 p-8">
+					<h3 class="mb-4 text-2xl font-bold">Discovery</h3>
+					<p class="mb-6 text-gray-300">
+						We begin by understanding your business, challenges, and goals through in-depth
+						consultation and analysis.
+					</p>
+					<div class="mb-2 flex h-16 w-16 items-center justify-center rounded-full bg-blue-500">
+						<span class="text-2xl">1</span>
+					</div>
+				</div>
+
+				<div class="bg-opacity-30 rounded-lg bg-gray-800 p-8">
+					<h3 class="mb-4 text-2xl font-bold">Innovation</h3>
+					<p class="mb-6 text-gray-300">
+						Our experts design tailored solutions leveraging cutting-edge technologies and
+						methodologies.
+					</p>
+					<div class="mb-2 flex h-16 w-16 items-center justify-center rounded-full bg-blue-500">
+						<span class="text-2xl">2</span>
+					</div>
+				</div>
+
+				<div class="bg-opacity-30 rounded-lg bg-gray-800 p-8">
+					<h3 class="mb-4 text-2xl font-bold">Implementation</h3>
+					<p class="mb-6 text-gray-300">
+						We bring solutions to life with meticulous development, testing, and deployment
+						processes.
+					</p>
+					<div class="mb-2 flex h-16 w-16 items-center justify-center rounded-full bg-blue-500">
+						<span class="text-2xl">3</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- CTA Section -->
+	<section id="contact" class="bg-gradient-to-r from-blue-800 to-purple-900 py-20">
+		<div class="container mx-auto px-6 text-center">
+			<h2 class="mb-8 text-4xl font-bold">Ready to Transform Your Business?</h2>
+			<p class="mx-auto mb-12 max-w-3xl text-xl text-gray-300">
+				Let's collaborate to create innovative solutions that drive your business forward in the
+				digital age.
+			</p>
+			<form class="mx-auto max-w-lg">
+				<div class="mb-6 flex flex-col gap-4 md:flex-row">
+					<div class="flex-1">
+						<label for="name" class="sr-only">Your Name</label>
+						<input
+							type="text"
+							id="name"
+							placeholder="Your Name"
+							class="w-full rounded-lg border border-gray-700 bg-gray-800 px-4 py-3 text-white focus:border-blue-500 focus:outline-none"
+						/>
+					</div>
+					<div class="flex-1">
+						<label for="email" class="sr-only">Your Email</label>
+						<input
+							type="email"
+							id="email"
+							placeholder="Your Email"
+							class="w-full rounded-lg border border-gray-700 bg-gray-800 px-4 py-3 text-white focus:border-blue-500 focus:outline-none"
+						/>
+					</div>
+				</div>
+				<div>
+					<label for="message" class="sr-only">Your Message</label>
+					<textarea
+						id="message"
+						placeholder="Your Message"
+						rows="4"
+						class="mb-6 w-full rounded-lg border border-gray-700 bg-gray-800 px-4 py-3 text-white focus:border-blue-500 focus:outline-none"
+					></textarea>
+				</div>
+				<button
+					type="submit"
+					class="w-full rounded-lg bg-blue-600 px-8 py-3 font-bold text-white transition hover:bg-blue-700"
+				>
+					Get in Touch
+				</button>
+			</form>
+		</div>
+	</section>
+
+	<!-- Footer -->
+	<footer class="bg-gray-900 py-12">
+		<div class="container mx-auto px-6">
+			<div class="flex flex-col justify-between md:flex-row">
+				<div class="mb-8 md:mb-0">
+					<div class="mb-4 flex items-center">
+						<span class="text-2xl font-bold text-blue-500">A2Z</span>
+						<span class="text-2xl font-bold">Software</span>
+					</div>
+					<p class="max-w-xs text-gray-400">
+						Transforming businesses through innovative technology solutions.
+					</p>
+				</div>
+
+				<div class="grid grid-cols-2 gap-8 md:grid-cols-3">
+					<div>
+						<h3 class="mb-4 text-lg font-bold">Company</h3>
+						<ul class="space-y-2">
+							<li><a href="#about" class="text-gray-400 transition hover:text-white">About</a></li>
+							<li>
+								<a href="/careers" class="text-gray-400 transition hover:text-white">Careers</a>
+							</li>
+							<li><a href="/blog" class="text-gray-400 transition hover:text-white">Blog</a></li>
+						</ul>
+					</div>
+
+					<div>
+						<h3 class="mb-4 text-lg font-bold">Services</h3>
+						<ul class="space-y-2">
+							<li>
+								<a href="/services/development" class="text-gray-400 transition hover:text-white"
+									>Development</a
+								>
+							</li>
+							<li>
+								<a href="/services/consulting" class="text-gray-400 transition hover:text-white"
+									>Consulting</a
+								>
+							</li>
+							<li>
+								<a href="/services/cloud" class="text-gray-400 transition hover:text-white"
+									>Cloud Solutions</a
+								>
+							</li>
+							<li>
+								<a href="/services/ai-ml" class="text-gray-400 transition hover:text-white"
+									>AI & ML</a
+								>
+							</li>
+						</ul>
+					</div>
+
+					<div>
+						<h3 class="mb-4 text-lg font-bold">Connect</h3>
+						<ul class="space-y-2">
+							<li>
+								<a href="#contact" class="text-gray-400 transition hover:text-white">Contact</a>
+							</li>
+							<li>
+								<a
+									href="https://linkedin.com"
+									class="text-gray-400 transition hover:text-white"
+									target="_blank"
+									rel="noopener noreferrer">LinkedIn</a
+								>
+							</li>
+							<li>
+								<a
+									href="https://twitter.com"
+									class="text-gray-400 transition hover:text-white"
+									target="_blank"
+									rel="noopener noreferrer">Twitter</a
+								>
+							</li>
+							<li>
+								<a
+									href="https://github.com"
+									class="text-gray-400 transition hover:text-white"
+									target="_blank"
+									rel="noopener noreferrer">GitHub</a
+								>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<div
+				class="mt-12 flex flex-col items-center justify-between border-t border-gray-800 pt-8 md:flex-row"
+			>
+				<p class="text-gray-500">© 2025 A2Z Software Inc. All rights reserved.</p>
+				<div class="mt-4 flex space-x-6 md:mt-0">
+					<a
+						href="https://facebook.com"
+						class="text-gray-400 transition hover:text-white"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="Facebook"
+					>
+						<svg
+							class="h-6 w-6"
+							fill="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
+							/>
+						</svg>
+					</a>
+					<a
+						href="https://twitter.com"
+						class="text-gray-400 transition hover:text-white"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="Twitter"
+					>
+						<svg
+							class="h-6 w-6"
+							fill="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
+							/>
+						</svg>
+					</a>
+					<a
+						href="https://github.com"
+						class="text-gray-400 transition hover:text-white"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="GitHub"
+					>
+						<svg
+							class="h-6 w-6"
+							fill="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+							/>
+						</svg>
+					</a>
+					<a
+						href="https://linkedin.com"
+						class="text-gray-400 transition hover:text-white"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="LinkedIn"
+					>
+						<svg
+							class="h-6 w-6"
+							fill="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+		</div>
+	</footer>
+</div>

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});