aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorMurillo Pinheiro de Oliveira <[email protected]>2024-02-06 23:41:43 -0300
committerMurillo Pinheiro de Oliveira <[email protected]>2024-02-06 23:41:43 -0300
commita02ea8e85d789d5acca9922b61222233bbc09ec6 (patch)
treee89f53936e861bf50e8a7503c75723778570b538 /src
parent7e33d06f2952f64815d8c7669f0f057cde20d280 (diff)
downloadcoinos-ui-a02ea8e85d789d5acca9922b61222233bbc09ec6.tar.gz
coinos-ui-a02ea8e85d789d5acca9922b61222233bbc09ec6.zip
layout fixes
Diffstat (limited to 'src')
-rw-r--r--src/app.css99
-rw-r--r--src/app.html2
-rw-r--r--src/components/AppHeader.svelte8
-rw-r--r--src/lib/shadcn/components/ui/accordion/accordion-content.svelte22
-rw-r--r--src/lib/shadcn/components/ui/accordion/accordion-item.svelte11
-rw-r--r--src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte22
-rw-r--r--src/lib/shadcn/components/ui/accordion/index.js16
-rw-r--r--src/lib/shadcn/components/ui/separator/index.js6
-rw-r--r--src/lib/shadcn/components/ui/separator/separator.svelte19
-rw-r--r--src/lib/shadcn/utils.js48
-rw-r--r--src/lib/utils.js2
-rw-r--r--src/routes/(app)/[username]/(profile)/+layout.svelte7
-rw-r--r--src/routes/(app)/[username]/(profile)/+page.svelte2
-rw-r--r--src/routes/+layout.svelte1
-rw-r--r--src/routes/+page.svelte126
-rw-r--r--src/swapee/css/animation.css32
-rw-r--r--src/swapee/css/style.css2
17 files changed, 332 insertions, 93 deletions
diff --git a/src/app.css b/src/app.css
index 3f0cbbd0..307df282 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,81 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 224 71.4% 4.1%;
+
+ --muted: 220 14.3% 95.9%;
+ --muted-foreground: 220 8.9% 46.1%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 224 71.4% 4.1%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 224 71.4% 4.1%;
+
+ --border: 220 13% 91%;
+ --input: 220 13% 91%;
+
+ --primary: 220.9 39.3% 11%;
+ --primary-foreground: 210 20% 98%;
+
+ --secondary: 220 14.3% 95.9%;
+ --secondary-foreground: 220.9 39.3% 11%;
+
+ --accent: 220 14.3% 95.9%;
+ --accent-foreground: 220.9 39.3% 11%;
+
+ --destructive: 0 72.2% 50.6%;
+ --destructive-foreground: 210 20% 98%;
+
+ --ring: 224 71.4% 4.1%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 224 71.4% 4.1%;
+ --foreground: 210 20% 98%;
+
+ --muted: 215 27.9% 16.9%;
+ --muted-foreground: 217.9 10.6% 64.9%;
+
+ --popover: 224 71.4% 4.1%;
+ --popover-foreground: 210 20% 98%;
+
+ --card: 224 71.4% 4.1%;
+ --card-foreground: 210 20% 98%;
+
+ --border: 215 27.9% 16.9%;
+ --input: 215 27.9% 16.9%;
+
+ --primary: 210 20% 98%;
+ --primary-foreground: 220.9 39.3% 11%;
+
+ --secondary: 215 27.9% 16.9%;
+ --secondary-foreground: 210 20% 98%;
+
+ --accent: 215 27.9% 16.9%;
+ --accent-foreground: 210 20% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 20% 98%;
+
+ --ring: 216 12.2% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
@font-face {
font-family: "PublicSans";
@@ -29,6 +104,30 @@ html {
background-color: white;
}
+/* SCROLL BAR */
+::-webkit-scrollbar {
+ width: 4px;
+ scrollbar-width: thin;
+ scrollbar-color: #f7f7f7;
+}
+
+@media (min-width: 720px) {
+ ::-webkit-scrollbar {
+ width: 10px;
+ }
+}
+
+
+::-webkit-scrollbar-thumb {
+ background-color: #000;
+}
+
+::-webkit-scrollbar-track {
+ background-color: #F9F9F9;
+}
+
+/* SCROLL BAR */
+
input,
textarea {
@apply block border rounded-2xl px-5 py-4 w-full;
diff --git a/src/app.html b/src/app.html
index 28f07d06..475a15fb 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+ <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 26982456..51607030 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -44,7 +44,7 @@
class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
style:background-image={bg}
>
- <nav class="flex justify-end items-center space-x-4 p-5">
+ <nav class="flex justify-end items-center gap-x-2 xs:gap-x-4 p-5">
{#if user}
<a href={`/${user.username}`}>
<button
@@ -127,9 +127,9 @@
{/each}
</ul>
<hr class="my-4" />
- <a href="/"
- ><img src="/images/logo.svg" alt="Swapee" class="w-32" /></a
- >
+ <a href="/">
+ <img src="/images/logo.svg" alt="Swapee" class="w-32" />
+ </a>
</div>
</OutClick>
</div>
diff --git a/src/lib/shadcn/components/ui/accordion/accordion-content.svelte b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte
new file mode 100644
index 00000000..14328e88
--- /dev/null
+++ b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,22 @@
+<script>
+ import { Accordion as AccordionPrimitive } from "bits-ui";
+ import { cn } from "$lib/shadcn/utils";
+ import { slide } from "svelte/transition";
+ let className = undefined;
+ export let transition = slide;
+ export let transitionConfig = {
+ duration: 200,
+ };
+ export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+ class={cn("overflow-hidden text-sm transition-all", className)}
+ {transition}
+ {transitionConfig}
+ {...$$restProps}
+>
+ <div class="pb-4 pt-0">
+ <slot />
+ </div>
+</AccordionPrimitive.Content>
diff --git a/src/lib/shadcn/components/ui/accordion/accordion-item.svelte b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte
new file mode 100644
index 00000000..b0887d7e
--- /dev/null
+++ b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,11 @@
+<script>
+ import { Accordion as AccordionPrimitive } from "bits-ui";
+ import { cn } from "$lib/shadcn/utils";
+ let className = undefined;
+ export let value;
+ export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+ <slot />
+</AccordionPrimitive.Item>
diff --git a/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 00000000..8acf4675
--- /dev/null
+++ b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,22 @@
+<script>
+ import { Accordion as AccordionPrimitive } from "bits-ui";
+ import { ChevronDown } from "lucide-svelte";
+ import { cn } from "$lib/shadcn/utils";
+ let className = undefined;
+ export let level = 3;
+ export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+ <AccordionPrimitive.Trigger
+ class={cn(
+ "flex flex-1 items-center justify-between py-2 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
+ className
+ )}
+ {...$$restProps}
+ on:click
+ >
+ <slot />
+ <ChevronDown class="h-4 w-4 transition-transform duration-200" />
+ </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/src/lib/shadcn/components/ui/accordion/index.js b/src/lib/shadcn/components/ui/accordion/index.js
new file mode 100644
index 00000000..d75ea273
--- /dev/null
+++ b/src/lib/shadcn/components/ui/accordion/index.js
@@ -0,0 +1,16 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+export {
+ Root,
+ Content,
+ Item,
+ Trigger,
+ //
+ Root as Accordion,
+ Content as AccordionContent,
+ Item as AccordionItem,
+ Trigger as AccordionTrigger,
+};
diff --git a/src/lib/shadcn/components/ui/separator/index.js b/src/lib/shadcn/components/ui/separator/index.js
new file mode 100644
index 00000000..073c5c4c
--- /dev/null
+++ b/src/lib/shadcn/components/ui/separator/index.js
@@ -0,0 +1,6 @@
+import Root from "./separator.svelte";
+export {
+ Root,
+ //
+ Root as Separator,
+};
diff --git a/src/lib/shadcn/components/ui/separator/separator.svelte b/src/lib/shadcn/components/ui/separator/separator.svelte
new file mode 100644
index 00000000..b07c93ea
--- /dev/null
+++ b/src/lib/shadcn/components/ui/separator/separator.svelte
@@ -0,0 +1,19 @@
+<script>
+ import { Separator as SeparatorPrimitive } from "bits-ui";
+ import { cn } from "$lib/shadcn/utils";
+ let className = undefined;
+ export let orientation = "horizontal";
+ export let decorative = undefined;
+ export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+ class={cn(
+ "shrink-0 bg-border",
+ orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+ className
+ )}
+ {orientation}
+ {decorative}
+ {...$$restProps}
+/>
diff --git a/src/lib/shadcn/utils.js b/src/lib/shadcn/utils.js
new file mode 100644
index 00000000..08747b8f
--- /dev/null
+++ b/src/lib/shadcn/utils.js
@@ -0,0 +1,48 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs));
+}
+
+export const flyAndScale = (
+ node,
+ params = { y: -8, x: 0, start: 0.95, duration: 150 }
+) => {
+ const style = getComputedStyle(node);
+ const transform = style.transform === "none" ? "" : style.transform;
+
+ const scaleConversion = (valueA, scaleA, scaleB) => {
+ const [minA, maxA] = scaleA;
+ const [minB, maxB] = scaleB;
+
+ const percentage = (valueA - minA) / (maxA - minA);
+ const valueB = percentage * (maxB - minB) + minB;
+
+ return valueB;
+ };
+
+ const styleToString = (style) => {
+ return Object.keys(style).reduce((str, key) => {
+ if (style[key] === undefined) return str;
+ return str + `${key}:${style[key]};`;
+ }, "");
+ };
+
+ return {
+ duration: params.duration ?? 200,
+ delay: 0,
+ css: (t) => {
+ const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+ const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+ const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+ return styleToString({
+ transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+ opacity: t
+ });
+ },
+ easing: cubicOut
+ };
+};
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 738413bf..434ca268 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -300,4 +300,4 @@ export let isLiquid = (text) =>
(text.startsWith("ert1q") && text.length === 43) ||
(text.startsWith("ex1q") && text.length === 42) ||
text.startsWith("el1qq") ||
- text.startsWith("lq1qq");
+ text.startsWith("lq1qq"); \ No newline at end of file
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index ff7ef7dd..37483caa 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -75,9 +75,8 @@
};
</script>
-<div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
- <div class="hidden lg:block lg:w-[300px]" />
- <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm">
+<div class="mx-auto w-full px-4 flex flex-col lg:flex-row">
+ <div class="lg:w-[300px] space-y-5 mx-auto max-w-sm lg:ml-24">
<div
class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
>
@@ -242,7 +241,7 @@
</div>
<div class="w-full">
- <div class="mx-auto space-y-5 lg:max-w-xl lg:pl-10 xl:max-w-2xl lg:pl-10">
+ <div class="mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10">
<slot />
</div>
</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 337e80d8..6a89818a 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -84,7 +84,7 @@
</div>
<div class="space-y-8 mt-8">
{#if !user.balance}
- <p class="text-secondary text-lg">
+ <p class="text-secondary text-lg max-w-2xl text-center lg:text-start mx-auto">
{$t("user.welcome")}
</p>
{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 055c5956..e14911c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
<script>
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 87a933ae..f5df9d4f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,17 @@
<script>
+ import * as Accordion from "$lib/shadcn/components/ui/accordion";
+ import { Separator } from "$lib/shadcn/components/ui/separator";
import { scroll } from '$lib/utils';
+
let about, faq;
+ let askedQuestionsAccordionValue = "item-0"
+
+ let askedQuestionsAccordion = [
+ {id: 0, title: "What does it cost?", description: "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."},
+ {id: 1, title: "Do I need any special device or software?", description: "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."},
+ {id: 2, title: "When do my funds settle?", description: "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."}
+ ]
+
</script>
<svelte:head>
@@ -78,7 +89,7 @@
<!-- hero -->
<div class="site_hero pt-md-5 pt-4">
- <div class="container-lg px-sm-4 px-3 pt-md-5 text-center">
+ <div class="container-lg px-sm-4 px-3 pt-md-5 mb-16 text-center">
<h1
class="text-center text-black f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
>
@@ -92,7 +103,7 @@
</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="" />
+ <img src="images/hero_bg.png" alt="" class="w-full slide-top" />
</div>
</div>
</div>
@@ -103,7 +114,7 @@
<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="" />
+ <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">Create your account</h5>
<p class="txt_slate_blue lh-base">
A username and password is all you need to get started. <a
@@ -115,7 +126,7 @@
</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="" />
+ <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">Ask for payments</h5>
<p class="txt_slate_blue lh-base">
It’s the same as you normally would traditionally, but with bitcoin.
@@ -124,7 +135,7 @@
</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="" />
+ <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">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.
@@ -152,16 +163,16 @@
processing fees, merchants can enjoy hassle-free retail payments.
</p>
- <div class="mt-4 sec_btn">
+ <div class="mt-4 sec_btn flex gap-x-3 gap-y-3 flex-wrap">
<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>
+ <a href="/register" 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 class="col-md-5 mb-md-0 mb-5 scale_img_rig">
<div>
- <img src="images/swapee-sec-calculator.png" class="w-100" alt="" />
+ <img src="images/swapee-sec-calculator.png" class="hover:scale-[1.015] transition-all duration-500 ease-in-out" alt="" />
</div>
</div>
</div>
@@ -171,9 +182,9 @@
<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 class="col-md-5">
<div>
- <img src="images/swapee-sec-2-img.png" class="w-100" alt="" />
+ <img src="images/swapee-sec-2-img.png" class="slide-top" alt="" />
</div>
</div>
@@ -189,7 +200,7 @@
taking custody of your funds by withdrawing instantly at any time.
</p>
- <div class="mt-4 sec_btn">
+ <div class="mt-4 sec_btn flex gap-x-3 gap-y-3 flex-wrap">
<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>
@@ -202,13 +213,13 @@
<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="" />
+ <img src="images/swapee-sec-3-img.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 mb-4">
+ <div class="col-md-6 mb-md-0">
<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">
@@ -220,16 +231,16 @@
interests.
</p>
- <div class="mt-4 sec_btn">
+ <div class="sec_btn mt-4 flex gap-x-3 flex-wrap">
<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>
+ <a href="/register" 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="col-md-6 mb-md-0 mb-4 overflow-hidden">
<div class="d-xxl-block d-md-none d-block">
- <img src="images/swapee-sec-3-img.png" class="w-100" alt="" />
+ <img src="images/swapee-sec-3-img.png" alt="" />
</div>
</div>
</div>
@@ -246,61 +257,19 @@
</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">
- Registering an account and receiving payments on Swapee.me is completely free. Our
- aim is to offer a smooth user experience without any financial barriers. However,
- when converting regular Bitcoin to Lightning or vice versa, we apply a modest 0.1%
- conversion fee to ensure secure and efficient transactions.
- </p>
- </div>
- </div>
- </div>
-
- <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">
- No, Swapee.me is designed to be incredibly user-friendly. You can access our
- platform using any device that can connect to a web browser - whether it's your
- mobile phone, PC, tablet, or any other compatible device. Swapee.me prioritizes
- accessibility and ease of use for all users, regardless of their chosen device.
- </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">
- At Swapee.me, we value your time. Lightning payments on our platform settle
- instantly, reflecting our commitment to efficiency and user satisfaction. Forget
- waiting for extended transaction confirmations; with Swapee.me, you can experience
- the speed and efficiency of the Lightning Network firsthand.
- </p>
- </div>
- </div>
- </div>
- </div>
+ <Accordion.Root class="w-full flex flex-col gap-3" bind:value={askedQuestionsAccordionValue} >
+ {#each askedQuestionsAccordion as askedQuestionAccordion }
+ <Accordion.Item value={`item-${askedQuestionAccordion.id}`} class="bg-white rounded-[10px] border-[1px] border-gray-300 px-4">
+ <Accordion.Trigger class="py-0">
+ <h2 class="text-base pt-3 pb-3 font-bold border-b-black {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
+ </Accordion.Trigger>
+ <Accordion.Content class="text-base text-slate-500 mt-0">
+ <Separator orientation="horizontal" class="mt-0 mb-3" />
+ <p class="mb-0">{askedQuestionAccordion.description}</p>
+ </Accordion.Content>
+ </Accordion.Item>
+ {/each}
+ </Accordion.Root>
</div>
</div>
</section>
@@ -331,14 +300,9 @@
<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>
+ <p class="text-white-50 mt-10">Copyright © 2023. Swapee.me</p>
+ <p class="text-white-50 mt-3">All rights reserved.</p>
+ <a href="#" class="btn_language d-inline-block mt-3">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"
diff --git a/src/swapee/css/animation.css b/src/swapee/css/animation.css
new file mode 100644
index 00000000..4ef62b82
--- /dev/null
+++ b/src/swapee/css/animation.css
@@ -0,0 +1,32 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2024-2-6 22:17:3
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+ @-webkit-keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0) scale(1.015);
+ transform: translateY(0) scale(1.015);
+ }
+ 100% {
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+ }
+ @keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0) scale(1.015);
+ transform: translateY(0) scale(1.015);
+ }
+ 100% {
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+}
+
+.slide-top {
+ -webkit-animation: slide-top 4s infinite alternate cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+ animation: slide-top 4s infinite alternate cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+} \ No newline at end of file
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
index 69996058..ba9e10d3 100644
--- a/src/swapee/css/style.css
+++ b/src/swapee/css/style.css
@@ -313,7 +313,7 @@ body{
padding-bottom: 12vw;
}
-/* accordion */
+/* accordion NOT MORE BEING USED (AFTER ALTERATIONS, NOW THE ACCORDION IS BUILT WITH TAILWIND + SHADCN) */
.swapee_accordion {
border-radius: 10px;
-webkit-border-radius: 10px;