homepage update

23 files changed, 1355 insertions, 84 deletions

diff --git a/src/app.css b/src/app.css
index 3a722fb1..63e5c767 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,6 +11,14 @@ html {
 	font-family: PublicSans, sans-serif;
 }
 
+:root {
+  --purple: #7105f3;
+  --slate_blue: #7f8a9d;
+  --bg_light: #F2F2F2;
+  --transition_3s: all .3s ease-in-out;
+  --transition_5s: all .5s ease-in-out;
+}
+
 ::selection {
 	color: black;
 	background: #eaf2ff;
@@ -22,7 +30,7 @@ html {
 
 input,
 textarea {
-	@apply block border rounded-2xl px-5 py-4 w-full;
+	@apply block border rounded-2xl px-5 py-4 w-full text-white font-bold;
 }
 
 button.primary {
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index ed7907c1..b063f844 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -25,8 +25,7 @@
 	<nav class="block xl:flex flex-wrap justify-between items-center">
 		<div class="flex justify-start md:justify-center items-center md:space-x-10">
 			<a href="/" on:click={() => scroll(header)}>
-				<Icon icon="logo" style="hidden md:block mb-5 xl:mb-0" />
-				<Icon icon="logo" style="block md:hidden ml-5 w-48" />
+				<img src="images/logo.png" class="max-w-[140px]" />
 			</a>
 		</div>
 
@@ -122,4 +121,35 @@
 	.z {
 		z-index: 100;
 	}
+
+	button {
+		font-size: 14px;
+		font-weight: 600;
+    color: black;
+		text-transform: uppercase;
+		font-family: 'Work Sans', sans-serif;
+		position: relative;
+		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+			border-color 0.15s ease-in-out;
+	}
+
+button::after{
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: #7005f38a;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
 </style>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 5ea1418c..3bf8c8de 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -201,7 +201,7 @@
 				{#if value === arrow}
 					<button
 						type="button"
-						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80 text-white"
 						on:click={() => handleInput(value)}
 					>
 						<Left />
@@ -209,7 +209,7 @@
 				{:else}
 					<button
 						type="button"
-						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80 text-white"
 						on:click={() => handleInput(value)}>{value}</button
 					>
 				{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3331b69b..6fcf7657 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,102 +1,391 @@
 <script>
-	import {
-		LandingHeader,
-		LandingHero,
-		LandingInfoCard,
-		HowItWorksCard,
-		FaqCard,
-		Image,
-		About,
-		Footer
-	} from '$comp';
+	import { scroll } from '$lib/utils';
+  let faq;
 
-	import { t } from '$lib/translations';
-	import { close } from '$lib/socket';
-	import { onMount } from 'svelte';
+  
+</script>
+
+<svelte:head>
+	<link
+		href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+		rel="stylesheet"
+		integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+		crossorigin="anonymous"
+	/>
+	<link href="responsive.css" rel="stylesheet" />
+	<link href="style.css" rel="stylesheet" />
 
-	export let data;
-	let { locations, user } = data;
-	let update = (data) => ({ locations, user } = data);
-	$: update(data);
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+</svelte:head>
 
-	let howItWorks;
-	let faq;
-	let about;
+<!-- aleart -->
+<div
+	class="top_alert position-relative alert bg_purple mb-0 alert-dismissible fade show border_radius_0"
+	role="alert"
+>
+	<p class="text-center mb-0 text-white fw-semibold">
+		It's important not to forget your <span class="txt_yellow">username</span> and
+		<span class="txt_yellow">password</span> since we don't have access to those details.
+	</p>
+	<button
+		type="button"
+		class="bg-transparent border-0 shadow-none"
+		data-bs-dismiss="alert"
+		aria-label="Close"><img src="images/cross-icon.png" alt="" /></button
+	>
+</div>
 
-	let log = console.log;
+<!-- nav -->
+<nav class="navbar navbar-expand-lg bg-transparent py-3">
+	<div class="container-xxl px-lg-5 px-sm-4 px-3">
+		<a class="navbar-brand site_logo" href="#"><img src="images/logo.png" alt="" /></a>
+		<button
+			class="navbar-toggler border-0 shadow-none"
+			type="button"
+			data-bs-toggle="offcanvas"
+			data-bs-target="#offcanvas"
+		>
+			<span class="navbar-toggler-icon" />
+		</button>
+		<div class="offcanvas offcanvas-start flex-lg-row flex-column" id="offcanvas">
+			<div class="py-4 pb-5 px-3 d-lg-none d-flex justify-content-end w-100">
+				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" />
+			</div>
+			<ul class="navbar-nav text-lg-start text-center mx-auto mb-2 mb-lg-0">
+				<li class="nav-item me-lg-5 mb-lg-0 mb-4">
+					<a class="nav-link active" href="#">How it works</a>
+				</li>
+				<li class="nav-item me-lg-5 mb-lg-0 mb-4">
+          <a class="nav-link" href="" on:click={() => scroll(faq)}>F.A.Q.</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="#">About</a>
+				</li>
+			</ul>
+			<div
+				class="d-flex justify-content-lg-end justify-content-center nav_btn pt-lg-0 pt-5"
+				role="search"
+			>
+				<a href="/register" class="btn_black"><span>get started</span></a>
+				<a href="/login" class="btn_white"><span>sign in</span></a>
+			</div>
+		</div>
+	</div>
+</nav>
 
-	const howItWorksSteps = [
-		{ image: 'hand', stepID: 'step1' },
-		{ image: 'bolt', stepID: 'step2' },
-		{ image: 'smile', stepID: 'step3' }
-	];
+<!-- hero -->
+<div class="site_hero pt-md-5 pt-4">
+	<div class="container-lg px-sm-4 px-3 pt-md-5 text-center">
+		<h1
+			class="text-center text-black f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
+		>
+			The easiest way to get <br />
+			started with bitcoin.
+		</h1>
+		<p class="text-center txt_slate_blue mb-4">
+			A simple but powerful web wallet for everyone. *No software or hardware required.*
+		</p>
+		<a href="/register" class="btn_purple"><span class="px-5">Start in Seconds</span></a>
+	</div>
+	<div class="container-xxl px-lg-5 px-sm-4 px-3">
+		<div class="w-100">
+			<img class="w-100" src="images/hero_bg.png" alt="" />
+		</div>
+	</div>
+</div>
 
-	const faqIDs = ['cost', 'compatibility', 'safety'];
+<!-- first grid -->
+<section class="py-4">
+	<div class="container-lg px-sm-4 px-3">
+		<div class="row justify-content-center">
+			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
+				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+					<img src="images/swapee-grid-1-3.png" alt="" />
+					<h5 class="f_bebas_neue fw-bold letter_space_1">Create your account</h5>
+					<p class="txt_slate_blue lh-base">
+						A username and password is all you need to get started. <a
+							href="#"
+							class="swapee_grid_link">Don’t forget it!</a
+						>
+					</p>
+				</div>
+			</div>
+			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
+				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+					<img src="images/swapee-grid-2-3.png" alt="" />
+					<h5 class="f_bebas_neue fw-bold letter_space_1">Ask for payments</h5>
+					<p class="txt_slate_blue lh-base">
+						It’s the same as you normally would traditionally, but with bitcoin.
+					</p>
+				</div>
+			</div>
+			<div class="col-lg-4 col-md-6">
+				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+					<img src="images/swapee-grid-3-3.png" alt="" />
+					<h5 class="f_bebas_neue fw-bold letter_space_1">That's all!</h5>
+					<p class="txt_slate_blue lh-base">
+						Spend your coins immediately or save it and watch it grow, the choice is yours.
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
 
-	onMount(async () => {
-		close();
+<!-- lightning network -->
+<section class="pt-md-5">
+	<div class="container-lg px-sm-4 px-3">
+		<div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
+			<div class="col-md-7 mb-md-0 mb-4">
+				<div>
+					<h6 class="f_bebas_neue txt_purple">Say Goodbye to Waiting</h6>
+					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">
+						Lightning Network <br />
+						Brings Instant Payments
+					</h2>
+					<p class="txt_slate_blue">
+						Say goodbye to the headaches of waiting for bank settlements and dealing with
+						chargebacks with our payment solution. With instant settlement and no 3% credit card
+						processing fees, merchants can enjoy hassle-free retail payments.
+					</p>
 
-		try {
-			({ locations } = await fetch('/locations').then((r) => r.json()));
-		} catch (e) {
-			console.log(e);
-		}
-	});
-</script>
+					<div class="mt-4 sec_btn">
+						<a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
+						<a href="#" class="btn_black f_bebas_neue"><span>Get Started</span></a>
+					</div>
+				</div>
+			</div>
 
-<svelte:head>
-	<script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>
-</svelte:head>
+			<div class="col-md-5 mb-md-0 mb-5 scale_img_right">
+				<div>
+					<img src="images/swapee-sec-calculator.png" class="w-100" alt="" />
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
 
-<LandingHeader {howItWorks} {faq} {about} {user} />
+<section class="pt-5 bg_light">
+	<div class="container-lg px-sm-4 px-3">
+		<div class="row align-items-center justify-content-center">
+			<div class="col-md-5 scale_img_left">
+				<div>
+					<img src="images/swapee-sec-2-img.png" class="w-100" alt="" />
+				</div>
+			</div>
 
-<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
-	<LandingHero {user} />
-	<LandingInfoCard
-		image="lightning-qr"
-		title={$t('landing.info1.title')}
-		description={$t('landing.info1.description')}
-	/>
+			<div class="col-md-7 mb-md-0 mb-4">
+				<div>
+					<h6 class="f_bebas_neue txt_purple">Quick and painless</h6>
+					<h2 class="h1 f_bebas_neue fw-bold text-black br_md_none mb-3 letter_space_2 lh-1">
+						Simple to use
+					</h2>
+					<p class="txt_slate_blue mb-4">
+						Just enter an amount in your local currency, share the QR code and you’re done. We do
+						all the heavy lifting so you can focus on your business. You always have the option of
+						taking custody of your funds by withdrawing instantly at any time.
+					</p>
+
+					<div class="mt-4 sec_btn">
+						<a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
+						<a href="/register" class="btn_purple f_bebas_neue"><span>Get Started</span></a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+<section class="sec_3 position-relative">
+	<div class="col-md-5 d-xxl-none d-md-block d-none position-absolute img_position">
+		<div>
+			<img src="images/swapee-sec-3-img.png" class="w-100" alt="" />
+		</div>
+	</div>
 
-	<LandingInfoCard image="phone-checkout" title={$t('landing.info2.title')} order="reverse">
-		{$t('landing.info2.description1')}
-		<br /><br />
-		{$t('landing.info2.description2')}
-		<br /><br />
-		{@html $t('landing.info2.description3')}
-	</LandingInfoCard>
+	<div class="container-lg px-sm-4 px-3">
+		<div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
+			<div class="col-md-6 mb-md-0 mb-4">
+				<div>
+					<h6 class="f_bebas_neue txt_purple">Customized & Personalized</h6>
+					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">
+						Brand it your way!
+					</h2>
+					<p class="txt_slate_blue">
+						You have complete control over your profile page's aesthetic. Customize it with your
+						preferred color scheme, avatar, and banner to reflect your brand, personality and
+						interests.
+					</p>
 
-	<div>
-		<LandingInfoCard
-			image="customize"
-			title={$t('landing.info3.title')}
-			description={$t('landing.info3.description')}
-		/>
-		<div bind:this={howItWorks} />
-		<div id="about" />
+					<div class="mt-4 sec_btn">
+						<a href="#" class="btn_white f_bebas_neue mb-3"><span>Learn More</span></a>
+						<a href="#" class="btn_black f_bebas_neue mb-3"><span>Get Started</span></a>
+					</div>
+				</div>
+			</div>
+
+			<div class="col-md-6 mb-md-0 mb-4 sec_3_img">
+				<div class="d-xxl-block d-md-none d-block">
+					<img src="images/swapee-sec-3-img.png" class="w-100" alt="" />
+				</div>
+			</div>
+		</div>
 	</div>
+</section>
+
+<section class="py-5 bg_light">
+  <div class="container-lg px-sm-4 px-3" bind:this={faq}>
+		<div class="row align-items-center justify-content-center">
+			<div class="col-12 text-center">
+				<h6 class="f_bebas_neue txt_purple">This might help</h6>
+				<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-5 lh-1">
+					Frequently asked <br /> questions
+				</h2>
+			</div>
+
+			<div class="accordion" id="accordionExample">
+				<div class="accordion-item swapee_accordion">
+					<h2 class="" id="headingOne">
+						<button
+							class="accordion-button shadow-none"
+							type="button"
+						>
+							<span class="line"> What does it cost? </span>
+						</button>
+					</h2>
+					<div
+						id="collapseOne"
+					>
+						<div class="accordion-body">
+							<p class="txt_slate_blue">
+								It's free to register an account and receive payments. We charge a 0.1% conversion
+								fee if you withdraw regular bitcoin to lightning or vice versa.
+							</p>
+						</div>
+					</div>
+				</div>
 
-	<div>
-		<h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3>
-		<div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center">
-			{#each howItWorksSteps as step}
-				<HowItWorksCard image={step.image} stepID={step.stepID} />
-			{/each}
+				<div class="accordion-item swapee_accordion">
+					<h2 class="accordion-header" id="headingTwo">
+						<button
+							class="accordion-button shadow-none"
+							type="button"
+						>
+							<span class="line"> Do I need any special device or software? </span>
+						</button>
+					</h2>
+					<div
+						id="collapseTwo"
+					>
+						<div class="accordion-body">
+							<p class="txt_slate_blue">
+								It's free to register an account and receive payments. We charge a 0.1% conversion
+								fee if you withdraw regular bitcoin to lightning or vice versa.
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="accordion-item swapee_accordion">
+					<h2 class="accordion-header" id="headingThree">
+						<button
+							class="accordion-button shadow-none "
+							type="button"
+						>
+							<span class="line"> When do my funds settle? </span>
+						</button>
+					</h2>
+					<div
+						id="collapseThree"
+						aria-labelledby="headingThree"
+						data-bs-parent="#accordionExample"
+					>
+						<div class="accordion-body">
+							<p class="txt_slate_blue">
+								It's free to register an account and receive payments. We charge a 0.1% conversion
+								fee if you withdraw regular bitcoin to lightning or vice versa.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
-		<div bind:this={faq} />
 	</div>
+</section>
 
-	<div>
-		<div class="space-y-10">
-			<h3 class="text-5xl font-medium text-center">{$t('faq.header')}</h3>
-			{#each faqIDs as faqID}
-				<FaqCard questionID={faqID} />
-			{/each}
+<!-- bitcoin_location -->
+<div class="bitcoin_location">
+	<div class="container-lg px-sm-4 px-3">
+		<h2 class="h3 text-center text-black f_bebas_neue fw-bold letter_space_2">
+			Real-World Bitcoin Locations
+		</h2>
+		<p class="text-center opacity-75 mb-md-5 mb-4">
+			Join the <span class="fs_18 fw-bold">Growing businesses</span> that accept
+			<span class="fs_18 fw-bold">Bitcoin</span>
+			with <span class="fs_18 fw-bold">Swapee!</span>
+		</p>
+		<div class="d-flex justify-content-center align-items-start flex-wrap">
+			<a href="#" class="btn_line me-sm-3 me-2 mb-4">Business Listings</a>
+			<a href="#" class="btn_black"><span class="px-sm-5">Get Listed</span></a>
 		</div>
-		<div bind:this={about} />
 	</div>
+</div>
 
-	<About {locations} />
-</main>
+<!-- footer -->
+<footer class="site_footer">
+	<div class="container-lg px-4">
+		<!-- footer_top -->
+		<div class="footer_top pb-4">
+			<div class="row align-items-center justify-content-between">
+				<div class="col-md-5 mb-md-0 mb-5">
+					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
+					<p class="text-white-50 mt-5 mb-4">
+						Copyright © 2023. Swapee.me is a Registered Cryptoasset firm and is registered with the
+						UK Financial Conduct Authority.
+						<br />
+						<br />
+						All rights reserved.
+					</p>
+					<a class="btn_language" href="#">English</a>
+				</div>
+				<div
+					class="ps-md-4 footer_top_right col-md-6 d-flex align-items-center justify-content-end justify-content-sm-center justify-content-between"
+				>
+					<div class="row justify-content-md-end">
+						<div class="col-xl-6 col-md-10 col-sm-6 mb-xl-0 mb-4 pe-xl-5 pe-md-0 pe-sm-5">
+							<h6 class="text-white opacity-75 mb-0">Business enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+						<div class="col-xl-6 col-md-10 col-sm-6 pe-xl-5 pe-md-0 pe-sm-5">
+							<h6 class="text-white opacity-75 mb-0">Job enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+					</div>
+					<div class="social_links d-flex">
+						<a href="#" class="me-3"><img src="images/twitter.svg" alt="" /></a>
+						<a href="#"><img src="images/telegram.svg" alt="" /></a>
+					</div>
+				</div>
+			</div>
+		</div>
 
-<Footer />
+		<!-- footer_bottom -->
+		<div class="footer_bottom pt-4 pb-2">
+			<ul class="list-unstyled mb-0 ps-0">
+				<li class="pb-3">
+					<a href="#">Documentation</a>
+				</li>
+				<li class="pb-3">
+					<a href="#">Privacy Policy</a>
+				</li>
+				<li class="pb-3">
+					<a href="#">Terms of Use</a>
+				</li>
+				<li class="pb-3">
+					<a href="#">Contributor License Agreement</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</footer>
diff --git a/src/swapee/css/responsive.css b/src/swapee/css/responsive.css
new file mode 100644
index 00000000..53c1ece7
--- /dev/null
+++ b/src/swapee/css/responsive.css
@@ -0,0 +1,66 @@
+@media(min-width: 1399px){
+    /* sec_3 */
+    .sec_3{
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+    }
+}
+
+@media(max-width: 991px){
+    /* bitcoin_location */
+    .bitcoin_location{
+        padding-top: 70px;
+        padding-bottom: 70px;
+    }
+
+    /* section 3 */
+    .sec_3_img {
+        transform: translateX(40px);
+    }
+
+    /* footer */
+    .footer_bottom{
+        justify-content: center;
+    }
+}
+
+@media(max-width: 767px) {
+    .scale_img_right img, .scale_img_left img {
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+}
+
+    /* section 3 */
+    .sec_3{
+        padding-top: 3rem;
+        padding-bottom: 1.5rem;
+    }
+    .sec_3_img {
+        transform: translateX(2%);
+        -webkit-transform: translateX(2%);
+        -moz-transform: translateX(2%);
+        -ms-transform: translateX(2%);
+        -o-transform: translateX(2%);
+    }
+}
+
+@media(max-width: 576px){
+    /* bitcoin_location */
+    .bitcoin_location{
+        padding-top: 50px;
+        padding-bottom: 50px;
+    }
+
+    /* footer */
+    .site_footer{
+        padding-top: 50px;
+    }
+    
+    /* section */
+    .sec_btn a{
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
new file mode 100644
index 00000000..69996058
--- /dev/null
+++ b/src/swapee/css/style.css
@@ -0,0 +1,549 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    font-family: 'Inter', sans-serif;
+}
+
+:root{
+    --purple: #7105f3;
+    --slate_blue: #7f8a9d;
+    --bg_light: #F2F2F2;
+    --transition_3s: all .3s ease-in-out;
+    --transition_5s: all .5s ease-in-out;
+}
+
+/* utility classes */
+.letter_space_2{
+    letter-spacing: 2px;
+}
+
+.fs_18{
+    font-size: 18px !important;
+}
+
+.f_bebas_neue{
+    font-family: 'Bebas Neue', sans-serif;
+}
+
+.bg_purple{
+    background: var(--purple);
+}
+
+.bg_light {
+    background: var(--bg_light);
+}
+
+.txt_yellow{
+    color: #FFEA01;
+}
+
+.txt_purple {
+    color: var(--purple);
+}
+
+.txt_slate_blue {
+    color: var(--slate_blue);
+}
+
+.border_radius_0{
+    border-radius: 0 !important;
+    -webkit-border-radius: 0 !important;
+    -moz-border-radius: 0 !important;
+    -ms-border-radius: 0 !important;
+    -o-border-radius: 0 !important;
+}
+
+.letter_space_1 {
+    letter-spacing: 1px;
+}
+
+.letter_space_2{
+    letter-spacing: 2px;
+}
+
+/* top_alert */
+.top_alert{
+    border-bottom: 2px solid var(--bs-black);
+}
+
+.top_alert button{
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+}
+
+/* nav */
+.site_logo img{
+    max-width: 140px;
+}
+
+#offcanvas ul li a{
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--bs-black);
+    text-transform: uppercase;
+    font-family: 'Work Sans', sans-serif;
+    position: relative;
+}
+
+#offcanvas ul li a::after{
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: #7005f38a;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+#offcanvas ul li a.active::after,
+#offcanvas ul li a:hover::after{
+    width: 50px;
+}
+
+.btn_white,
+.btn_black,
+.btn_purple{
+    position: relative;
+    font-family: 'Work Sans', sans-serif;
+    text-transform: uppercase;
+    font-weight: 600;
+    display: inline-block;
+    text-decoration: none;
+    border: 2px solid var(--bs-black);
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.btn_white::after,
+.btn_black::after,
+.btn_purple::after{
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    width: 100%;
+    height: 100%;
+    background: var(--bs-black);
+    border: 1px solid var(--bs-black);
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+    transition: all .2s linear;
+    -webkit-transition: all .2s linear;
+    -moz-transition: all .2s linear;
+    -ms-transition: all .2s linear;
+    -o-transition: all .2s linear;
+}
+
+.btn_black::after{
+    top: 2px;
+    background: var(--bs-white);
+}
+
+.btn_purple:hover,
+.btn_white:hover,
+.btn_black:hover{
+    transform: translateY(1px) translateX(1px);
+    -webkit-transform: translateY(1px) translateX(1px);
+    -moz-transform: translateY(1px) translateX(1px);
+    -ms-transform: translateY(1px) translateX(1px);
+    -o-transform: translateY(1px) translateX(1px);
+}
+
+.btn_black:hover::after,
+.btn_white:hover::after,
+.btn_purple:hover::after{
+    transform: translateY(-2px) translateX(-2px);
+    -webkit-transform: translateY(-2px) translateX(-2px);
+    -moz-transform: translateY(-2px) translateX(-2px);
+    -ms-transform: translateY(-2px) translateX(-2px);
+    -o-transform: translateY(-2px) translateX(-2px);
+}
+
+.btn_black span,
+.btn_white span,
+.btn_purple span{
+    color: var(--bs-black);
+    width: 100%;
+    height: 100%;
+    display: block;
+    padding: 8px 25px;
+    background: var(--bs-white);
+    position: relative;
+    z-index: 2;
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+}
+
+.btn_black span{
+    background: var(--bs-black);
+    color: var(--bs-white);
+}
+
+.btn_purple span{
+    background: var(--purple);
+    color: var(--bs-white);
+}
+
+.nav_btn a:not(:last-child){
+    margin-right: 15px;
+}
+
+
+/* bitcoin_location */
+.bitcoin_location{
+    display: flex;
+    align-items: center;
+    padding-top: 90px;
+    padding-bottom: 90px;
+    background: url("../img/map.png") no-repeat;
+    background-size: cover;
+}
+
+.bitcoin_location a.btn_line{
+    text-decoration: none;
+    padding: 9px 25px;
+    font-weight: 600;
+    color: var(--bs-black);
+    text-transform: uppercase;
+    font-family: 'Work Sans', sans-serif;
+    position: relative;
+}
+
+.bitcoin_location a.btn_line::after{
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 50px;
+    height: 2px;
+    background: #7005f38a;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+/* grid */
+.swapee_3_grids img {
+    height: 230px;
+    height: 65%;
+    max-height: 230px;
+}
+
+.swapee_grid_link {
+    text-decoration: underline;
+    color: var(--slate_blue);
+    transition: var(--transition_3s);
+    font-weight: 600;
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.swapee_grid_link:hover {
+    color: var(--slate_blue);
+    text-decoration: none;
+}
+
+.scale_img_right img,
+.scale_img_left img{
+    transform: scale(1.2);
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    -o-transform: scale(1.2);
+}
+
+.img_position{
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+}
+
+.sec_3{
+    padding-top: 12vw;
+    padding-bottom: 12vw;
+}
+
+/* accordion */
+.swapee_accordion {
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border: 1px solid #D1D5DB;
+}
+
+.swapee_accordion:not(:last-child) {
+    margin-bottom: 20px;
+}
+
+.swapee_accordion h2 {
+    margin-bottom: 0;
+}
+
+.swapee_accordion:first-of-type .accordion-button {
+    border-radius: 10px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+}
+
+.swapee_accordion:first-of-type {
+    border-radius: 10px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+}
+
+.swapee_accordion:last-of-type {
+    border-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+}
+
+.swapee_accordion:first-of-type .accordion-button {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.swapee_accordion .accordion-button {
+    font-weight: bold;
+    border-radius: 10px;
+}
+
+.swapee_accordion:last-of-type .accordion-button.collapsed {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.swapee_accordion .accordion-button:not(.collapsed)::after {
+    background-image: url("../img/accordion-minus-icon.svg");
+}
+
+.swapee_accordion .accordion-button::after {
+    background-image: url("../img/accordion-plus-icon.svg");
+}
+
+.swapee_accordion .accordion-button:not(.collapsed) {
+    background: var(--bs-white);
+    color: var(--bs-black);
+    border: 1px solid var(--bs-black);
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-bottom: 0;
+}
+
+.swapee_accordion .accordion-button {
+    transition: all .2s ease-in-out;
+    -webkit-transition: all .2s ease-in-out;
+    -moz-transition: all .2s ease-in-out;
+    -ms-transition: all .2s ease-in-out;
+    -o-transition: all .2s ease-in-out;
+}
+
+
+.swapee_accordion .accordion-collapse {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.swapee_accordion .accordion-collapse {
+    border: 1px solid transparent;
+    border-top: none;
+    transition: all .2s ease-in-out;
+    -webkit-transition: all .2s ease-in-out;
+    -moz-transition: all .2s ease-in-out;
+    -ms-transition: all .2s ease-in-out;
+    -o-transition: all .2s ease-in-out;
+}
+
+.swapee_accordion .accordion-collapse.collapse.show {
+    border-color: var(--bs-black);
+}
+
+.swapee_accordion .accordion-button:not(.collapsed) .line {
+    border-bottom: 2px solid var(--bs-black);
+    display: inline-block;
+    padding-bottom: 20px;
+}
+
+.swapee_accordion .accordion-button:not(.collapsed) .line::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    width: 90%;
+    background: #726F72;
+    height: 1px;
+}
+
+
+/* footer */
+.site_footer{
+    background: var(--bs-black);
+    padding-top: 70px;
+}
+
+.footer_top{
+    border-bottom: 1px solid #ffffff27;
+}
+
+.footer_logo img{
+    max-width: 140px;
+}
+
+.btn_language{
+    border: 1px solid #ffffff70;
+    padding: 6px 16px;
+    text-decoration: none;
+    color: var(--bs-white);
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.btn_language:hover{
+    background: #ffffffda;
+    border-color: #ffffffda;
+    color: var(--bs-black);
+}
+
+.footer_top_right a{
+    text-decoration: none;
+    color: var(--purple);
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.footer_top_right a:hover{
+    text-decoration: underline;
+}
+
+.footer_top_right .social_links a{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 45px;
+    height: 45px;
+    background: #1f1f1f;
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    -ms-border-radius: 100px;
+    -o-border-radius: 100px;
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.footer_top_right .social_links a:hover{
+    background: var(--purple);
+}
+
+.footer_top_right .social_links a img{
+    width: 40%;
+}
+
+.footer_bottom{
+    display: flex;
+    justify-content: flex-end;
+}
+
+.footer_bottom ul{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.footer_bottom ul li{
+    margin-left: 15px;
+}
+
+.footer_bottom ul li a{
+    padding: 6px 10px;
+    color: var(--bs-white);
+    opacity: 0.20;
+    text-decoration: none;
+    transition: var(--transition_3s);
+    -webkit-transition: var(--transition_3s);
+    -moz-transition: var(--transition_3s);
+    -ms-transition: var(--transition_3s);
+    -o-transition: var(--transition_3s);
+}
+
+.footer_bottom ul li a:hover{
+    opacity: .50;
+}
\ No newline at end of file
diff --git a/src/swapee/img/accordion-minus-icon.svg b/src/swapee/img/accordion-minus-icon.svg
new file mode 100644
index 00000000..9d05802b
--- /dev/null
+++ b/src/swapee/img/accordion-minus-icon.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 6" width="20" height="20"><style></style><filter id="f0"><feFlood flood-color="#070708" flood-opacity="1" /><feBlend mode="normal" in2="SourceGraphic"/><feComposite in2="SourceAlpha" operator="in" /></filter><g filter="url(#f0)"><path  d="m0.2 0.4h18.9v5h-18.9z"/></g></svg>
\ No newline at end of file
diff --git a/src/swapee/img/accordion-plus-icon.svg b/src/swapee/img/accordion-plus-icon.svg
new file mode 100644
index 00000000..1324632b
--- /dev/null
+++ b/src/swapee/img/accordion-plus-icon.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><style>.a{fill:#2b2b2b}</style><filter id="f0"><feFlood flood-color="#dadadc" flood-opacity="1" /><feBlend mode="normal" in2="SourceGraphic"/><feComposite in2="SourceAlpha" operator="in" /></filter><g filter="url(#f0)"><path class="a" d="m0.2 7.7h18.9v5h-18.9z"/><path class="a" d="m7.2 0.7h5v19h-5z"/></g></svg>
\ No newline at end of file
diff --git a/src/swapee/img/cross-icon.png b/src/swapee/img/cross-icon.png
new file mode 100644
index 00000000..05dead2e
--- /dev/null
+++ b/src/swapee/img/cross-icon.png
diff --git a/src/swapee/img/cross-icon.svg b/src/swapee/img/cross-icon.svg
new file mode 100644
index 00000000..e06811e4
--- /dev/null
+++ b/src/swapee/img/cross-icon.svg
@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 15" width="20" height="15"><style>tspan{white-space:pre}.a{font-size: 18px;line-height: 30px;fill: #101010;font-weight: 700;font-family: "Inter-Bold", "Inter"}.b{font-size: 18px;line-height: 30px;fill: #ffffff;font-weight: 700;font-family: "Inter-Bold", "Inter"}</style><text style="transform:matrix(1.418,0,0,1,2,14.545)" ><tspan x="0" y="0" class="a" dx="0 0" >X
+</tspan></text><text style="transform:matrix(1.418,0,0,1,0,13.545)" ><tspan x="0" y="0" class="b" dx="0 0" >X
+</tspan></text></svg>
\ No newline at end of file
diff --git a/src/swapee/img/footer-logo.png b/src/swapee/img/footer-logo.png
new file mode 100644
index 00000000..83623750
--- /dev/null
+++ b/src/swapee/img/footer-logo.png
diff --git a/src/swapee/img/hero_bg.png b/src/swapee/img/hero_bg.png
new file mode 100644
index 00000000..8b77b0c5
--- /dev/null
+++ b/src/swapee/img/hero_bg.png
diff --git a/src/swapee/img/logo.png b/src/swapee/img/logo.png
new file mode 100644
index 00000000..ceba7a08
--- /dev/null
+++ b/src/swapee/img/logo.png
diff --git a/src/swapee/img/map.png b/src/swapee/img/map.png
new file mode 100644
index 00000000..7d4ef582
--- /dev/null
+++ b/src/swapee/img/map.png
diff --git a/src/swapee/img/swapee-grid-1-3.png b/src/swapee/img/swapee-grid-1-3.png
new file mode 100644
index 00000000..b5d9cbe2
--- /dev/null
+++ b/src/swapee/img/swapee-grid-1-3.png
diff --git a/src/swapee/img/swapee-grid-1-3.svg b/src/swapee/img/swapee-grid-1-3.svg
new file mode 100644
index 00000000..a4d8ca8b
--- /dev/null
+++ b/src/swapee/img/swapee-grid-1-3.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 287" width="356" height="287"><defs><image  width="1920" height="1080" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4AQMAAADSHVMAAAAAAXNSR0IB2cksfwAAAANQTFRF////p8QbyAAAARNJREFUeJztwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCnAfjlAAGZJYkPAAAAAElFTkSuQmCC"/><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m89 41h134c8.28 0 15 6.72 15 15v160c0 8.28-6.72 15-15 15h-134c-8.28 0-15-6.72-15-15v-160c0-8.28 6.72-15 15-15z"/></clipPath></defs><style>.a{fill:#0f0f0f;stroke:#000;paint-order:stroke fill markers;stroke-linejoin:round;stroke-width:4}.b{fill:#fff;stroke:#000;paint-order:stroke fill markers;stroke-linejoin:round;stroke-width:4}.c{stroke:#000;stroke-linejoin:round;stroke-width:2}.d{fill:#fff;stroke:#fff;paint-order:stroke fill markers;stroke-linejoin:round;stroke-width:4}.e{fill:#fff;stroke:#000;stroke-linejoin:round;stroke-width:3}.f{fill:#fff}.g{fill:#7106f3}.h{fill:#0f0f0f}.i{display:none;fill:#0f0f0f;stroke:#0f0f0f;stroke-linejoin:round;stroke-width:2}.j{fill:#0f0f0f;stroke:#0f0f0f;stroke-linejoin:round;stroke-width:2}.k{display:none;fill:#0f0f0f}</style><use style="display:none" href="#img1" x="-785" y="-410"/><path class="a" d="m86 44h134c8.3 0 15 6.7 15 15v160c0 8.3-6.7 15-15 15h-134c-8.3 0-15-6.7-15-15v-160c0-8.3 6.7-15 15-15z"/><g clip-path="url(#cp1)"><path class="b" d="m89 41h134c8.3 0 15 6.7 15 15v160c0 8.3-6.7 15-15 15h-134c-8.3 0-15-6.7-15-15v-160c0-8.3 6.7-15 15-15z"/><path class="b" d="m92 38h134c8.3 0 15 6.7 15 15v160c0 8.3-6.7 15-15 15h-134c-8.3 0-15-6.7-15-15v-160c0-8.3 6.7-15 15-15z"/></g><path class="c" d="m93 48h128c5.5 0 10 4.5 10 10v35c0 5.5-4.5 10-10 10h-128c-5.5 0-10-4.5-10-10v-35c0-5.5 4.5-10 10-10z"/><path  d="m123 187h63v4h-63z"/><path  d="m128 143h54v3h-54z"/><path  d="m115 153h25v3h-25z"/><path  d="m125 153h25v3h-25z"/><path  d="m171 153h25v3h-25z"/><path  d="m161 153h25v3h-25z"/><path class="d" d="m154.5 74c15.7 0 28.5 12.8 28.5 28.5 0 15.7-12.8 28.5-28.5 28.5-15.7 0-28.5-12.8-28.5-28.5 0-15.7 12.8-28.5 28.5-28.5z"/><path class="e" d="m154.5 74c15.7 0 28.5 12.8 28.5 28.5 0 15.7-12.8 28.5-28.5 28.5-15.7 0-28.5-12.8-28.5-28.5 0-15.7 12.8-28.5 28.5-28.5z"/><path fill-rule="evenodd" d="m138 92.5v18.8l6.6 4 16.4-9.5v-3.8l-16.4 9.5-3.3-2v-15l13.3-7.7 3.6 2.2 3.2-1.8-6.8-4.2zm33 18.9v-18.7l-6.6-4-16.4 9.4v3.8l16.4-9.4 3.3 2v14.9l-13.2 7.7-3.7-2.2-3.2 1.9 6.8 4.2z"/><path class="b" d="m144 167h174c5.5 0 10 4.5 10 10v23c0 5.5-4.5 10-10 10h-174c-5.5 0-10-4.5-10-10v-23c0-5.5 4.5-10 10-10z"/><path  d="m145 166h174c5.5 0 10 4.5 10 10v23c0 5.5-4.5 10-10 10h-174c-5.5 0-10-4.5-10-10v-23c0-5.5 4.5-10 10-10z"/><path class="f" d="m158.2 183.2v10.3c0 0.9-0.3 1.3-1.2 1.3-0.1 0-0.2 0-0.3 0v1.9c0.1 0 0.3 0 0.4 0 2.2 0 3.4-1 3.4-3.1v-10.4zm1.2-1.4c0.7 0 1.3-0.6 1.3-1.3 0-0.7-0.6-1.2-1.3-1.2-0.7 0-1.3 0.5-1.3 1.2 0 0.7 0.6 1.3 1.3 1.3zm-1.6 1.4v10.3c0 0.9-0.4 1.3-1.3 1.3-0.1 0-0.2 0-0.3 0v1.9c0.2 0 0.3 0 0.5 0 2.1 0 3.4-1 3.4-3.1v-10.4zm1.1-1.4c0.8 0 1.4-0.6 1.4-1.3 0-0.7-0.6-1.2-1.4-1.2-0.7 0-1.3 0.5-1.3 1.2 0 0.7 0.6 1.3 1.3 1.3zm7.9 11.4c1.5 0 2.5-0.7 2.9-1.5h0.1v1.3h2.2v-6.6c0-2.6-2.1-3.3-4-3.3-2.1 0-3.7 0.9-4.2 2.7l2.2 0.3c0.2-0.7 0.9-1.3 2-1.3 1.1 0 1.7 0.6 1.7 1.5v0.1c0 0.6-0.7 0.7-2.5 0.9-1.9 0.2-3.7 0.7-3.7 2.9 0 2 1.4 3 3.3 3zm0.6-1.7c-1 0-1.7-0.4-1.7-1.3 0-0.9 0.8-1.3 1.9-1.4 0.6-0.1 1.8-0.2 2.1-0.5v1.2c0 1.1-0.9 2-2.3 2zm-1.1 1.7c1.6 0 2.5-0.7 2.9-1.5h0.1v1.3h2.2v-6.6c0-2.6-2.1-3.3-4-3.3-2 0-3.6 0.9-4.1 2.7l2.1 0.3c0.3-0.7 0.9-1.3 2-1.3 1.1 0 1.7 0.6 1.7 1.5v0.1c0 0.6-0.7 0.7-2.4 0.9-1.9 0.2-3.8 0.7-3.8 2.9 0 2 1.5 3 3.3 3zm0.6-1.7c-0.9 0-1.6-0.4-1.6-1.3 0-0.9 0.7-1.3 1.8-1.4 0.6-0.1 1.8-0.2 2.1-0.5v1.2c0 1.1-0.9 2-2.3 2zm9.5 5.2c1.8 0 2.9-0.9 3.4-2.5l4-11h-2.5l-2.3 7.4h-0.1l-2.2-7.4h-2.5l3.6 10-0.2 0.5c-0.5 1.2-1.1 1.2-2.1 0.9l-0.6 1.8c0.3 0.2 0.9 0.3 1.5 0.3zm-0.4 0c1.8 0 2.8-0.9 3.4-2.5l3.9-11h-2.5l-2.2 7.4h-0.1l-2.3-7.4h-2.5l3.6 10-0.2 0.5c-0.4 1.2-1.1 1.2-2.1 0.9l-0.6 1.8c0.4 0.2 0.9 0.3 1.6 0.3z"/><path class="g" d="m194.6 196.7c1.6 0 3.4-0.4 4.2-0.9l-0.6-1.6c-0.6 0.2-2.1 0.7-3.5 0.7-4.2 0-6.5-2.3-6.5-6.5 0-3.8 2.2-6.5 6.3-6.5 3.4 0 6 1.9 6 5.5 0 2.7-0.4 3.9-1.5 3.9-0.5 0-0.8-0.5-0.8-1.1v-6.1h-1.8v0.7h-0.1c-0.2-0.5-1.4-1-2.8-0.9-1.8 0.3-3.5 1.7-3.5 4.5 0 2.8 1.5 4.5 3.6 4.6 1.5 0 2.6-0.6 2.9-1.4h0.1c0.1 1 1 1.5 2.2 1.4 2.8-0.1 3.6-2.5 3.6-5.4 0-4.2-2.8-7.5-7.8-7.5-5.3 0-8.4 3.3-8.4 8.4 0 5.2 3 8.2 8.4 8.2zm-0.5-5.6c-1.6 0-2.2-1.3-2.2-2.8 0-1.4 0.8-2.5 2.2-2.5 1.6 0 2.2 0.8 2.2 2.5 0.1 1.9-0.6 2.8-2.2 2.8zm0 5.6c1.6 0 3.4-0.4 4.2-0.9l-0.6-1.6c-0.6 0.2-2 0.7-3.5 0.7-4.2 0-6.5-2.3-6.5-6.5 0-3.8 2.2-6.5 6.4-6.5 3.4 0 5.9 1.9 5.9 5.5 0 2.7-0.4 3.9-1.4 3.9-0.6 0-0.9-0.5-0.9-1.1v-6.1h-1.8v0.7h-0.1c-0.2-0.5-1.4-1-2.8-0.9-1.8 0.3-3.5 1.7-3.5 4.5 0 2.8 1.5 4.5 3.6 4.6 1.5 0 2.6-0.6 2.9-1.4h0.1c0.1 1 1 1.5 2.3 1.4 2.7-0.1 3.5-2.5 3.5-5.4 0-4.2-2.8-7.5-7.8-7.5-5.3 0-8.4 3.3-8.4 8.4 0 5.2 3 8.2 8.4 8.2zm-0.4-5.6c-1.7 0-2.3-1.3-2.3-2.8 0-1.4 0.8-2.5 2.3-2.5 1.6 0 2.2 0.8 2.2 2.5 0 1.9-0.6 2.8-2.2 2.8zm19.4-5.3c-0.3-1.7-1.6-2.7-3.9-2.7-2.4 0-4 1.1-4 2.9 0 1.5 0.9 2.4 2.8 2.8l1.6 0.4c0.9 0.2 1.4 0.5 1.4 1.1 0 0.6-0.8 1.1-1.9 1.1-1 0-1.7-0.4-1.9-1.3l-2.3 0.2c0.3 1.8 1.8 2.9 4.2 2.9 2.5 0 4.2-1.3 4.2-3.1 0-1.4-0.9-2.3-2.7-2.7l-1.7-0.4c-1-0.2-1.4-0.5-1.4-1.1 0-0.7 0.7-1.1 1.7-1.1 1.1 0 1.6 0.6 1.8 1.2zm-0.5 0c-0.3-1.7-1.6-2.7-3.9-2.7-2.4 0-4 1.1-4 3 0 1.4 0.9 2.3 2.8 2.7l1.7 0.4c0.9 0.2 1.3 0.5 1.3 1.1 0 0.7-0.7 1.2-1.8 1.2-1.1 0-1.8-0.5-2-1.4l-2.3 0.3c0.3 1.8 1.9 2.8 4.3 2.8 2.4 0 4.1-1.3 4.2-3.1-0.1-1.4-1-2.3-2.8-2.7l-1.7-0.3c-1-0.3-1.4-0.6-1.4-1.2 0-0.6 0.8-1.1 1.7-1.1 1.1 0 1.7 0.6 1.8 1.2zm5.7 7.3h2.4l1.8-6.7h0.2l1.8 6.7h2.4l2.8-9.9h-2.4l-1.7 6.9h-0.1l-1.7-6.9h-2.4l-1.7 6.9h-0.1l-1.7-6.9h-2.4zm-0.5 0h2.4l1.9-6.6h0.1l1.9 6.6h2.4l2.8-9.8h-2.4l-1.7 6.9h-0.1l-1.8-6.9h-2.3l-1.8 6.9h-0.1l-1.7-6.9h-2.3zm17.3 0.2c1.6 0 2.5-0.7 2.9-1.5h0.1v1.3h2.2v-6.5c0-2.6-2.1-3.4-4-3.4-2 0-3.6 0.9-4.1 2.7l2.1 0.3c0.3-0.7 0.9-1.3 2-1.3 1.1 0 1.7 0.6 1.7 1.6 0 0.7-0.7 0.7-2.4 0.9-1.9 0.2-3.8 0.8-3.8 3 0 1.9 1.5 2.9 3.3 2.9zm0.6-1.7c-0.9 0-1.6-0.4-1.6-1.3 0-0.9 0.8-1.2 1.8-1.4 0.6-0.1 1.8-0.2 2.1-0.5v1.2c0 1.1-0.9 2-2.3 2zm-1 1.7c1.5 0 2.4-0.7 2.8-1.5h0.1v1.3h2.2v-6.5c0-2.6-2.1-3.4-3.9-3.4-2.1 0-3.7 0.9-4.2 2.7l2.2 0.3c0.2-0.7 0.8-1.3 2-1.3 1 0 1.6 0.6 1.6 1.6 0 0.7-0.7 0.7-2.4 0.9-1.9 0.2-3.7 0.8-3.7 3 0 1.9 1.4 2.9 3.3 2.9zm0.6-1.7c-1 0-1.7-0.4-1.7-1.3 0-0.9 0.8-1.2 1.8-1.4 0.6-0.1 1.8-0.2 2.1-0.5v1.2c0 1.1-0.8 2-2.2 2zm8.4 5.2h2.3v-5.2h0.1c0.3 0.7 1.1 1.7 2.8 1.7 2.3 0 4-1.8 4-5.1 0-3.2-1.7-5-4-5-1.7 0-2.5 1-2.8 1.7h-0.1v-1.6h-2.3zm2.2-8.6c0-1.9 0.9-3.1 2.4-3.1 1.5 0 2.3 1.3 2.3 3.1 0 1.9-0.8 3.2-2.3 3.2-1.5 0-2.4-1.3-2.4-3.2zm-2.7 8.6h2.3v-5.2h0.1c0.4 0.7 1.1 1.7 2.8 1.7 2.3 0 4.1-1.8 4.1-5.1 0-3.2-1.8-5-4.1-5-1.7 0-2.4 1-2.8 1.7h-0.1v-1.6h-2.3zm2.3-8.6c0-1.9 0.8-3.1 2.3-3.1 1.5 0 2.3 1.3 2.3 3.1 0 1.9-0.8 3.2-2.3 3.2-1.5 0-2.3-1.3-2.3-3.2zm14.8 5.1c2.3 0 3.9-1.1 4.3-2.8l-2.2-0.3c-0.3 0.9-1.1 1.3-2.1 1.3-1.5 0-2.5-1-2.5-2.7h6.9v-0.7c0-3.4-2.1-4.9-4.5-4.9-2.8 0-4.7 2-4.7 5.1 0 3.1 1.8 5 4.8 5zm-2.5-6c0.1-1.3 1-2.3 2.4-2.3 1.3 0 2.2 1 2.2 2.3zm2 6c2.3 0 3.9-1.1 4.3-2.8l-2.2-0.3c-0.3 0.9-1 1.3-2 1.3-1.5 0-2.5-1-2.5-2.7h6.8v-0.7c0-3.4-2.1-4.9-4.5-4.9-2.8 0-4.6 2-4.6 5.1 0 3.1 1.8 5 4.7 5zm-2.4-6c0-1.3 1-2.3 2.3-2.3 1.4 0 2.3 1 2.3 2.3zm14.6 6c2.3 0 3.9-1.1 4.3-2.8l-2.2-0.3c-0.3 0.9-1.1 1.3-2.1 1.3-1.4 0-2.4-1-2.5-2.7h6.9v-0.7c0-3.4-2.1-4.9-4.5-4.9-2.8 0-4.7 2-4.7 5.1 0 3.1 1.9 5 4.8 5zm-2.5-6c0.1-1.3 1-2.3 2.4-2.3 1.4 0 2.3 1 2.3 2.3zm2 6c2.2 0 3.8-1.1 4.2-2.8l-2.1-0.3c-0.3 0.9-1.1 1.3-2.1 1.3-1.5 0-2.5-1-2.5-2.7h6.8v-0.7c0-3.4-2-4.9-4.5-4.9-2.8 0-4.6 2-4.6 5.1 0 3.1 1.8 5 4.8 5zm-2.5-6c0.1-1.3 1-2.3 2.4-2.3 1.3 0 2.2 1 2.2 2.3zm11.7 6c0.8 0 1.4-0.7 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4-0.8 0-1.4 0.6-1.4 1.4 0 0.7 0.6 1.4 1.4 1.4zm-0.5 0c0.8 0 1.4-0.7 1.5-1.4-0.1-0.8-0.7-1.4-1.5-1.4-0.7 0-1.4 0.6-1.4 1.4 0 0.7 0.7 1.4 1.4 1.4zm5.3-0.2h2.4v-5.9c0-1.3 0.8-2.1 1.8-2.1 0.9 0 1.6 0.7 1.6 1.7v6.3h2.3v-6.1c0-1.1 0.6-1.9 1.8-1.9 0.9 0 1.6 0.6 1.6 1.8v6.2h2.4v-6.6c0-2.2-1.3-3.3-3.1-3.3-1.4 0-2.5 0.7-3 1.8h-0.1c-0.3-1.1-1.3-1.8-2.6-1.8-1.3 0-2.3 0.7-2.7 1.8h-0.1v-1.7h-2.3zm-0.4 0h2.3v-6c0-1.2 0.8-2 1.8-2 1 0 1.6 0.7 1.6 1.7v6.3h2.3v-6.1c0-1.1 0.7-1.9 1.8-1.9 0.9 0 1.7 0.6 1.7 1.8v6.2h2.3v-6.6c0-2.2-1.3-3.3-3.1-3.3-1.4 0-2.5 0.7-2.9 1.8h-0.1c-0.4-1.2-1.4-1.8-2.7-1.8-1.3 0-2.3 0.6-2.7 1.8h-0.1v-1.7h-2.2zm22 0.2c2.3 0 3.8-1.1 4.2-2.8l-2.1-0.3c-0.3 0.8-1.1 1.3-2.1 1.3-1.5 0-2.5-1-2.5-2.7h6.8v-0.7c0-3.4-2-5-4.4-5-2.9 0-4.7 2.1-4.7 5.1 0 3.1 1.8 5.1 4.8 5.1zm-2.5-6c0.1-1.3 1-2.4 2.4-2.4 1.3 0 2.2 1 2.2 2.4zm2 6c2.3 0 3.9-1.1 4.3-2.8l-2.2-0.3c-0.3 0.8-1.1 1.3-2 1.3-1.5 0-2.5-1-2.6-2.7h6.9v-0.7c0-3.4-2.1-5-4.5-5-2.8 0-4.6 2.1-4.6 5.1 0 3.1 1.8 5.1 4.7 5.1zm-2.4-6c0-1.3 0.9-2.4 2.3-2.4 1.4 0 2.3 1 2.3 2.4z"/><path fill-rule="evenodd" class="h" d="m36 111c0 0 7.1-1.8 10-9v19c0 0-0.1-6.2-10-10zm20 0c0 0-7.1-1.8-10-9v19c0 0 0.1-6.2 10-10z"/><path fill-rule="evenodd" class="i" d="m80 41.6c0 0 6.1-1.6 8.5-7.6v16c0 0-0.1-5.2-8.5-8.4zm17 0c0 0-6.1-1.6-8.5-7.6v16c0 0 0.1-5.2 8.5-8.4z"/><path fill-rule="evenodd" class="j" d="m277 143.6c0 0 6.1-1.6 8.5-7.6v16c0 0-0.1-5.2-8.5-8.4zm17 0c0 0-6.1-1.6-8.5-7.6v16c0 0 0.1-5.2 8.5-8.4z"/><path fill-rule="evenodd" class="j" d="m49 200.6c0 0 6.1-1.6 8.5-7.6v16c0 0-0.1-5.2-8.5-8.4zm17 0c0 0-6.1-1.6-8.5-7.6v16c0 0 0.1-5.2 8.5-8.4z"/><path fill-rule="evenodd" class="h" d="m252 228c0 0 7.1-1.8 10-9v19c0 0-0.1-6.2-10-10zm20 0c0 0-7.1-1.8-10-9v19c0 0 0.1-6.2 10-10z"/><path fill-rule="evenodd" class="h" d="m90 26.7c0 0 3.9-0.9 5.5-4.7v10c0 0-0.1-3.2-5.5-5.3zm11 0c0 0-3.9-0.9-5.5-4.7v10c0 0 0.1-3.2 5.5-5.3z"/><path fill-rule="evenodd" class="h" d="m251 125.7c0 0 3.9-0.9 5.5-4.7v10c0 0-0.1-3.2-5.5-5.3zm11 0c0 0-3.9-0.9-5.5-4.7v10c0 0 0.1-3.2 5.5-5.3z"/><path fill-rule="evenodd" class="h" d="m21 208.7c0 0 3.9-0.9 5.5-4.7v10c0 0-0.1-3.2-5.5-5.3zm11 0c0 0-3.9-0.9-5.5-4.7v10c0 0 0.1-3.2 5.5-5.3z"/><path fill-rule="evenodd" class="k" d="m244 62.7c0 0 3.9-0.9 5.5-4.7v10c0 0-0.1-3.2-5.5-5.3zm11 0c0 0-3.9-0.9-5.5-4.7v10c0 0 0.1-3.2 5.5-5.3z"/></svg>
\ No newline at end of file
diff --git a/src/swapee/img/swapee-grid-2-3.png b/src/swapee/img/swapee-grid-2-3.png
new file mode 100644
index 00000000..bef5b073
--- /dev/null
+++ b/src/swapee/img/swapee-grid-2-3.png
diff --git a/src/swapee/img/swapee-grid-3-3.png b/src/swapee/img/swapee-grid-3-3.png
new file mode 100644
index 00000000..42628145
--- /dev/null
+++ b/src/swapee/img/swapee-grid-3-3.png
diff --git a/src/swapee/img/swapee-sec-2-img.png b/src/swapee/img/swapee-sec-2-img.png
new file mode 100644
index 00000000..4678dff5
--- /dev/null
+++ b/src/swapee/img/swapee-sec-2-img.png
diff --git a/src/swapee/img/swapee-sec-calculator.png b/src/swapee/img/swapee-sec-calculator.png
new file mode 100644
index 00000000..9fba69a2
--- /dev/null
+++ b/src/swapee/img/swapee-sec-calculator.png
diff --git a/src/swapee/img/telegram.svg b/src/swapee/img/telegram.svg
new file mode 100644
index 00000000..854f48e1
--- /dev/null
+++ b/src/swapee/img/telegram.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19" width="22" height="19"><defs><image  width="22" height="19" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAAXNSR0IB2cksfwAAASlQTFRF+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6+fn6oTgkAgAAAGN0Uk5TACx9RBFctPj/vgE3keShHWzB/MdvBkaj7tlZk/3+Pil70BuX7BMOrfbMQQ2wOY7d84AEFoi4MirYYUei42U95fswD0zapiJQ7+ILCWL5s4NTeNf09yOKuzzVpcIQGKg7bjh6gGJllQAAAONJREFUeJxjYMAEjEzMGGIsrGzsHJyoYlzcPLwcQMCHLMgvICjEwSHMzsEhAhcTFROXAKqTlJKW4ZCVgwrKKyiCNHNIKykDSRVVkJialLoGWFBTS1sHRAtyMTDo6umDxTgMDI2MhcEsHgYGEw4oMDVjMLeAMC0ZGKysbUAsXlsGBjt7iKiDI8hoJ2dpF1c3BgZ3D6g+Ty+oQ7yB2McXZpwfkl/EOODAH0lYACEcgCQcyMERFAwWDQlFEg7jCFeNiAQJR4oiCUdFxzAwxMYBhV2Rgy/eCUyJGHAkYMQBECQmgcIJAKQ7GNOfn29qAAAAAElFTkSuQmCC"/></defs><style></style><use  href="#img1" x="0" y="0"/></svg>
\ No newline at end of file
diff --git a/src/swapee/img/twitter.svg b/src/swapee/img/twitter.svg
new file mode 100644
index 00000000..82748dcc
--- /dev/null
+++ b/src/swapee/img/twitter.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="24" height="20"><defs><image  width="24" height="20" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAMAAACgaw2xAAAAAXNSR0IB2cksfwAAASlQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////znvV+gAAAGN0Uk5TAEWVs6BcBB8WXiwDkv+4WZe8DgXa1yV49Fcx695IFergUAj+mCZE75TxoVQYS5ACG9bwzciEEZGd+XDb/WvtBqWsCd1NIMHD+j2HfByG95wBE2LPM4uv6FsPaMvVeWanrnQ8tmEq0QAAAONJREFUeJxjYEABjEzMLKxsDAzsHAwMnFxwYW4eXhDg4xcQFGIQFhEVg0mI80KBhKQUg5A0r4wsRFxOHiahIKrIoCTCy6usogqSUIOJ86qzArkaIJamlraOsC5cQg8orm9gCOEYGZsowyRMgRJm5haWvOjACighbM1rgyEBdo0thjCvHQdIwt4BQ8IR4nwncWc0CReIhKubPKq4Oxs0JPRQxT084WHnJYEs4Y0U2j6+fnBx/wCEeGBQMNwvetxQwRDx0LBwuHLnCLjqyKhomKhNTCwHSnxyxZnHMyeoJCYpIQkCAN4HIN5gUb+sAAAAAElFTkSuQmCC"/></defs><style></style><use  href="#img1" x="0" y="0"/></svg>
\ No newline at end of file
diff --git a/src/swapee/index.html b/src/swapee/index.html
new file mode 100644
index 00000000..4f4437be
--- /dev/null
+++ b/src/swapee/index.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Swapee</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+</head>
+<body>
+
+    <!-- aleart -->
+    <div class="top_alert position-relative alert bg_purple mb-0 alert-dismissible fade show border_radius_0" role="alert">
+        <p class="text-center mb-0 text-white fw-semibold">It's important not to forget your <span class="txt_yellow">username</span> and <span class="txt_yellow">password</span> since we don't have access to those details.</p>
+        <button type="button" class="bg-transparent border-0 shadow-none" data-bs-dismiss="alert" aria-label="Close"><img src="img/cross-icon.png" alt=""></button>
+    </div>
+
+    <!-- nav -->
+    <nav class="navbar navbar-expand-lg bg-transparent py-3">
+        <div class="container-xxl px-lg-5 px-sm-4 px-3">
+          <a class="navbar-brand site_logo" href="#"><img src="img/logo.png" alt=""></a>
+          <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="offcanvas offcanvas-start flex-lg-row flex-column" id="offcanvas">
+            <div class="py-4 pb-5 px-3 d-lg-none d-flex justify-content-end w-100">
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="navbar-nav text-lg-start text-center mx-auto mb-2 mb-lg-0">
+              <li class="nav-item me-lg-5 mb-lg-0 mb-4">
+                <a class="nav-link active" href="#">How it works</a>
+              </li>
+              <li class="nav-item me-lg-5 mb-lg-0 mb-4">
+                <a class="nav-link" href="#">F.A.Q.</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">About</a>
+              </li>
+            </ul>
+            <div class="d-flex justify-content-lg-end justify-content-center nav_btn pt-lg-0 pt-5" role="search">
+                <a href="#" class="btn_black"><span>get started</span></a>
+                <a href="#" class="btn_white"><span>sign in</span></a>
+            </div>
+          </div>
+        </div>
+    </nav>
+
+    <!-- hero -->
+    <div class="site_hero pt-md-5 pt-4">
+        <div class="container-lg px-sm-4 px-3 pt-md-5 text-center">
+            <h1 class="text-center text-black f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1">The easiest way to get <br>
+                started with bitcoin.</h1>
+            <p class="text-center txt_slate_blue mb-4">A simple but powerful web wallet for everyone. *No software or hardware required.*</p>
+            <a href="#" class="btn_purple"><span class="px-5">Start in Seconds</span></a>
+        </div>
+        <div class="container-xxl px-lg-5 px-sm-4 px-3">
+          <div class="w-100">
+            <img class="w-100" src="img/hero_bg.png" alt="">
+          </div>
+        </div>
+    </div>
+
+    <!-- first grid -->
+    <section class="py-4">
+      <div class="container-lg px-sm-4 px-3">
+        <div class="row justify-content-center">
+          <div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
+            <div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+              <img src="img/swapee-grid-1-3.png" alt="">
+              <h5 class="f_bebas_neue fw-bold letter_space_1">Create your account</h5>
+              <p class="txt_slate_blue lh-base">A username and password is all you need to 
+                get started. <a href="#" class="swapee_grid_link">Don’t forget it!</a></p>
+            </div>
+          </div>
+          <div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
+            <div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+              <img src="img/swapee-grid-2-3.png" alt="">
+              <h5 class="f_bebas_neue fw-bold letter_space_1">Ask for payments</h5>
+              <p class="txt_slate_blue lh-base">It’s the same as you normally would traditionally, 
+                but with bitcoin.</p>
+            </div>
+          </div>
+          <div class="col-lg-4 col-md-6">
+            <div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
+              <img src="img/swapee-grid-3-3.png" alt="">
+              <h5 class="f_bebas_neue fw-bold letter_space_1">That's all!</h5>
+              <p class="txt_slate_blue lh-base">Spend your coins immediately or save it and 
+                watch it grow, the choice is yours.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- lightning network -->
+    <section class="pt-md-5">
+      <div class="container-lg px-sm-4 px-3">
+        <div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
+          <div class="col-md-7 mb-md-0 mb-4">
+            <div>
+              <h6 class="f_bebas_neue txt_purple">Say Goodbye to Waiting</h6>
+              <h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">Lightning Network <br>
+                Brings Instant Payments</h2>
+              <p class="txt_slate_blue">Say goodbye to the headaches of waiting for bank settlements and dealing with chargebacks with our payment solution. With instant settlement and no 3% credit card processing fees, 
+                merchants can enjoy hassle-free retail payments.</p>
+              
+              <div class="mt-4 sec_btn">
+                <a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
+                <a href="#" class="btn_black f_bebas_neue"><span>Get Started</span></a>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-5 mb-md-0 mb-5 scale_img_right">
+            <div>
+              <img src="img/swapee-sec-calculator.png" class="w-100" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="pt-5 bg_light">
+      <div class="container-lg px-sm-4 px-3">
+        <div class="row align-items-center justify-content-center">
+          
+          <div class="col-md-5 scale_img_left">
+            <div>
+              <img src="img/swapee-sec-2-img.png" class="w-100" alt="">
+            </div>
+          </div>
+
+          <div class="col-md-7 mb-md-0 mb-4">
+            <div>
+              <h6 class="f_bebas_neue txt_purple">Quick and painless</h6>
+              <h2 class="h1 f_bebas_neue fw-bold text-black br_md_none mb-3 letter_space_2 lh-1">Simple to use</h2>
+              <p class="txt_slate_blue mb-4">Just enter an amount in your local currency, share the QR code 
+                and you’re done. We do all the heavy lifting so you can focus on 
+                your business. You always have the option of taking custody of 
+                your funds by withdrawing instantly at any time.</p>
+              
+              <div class="mt-4 sec_btn">
+                <a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
+                <a href="#" class="btn_purple f_bebas_neue"><span>Get Started</span></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="sec_3 position-relative">
+      <div class="col-md-5 d-xxl-none d-md-block d-none position-absolute img_position">
+        <div>
+          <img src="img/swapee-sec-3-img.png" class="w-100" alt="">
+        </div>
+      </div>
+
+      <div class="container-lg px-sm-4 px-3">
+
+        <div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
+          <div class="col-md-6 mb-md-0 mb-4">
+            <div>
+              <h6 class="f_bebas_neue txt_purple">Customized & Personalized</h6>
+              <h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">Brand it your way!</h2>
+              <p class="txt_slate_blue">You have complete control over your profile page's aesthetic. 
+                Customize it with your preferred color scheme, avatar, and banner 
+                to reflect your brand, personality and interests.</p>
+              
+              <div class="mt-4 sec_btn">
+                <a href="#" class="btn_white f_bebas_neue mb-3"><span>Learn More</span></a>
+                <a href="#" class="btn_black f_bebas_neue mb-3"><span>Get Started</span></a>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-6 mb-md-0 mb-4 sec_3_img">
+            <div class="d-xxl-block d-md-none d-block">
+              <img src="img/swapee-sec-3-img.png" class="w-100" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-5 bg_light">
+      <div class="container-lg px-sm-4 px-3">
+        <div class="row align-items-center justify-content-center">
+          <div class="col-12 text-center">
+            <h6 class="f_bebas_neue txt_purple">This might help</h6>
+            <h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-5 lh-1">Frequently asked <br> questions</h2>
+          </div>
+
+            <div class="accordion" id="accordionExample">
+              <div class="accordion-item swapee_accordion">
+                <h2 class="" id="headingOne">
+                  <button class="accordion-button shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    <span class="line">
+                      What does it cost?
+                    </span>
+                  </button>
+                </h2>
+                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    <p class="txt_slate_blue">It's free to register an account and receive payments. We charge a 0.1% conversion fee if 
+                      you withdraw regular bitcoin to lightning or vice versa.</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item swapee_accordion">
+                <h2 class="accordion-header" id="headingTwo">
+                  <button class="accordion-button shadow-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    <span class="line">
+                      Do I need any special device or software?
+                    </span>
+                  </button>
+                </h2>
+                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    <p class="txt_slate_blue">It's free to register an account and receive payments. We charge a 0.1% conversion fee if 
+                      you withdraw regular bitcoin to lightning or vice versa.</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item swapee_accordion">
+                <h2 class="accordion-header" id="headingThree">
+                  <button class="accordion-button shadow-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                    <span class="line">
+                      When do my funds settle?
+                    </span>
+                  </button>
+                </h2>
+                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    <p class="txt_slate_blue">It's free to register an account and receive payments. We charge a 0.1% conversion fee if 
+                      you withdraw regular bitcoin to lightning or vice versa.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- bitcoin_location -->
+    <div class="bitcoin_location">
+      <div class="container-lg px-sm-4 px-3">
+        <h2 class="h3 text-center text-black f_bebas_neue fw-bold letter_space_2">Real-World Bitcoin Locations</h2>
+        <p class="text-center opacity-75 mb-md-5 mb-4">Join the <span class="fs_18 fw-bold">Growing businesses</span> that accept <span class="fs_18 fw-bold">Bitcoin</span> with <span class="fs_18 fw-bold">Swapee!</span></p>
+        <div class="d-flex justify-content-center align-items-start flex-wrap">
+          <a href="#" class="btn_line me-sm-3 me-2 mb-4">Business Listings</a>
+          <a href="#" class="btn_black"><span class="px-sm-5">Get Listed</span></a>
+        </div>
+      </div>
+    </div>
+
+    <!-- footer -->
+    <footer class="site_footer">
+      <div class="container-lg px-4">
+        <!-- footer_top -->
+        <div class="footer_top pb-4">
+          <div class="row align-items-center justify-content-between">
+            <div class="col-md-5 mb-md-0 mb-5">
+              <a href="#" class="footer_logo"><img src="img/footer-logo.png" alt=""></a>
+              <p class="text-white-50 mt-5 mb-4">Copyright © 2023. Swapee.me is a Registered Cryptoasset firm and is registered with the UK Financial Conduct Authority.
+                <br>
+                <br>
+                All rights reserved.</p>
+              <a class="btn_language" href="#">English</a>
+            </div>
+            <div class="ps-md-4 footer_top_right col-md-6 d-flex align-items-center justify-content-end justify-content-sm-center justify-content-between">
+              <div class="row justify-content-md-end">
+                <div class="col-xl-6 col-md-10 col-sm-6 mb-xl-0 mb-4 pe-xl-5 pe-md-0 pe-sm-5">
+                  <h6 class="text-white opacity-75 mb-0">Business enquiries</h6>
+                  <a href="mailto:[email protected]">[email protected]</a>
+                </div>
+                <div class="col-xl-6 col-md-10 col-sm-6 pe-xl-5 pe-md-0 pe-sm-5">
+                  <h6 class="text-white opacity-75 mb-0">Job enquiries</h6>
+                  <a href="mailto:[email protected]">[email protected]</a>
+                </div>
+              </div>
+                <div class="social_links d-flex">
+                  <a href="#" class="me-3"><img src="img/twitter.svg" alt=""></a>
+                  <a href="#"><img src="img/telegram.svg" alt=""></a>
+                </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- footer_bottom -->
+        <div class="footer_bottom pt-4 pb-2">
+          <ul class="list-unstyled mb-0 ps-0">
+            <li class="pb-3">
+              <a href="#">Documentation</a>
+            </li>
+            <li class="pb-3">
+              <a href="#">Privacy Policy</a>
+            </li>
+            <li class="pb-3">
+              <a href="#">Terms of Use</a>
+            </li>
+            <li class="pb-3">
+              <a href="#">Contributor License Agreement</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+
+
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+</body>
+</html>