updated: bootstrap removed (all tailwind and little css now); url image

5 files changed, 290 insertions, 483 deletions

diff --git a/src/app.css b/src/app.css
index bcd5421c..593b9470 100644
--- a/src/app.css
+++ b/src/app.css
@@ -95,6 +95,10 @@ html {
   font-family: 'Inter', sans-serif;
 }
 
+.f_bebas_neue{
+  font-family: 'Bebas Neue', sans-serif;
+}
+
 :root {
   --purple: #7105f3;
   --slate_blue: #7f8a9d;
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 12977900..260afd4f 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -16,46 +16,42 @@
 </script>
 <footer class="pt-16 bg-black">
 	<div class="max-w-[1296px] mx-auto px-8">
-		<!-- footer_top -->
-		<div class="footer_top pb-4">
+		<div class="footer_top border-b-[1] border-gray-800 pb-4">
 			<div class="flex-col md:flex-row flex md:items-center justify-between">
 				<div class="flex-1 mb-12 sm:mb-5">
-					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
+					<a href="#" ><img src="images/footer-logo.png" alt="swapee logo" class="max-w-36" /></a>
 					<p class="text-gray-200 mt-10">Copyright © 2023. Swapee.me</p>
 					<p class="text-gray-200 mt-3">All rights reserved.</p>
 					<a href="#" class="btn_language inline-block mt-6 font-bold !text-white hover:!text-black">English</a>
 				</div>
-				<div
-					class="flex-1 footer_top_right flex items-center justify-start md:justify-center "
-				>
+				<div class="flex-1 flex items-center justify-start md:justify-center">
 					<div class="flex max-sm:flex-col md:justify-end gap-x-6">
 						<div class="flex-1 xl:mb-0 mb-4 md:pr-0 sm:pr-5">
 							<h6 class="!text-white/80 mb-0">Business enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
+							<a href="mailto:[email protected]" class="text-swapee-purple hover:underline">[email protected]</a>
 						</div>
 						<div class="flex-1 xs:pr-5 mb-4 md:pr-0 sm:pr-5">
 							<h6 class="!text-white/80 mb-0">Support enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
+							<a href="mailto:[email protected]" class="text-swapee-purple hover:underline">[email protected]</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="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Documentation</a>
+			<div class="footer_bottom flex justify-end pt-4 pb-2">
+				<ul class="flex flex-wrap justify-center mb-0 ps-0">
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Documentation</a>
 					</li>
-					<li class="pb-3">
-						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Privacy Policy</a>
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Privacy Policy</a>
 					</li>
-          <li class="pb-3">
-						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Support</a>
+          			<li class="pb-3 ml-[0.9375rem]">
+						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Support</a>
+					</li>
+					<li class="pb-3 ml-[0.9375rem]">
+						<a href="/sitemap" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold py-[6px] px-[10px]">Sitemap</a>
 					</li>
-					<li class="pb-3">
-								  <a href="/sitemap" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Sitemap</a>
-							  </li>
 				</ul>
 			</div>
 		</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e14911c9..3354e8c5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
   import { PUBLIC_DOMAIN } from "$env/static/public";
   import "../app.css";
   import "../swapee/css/animation.css";
+ 
   import { loading, t } from "$lib/translations";
 
   export let data;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 61f09290..876c9308 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { slide } from 'svelte/transition';
 	import { gsap } from "gsap";
     import { enhance } from "$app/forms";
 	import * as Accordion from "$lib/shadcn/components/ui/accordion";
@@ -27,8 +28,9 @@
 	let toggleThemeForm;
 	let homeNav;
 	let homeNavActiveLeft = 32;
-	let homeNavActiveTranslate = 0;
+	let homeNavActiveTranslate = 102.46875;
 	let NavHowItWorksEl;
+	let showAlert = true;
 
 	function toggleThemeSelected() {
 		themeSelected = themeSelected === "light" ? "dark" : "light"; 
@@ -61,26 +63,33 @@
 </script>
 
 <!-- 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
+
+{#if showAlert}
+	<div
+		class="relative bg-swapee-purple mb-0 flex gap-x-2 p-4 border-b-2 border-black"
+		role="alert"
+		transition:slide={{duration: 125}}
 	>
-</div>
+		<p class="text-center mb-0 text-white fw-semibold w-full font-semibold">
+		It's important not to forget your <span class="text-yellow">username</span> and
+		<span class="text-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"
+			on:click={() => showAlert = false}
+		>
+			<img src="images/cross-icon.png" alt="" />
+		</button>
+	</div>
+{/if}
 
 <!-- nav -->
-<nav class="navbar navbar-expand-lg dark:bg-black py-3 ">
-	<div class="container-xxl px-lg-5 px-sm-4 px-3">	
-		<a class="navbar-brand site_logo max-lg:ml-1" href="/">
+<nav class="relative flex flex-wrap items-center content-between py-3 px-4 dark:bg-black ">
+	<div class="container mx-auto px-lg-5 sm:px-6 px-0 flex justify-between">	
+		<a class="inline-block pt-1 pb-1 mr-4 text-lg whitespace-no-wrap site_logo max-lg:ml-1 max-w-36" href="/">
 			{#if data.colorThemeSelected == "light"}
 				<img src="images/logo.png" alt="" />
 			{:else}
@@ -123,7 +132,7 @@
 				</form>
 			</Sheet.Content>
 		</Sheet.Root>
-		<div class="hidden lg:flex justify-between items-center !border-r-2 !border-r-white">
+		<div class="opacity-0 flex absolute max-lg:left-0 max-lg:-translate-x-full lg:static lg:opacity-100 justify-between items-center">
 			<ul class="flex gap-x-8 relative text-center mx-auto mb-2 dark:text-white uppercase font-semibold" bind:this={homeNav}>
 				<li class="">
 					<a class="text-black dark:!text-white no-underline" href="/" bind:this={NavHowItWorksEl} on:click={(e) => {defineHomeNavActive(e.target)}}>How it works</a>
@@ -161,20 +170,20 @@
 </nav>
 
 <!-- hero -->
-<div class="site_hero pt-md-5 pt-4 dark:bg-black">
-	<div class="container-lg px-sm-4 px-3 pt-md-5 mb-16  text-center">
+<div class="site_hero md:pt-12 pt-4 dark:bg-black">
+	<div class="container sm:px-6 px-3 md:pt-12 mb-16 text-center">
 		<h1
-			class="text-center dark:text-white f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
+			class="text-center dark:text-white f_bebas_neue text-uppercase font-bold text-5xl sm:text-6xl md:text-7xl text-stone-950 lh-1"
 		>
 			The easiest way to get <br />
 			started with bitcoin.
 		</h1>
-		<p class="text-center txt_slate_blue dark:!text-gray-200 mb-4">
+		<p class="text-center text-stone-600 font-medium dark:!text-gray-200 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="container px-lg-5 sm:px-6 px-3">
 		<div class="w-100">
 			<img src="images/hero_bg.png" alt="" class="w-full slide-top" />
 		</div>
@@ -182,36 +191,36 @@
 </div>
 
 <!-- first grid -->
-<section class="py-4 dark:bg-black">
-	<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" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Create your account</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+<section class="py-8 px-1 dark:bg-black">
+	<div class="container sm:px-6 px-3">
+		<div class="flex flex-wrap justify-center ">
+			<div class="lg:w-1/3 md:w-1/2 lg:mb-0 mb-4">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-1-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">Create your account</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						A username and password is all you need to get started. <a
 							href="/"
-							class="swapee_grid_link dark:!text-gray-200">Don’t forget it!</a
+							class="underline font-medium dark:!text-gray-200">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" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Ask for payments</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+			<div class="lg:w-1/3 md:w-1/2 lg:mb-0 mb-4">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-2-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">Ask for payments</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						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" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">That's all!</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
+			<div class="lg:w-1/3 md:w-1/2">
+				<div class="h-full text-center md:w-4/5 mx-auto">
+					<img src="images/swapee-grid-3-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out max-h-[230px]" height="230" alt="" />
+					<h5 class="f_bebas_neue font-bold dark:text-white">That's all!</h5>
+					<p class="text-stone-600 dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						Spend your coins immediately or save it and watch it grow, the choice is yours.
 					</p>
 				</div>
@@ -221,17 +230,17 @@
 </section>
 
 <!-- lightning network -->
-<section class="pt-md-5 dark:bg-black" bind:this={about}>
-	<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">
+<section class="py-8 px-1 dark:bg-black" bind:this={about}>
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col-reverse sm:flex-row">
+			<div class="md:w-3/5 md:mb-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 dark:text-white br_md_none mb-3 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Say Goodbye to Waiting</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3 ">
 						Lightning Network <br />
 						Brings Instant Payments
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200">
+					<p class="text-stone-600 dark:!text-gray-200">
 						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.
@@ -244,7 +253,7 @@
 				</div>
 			</div>
 
-			<div class="col-md-5 mb-md-0 mb-5 scale_img_rig">
+			<div class="md:w-2/5 md:mb-0 mb-5 s xs:max-w-[80%] mx-auto">
 				<div>
 					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-calculator.png" : "images/swapee-sec-calculator-dark.png"} class="hover:scale-[1.015] transition-all duration-500 ease-in-out" alt="" />
 				</div>
@@ -253,22 +262,22 @@
 	</div>
 </section>
 
-<section class="pt-5 bg_light dark:!bg-[#0D0D0D]">
-	<div class="container-lg px-sm-4 px-3">
-		<div class="row align-items-center justify-content-center">
-			<div class="col-md-5">
-				<div>
+<section class="py-8 px-1 bg-stone-100 dark:!bg-[#0D0D0D]">
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col sm:flex-row">
+			<div class="md:w-2/5">
+				<div class="scale-100 sm:scale-[1.2] xs:max-w-[80%] mx-auto">
 					<img src="images/swapee-sec-2-img.png" class="slide-top" alt="" />
 				</div>
 			</div>
 
-			<div class="col-md-7 mb-md-0 mb-4">
+			<div class="md:w-3/5 md:mb-0 mb-4">
 				<div>
-					<h6 class="f_bebas_neue txt_purple">Quick and painless</h6>
-					<h2 class="h1 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 letter_space_2 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Quick and painless</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3">
 						Simple to uses
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200 mb-4">
+					<p class="text-stone-600 dark:!text-gray-200 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.
@@ -284,22 +293,16 @@
 	</div>
 </section>
 
-<section class="sec_3 position-relative dark:bg-black">
-	<div class="col-md-5 d-xxl-none d-md-block d-none position-absolute img_position">
-		<div>
-			<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
-		</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">
+<section class="py-[12vw] px-1 relative dark:bg-black">
+	<div class="container sm:px-6 px-3">
+		<div class="flex items-center justify-center flex-col-reverse sm:flex-row">
+			<div class="flex-1 md:mb-0">
 				<div>
-					<h6 class="f_bebas_neue txt_purple">Customized & Personalized</h6>
-					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
+					<h6 class="f_bebas_neue text-swapee-purple">Customized & Personalized</h6>
+					<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-3">
 						Brand it your way!
 					</h2>
-					<p class="txt_slate_blue dark:!text-gray-200">
+					<p class="text-stone-600 dark:!text-gray-200">
 						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.
@@ -312,8 +315,8 @@
 				</div>
 			</div>
 
-			<div class="col-md-6 mb-md-0 mb-4 overflow-hidden">
-				<div class="d-xxl-block d-md-none d-block">
+			<div class="flex-1 md:mb-0 mb-4 overflow-hidden relative">
+				<div class="">
 					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
 				</div>
 			</div>
@@ -321,12 +324,12 @@
 	</div>
 </section>
 
-<section class="py-5 bg_light dark:!bg-[#0D0D0D]">
-	<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 dark:text-white br_md_none mb-5 lh-1">
+<section class="py-8 px-1 pb-10 bg-stone-100 dark:!bg-[#0D0D0D]">
+	<div class="container sm:px-6 px-3" bind:this={faq}>
+		<div class="flex flex-wrap items-center justify-center">
+			<div class="w-full text-center">
+				<h6 class="f_bebas_neue text-swapee-purple">This might help</h6>
+				<h2 class="text-[2.5rem] leading-10 f_bebas_neue font-bold dark:text-white mb-10">
 					Frequently asked <br /> questions
 				</h2>
 			</div>
@@ -349,18 +352,18 @@
 </section>
 
 <!-- bitcoin_location -->
-<div class="bitcoin_location dark:bg-black bg-map-light dark:!bg-map-dark bg-no-repeat">
-	<div class="container-lg px-sm-4 px-3">
-		<h2 class="h3 text-center dark:text-white f_bebas_neue fw-bold letter_space_2">
+<div class="flex px-1 justify-center items-center py-[5.625rem] dark:bg-black bg-map-light dark:!bg-map-dark bg-no-repeat">
+	<div class="container sm:px-6 px-3">
+		<h2 class="text-[2.5rem] text-center dark:text-white f_bebas_neue font-bold mb-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 class="text-center opacity-75 md:mb-5 mb-4">
+			Join the <span class="text-lg font-bold">Growing businesses</span> that accept
+			<span class="text-lg font-bold">Bitcoin</span>
+			with <span class="text-lg font-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 dark:!text-white">Business Listings</a>
+		<div class="flex justify-center items-center flex-wrap">
+			<a href="/" class="btn_line sm:me-4 me-2 mb-4 dark:!text-white">Business Listings</a>
 			<a href="/" class="btn_black"><span class="px-sm-5 dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">Get Listed</span></a>
 		</div>
 	</div>
@@ -369,5 +372,177 @@
 <Footer />	
 
 <style>
- 
+	.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 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: black;
+		border: 1px solid 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: 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: black;
+		width: 100%;
+		height: 100%;
+		display: block;
+		padding: 8px 25px;
+		background: 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: black;
+		color: white;
+	}
+
+	.btn_purple span{
+		background: rgb(113 5 243);
+		color: white;
+	}
+
+	.nav_btn a:not(:last-child){
+		margin-right: 15px;
+	}
+
+	.swapee_3_grids img {
+		height: 230px;
+		height: 65%;
+		max-height: 230px;
+	}
+
+	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;
+	}
+
+	a.btn_line:hover::after {
+		width: 100px;
+	}
+
+	a.btn_line::after{
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		width: 50px;
+		height: 2px;
+		background: #7005f3;
+		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{
+		font-size: 14px;
+		font-weight: 600;
+		text-transform: uppercase;
+		font-family: 'Work Sans', sans-serif;
+		position: relative;
+	}
+
+	#offcanvas ul li a::after{
+		content: '';
+		position: absolute;
+		bottom: -2px;
+		left: 50%;
+		width: 0;
+		height: 2px;
+		background: #7105f3;
+		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:hover::after{
+		width: 50px;
+	}
 </style>
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
index 06633f62..6761a858 100644
--- a/src/swapee/css/style.css
+++ b/src/swapee/css/style.css
@@ -1,4 +1,4 @@
-@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;
@@ -88,139 +88,8 @@ body{
     max-width: 140px;
 }
 
-#offcanvas ul li a{
-    font-size: 14px;
-    font-weight: 600;
-    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: #7105f3;
-    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: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 */
@@ -295,7 +164,7 @@ body{
     -o-transform: scale(1.2);
 }
 
-.img_position{
+/* .img_position{
     position: absolute;
     top: 50%;
     right: 0;
@@ -304,244 +173,6 @@ body{
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
-}
-
-.sec_3{
-    padding-top: 12vw;
-    padding-bottom: 12vw;
-}
-
-/* accordion NOT MORE BEING USED (AFTER ALTERATIONS, NOW THE ACCORDION IS BUILT WITH TAILWIND + SHADCN) */
-.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