diff options
| author | Murillo Pinheiro de Oliveira <[email protected]> | 2024-02-06 23:41:43 -0300 |
|---|---|---|
| committer | Murillo Pinheiro de Oliveira <[email protected]> | 2024-02-06 23:41:43 -0300 |
| commit | a02ea8e85d789d5acca9922b61222233bbc09ec6 (patch) | |
| tree | e89f53936e861bf50e8a7503c75723778570b538 /src | |
| parent | 7e33d06f2952f64815d8c7669f0f057cde20d280 (diff) | |
| download | coinos-ui-a02ea8e85d789d5acca9922b61222233bbc09ec6.tar.gz coinos-ui-a02ea8e85d789d5acca9922b61222233bbc09ec6.zip | |
layout fixes
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 99 | ||||
| -rw-r--r-- | src/app.html | 2 | ||||
| -rw-r--r-- | src/components/AppHeader.svelte | 8 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/accordion/accordion-content.svelte | 22 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/accordion/accordion-item.svelte | 11 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte | 22 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/accordion/index.js | 16 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/separator/index.js | 6 | ||||
| -rw-r--r-- | src/lib/shadcn/components/ui/separator/separator.svelte | 19 | ||||
| -rw-r--r-- | src/lib/shadcn/utils.js | 48 | ||||
| -rw-r--r-- | src/lib/utils.js | 2 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+layout.svelte | 7 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 1 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 126 | ||||
| -rw-r--r-- | src/swapee/css/animation.css | 32 | ||||
| -rw-r--r-- | src/swapee/css/style.css | 2 |
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; |
