Skip to content

Commit

Permalink
Price component improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nrosa01
Nrosa01 committed Jun 8, 2023
1 parent f059009 commit 3bd5a32
Showing 1 changed file with 52 additions and 113 deletions.
165 changes: 52 additions & 113 deletions src/lib/Prices.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,127 +3,70 @@
import prices_lined from "../json/prices_lined.json";
import prices_posttf from "../json/prices_posttf.json";
import Image from "./Image.svelte";
import BackButton from "./BackButton.svelte";
</script>

<div
class="w-full text-center items-center justify-center place-content-center flex flex-col">
<section>
<h2
class="title">
Shaded / Painting
</h2>
<p
class="text-white xl:text-2xl text-lg font-bold quicksand xl:py-8 py-4">
This is the kind of work I usually upload to social medias. It can be
lined but I tend to prefer doing lineless. Fullbody.
</p>

<div class="w-full">
<ul class="flex flex-wrap w-full h-fit">
{#each prices_shaded as i}
<Image image="{i}" thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}/>
{/each}
</ul>
</div>

<h3 class="text-white text-2xl font-bold quicksand pt-8">
Base price starting at <span class="quicksand-bold">50</span><span class="font-semibold font-sans"
>€</span>
</h3>
<hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
</section>

<section>
<h2
class="title">
LINED / MINIMAL SHADING
</h2>
<p
class="text-white xl:text-2xl text-lg font-bold font-[quicksand] xl:py-8 py-4">
This gets you a clean lined drawing with flat colours and some minimal
shading. Fullbody
</p>

<div class="w-full">
<ul class="flex flex-wrap w-full h-fit">
{#each prices_lined as i}
<Image image="{i}" thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}} />
{/each}
</ul>
</div>

<h3 class="text-white text-2xl font-bold font-[quicksand] pt-8">
Base price starting at <span class="quicksand-bold">30</span><span class="font-semibold font-sans"
>€</span>
</h3>
<hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
</section>
import BackButton from "./BackButton.svelte";
<section>
<h2
class="title">
POST TF DOODLE PAGE
</h2>
<p>
<span
class="block text-white xl:text-xl text-lg font-bold font-[quicksand] xl:pt-8 pt-4">
A simple 3-5 panel sequence showing a character already transformed
reacting to his new body or in some situation due to it.
</span>

<span
class="block text-white xl:text-xl text-lg font-bold font-[quicksand] xl:py-4 py-2">
These drawings are a flat style with minimal shading and they are a
little more simplified than other of my drawings.
</span>
const categories = [
{
title: "Shaded / Painting",
description: "This is the kind of work I usually upload to social medias. It can be lined but I tend to prefer doing lineless. Fullbody.",
prices: prices_shaded,
basePrice: 50
},
{
title: "LINED / MINIMAL SHADING",
description: "This gets you a clean lined drawing with flat colours and some minimal shading. Fullbody",
prices: prices_lined,
basePrice: 30
},
{
title: "POST TF DOODLE PAGE",
description: "A simple 3-5 panel sequence showing a character already transformed reacting to his new body or in some situation due to it. These drawings are a flat style with minimal shading and they are a little more simplified than other of my drawings.Background isn't included",
prices: prices_posttf,
basePrice: 45
}
];
</script>

<span
class="block text-white xl:text-xl text-lg font-bold font-[quicksand] xl:pb-4 pb-2">
Background isn't included
</span>
</p>
<div class="w-full text-center items-center justify-center place-content-center flex flex-col">
{#each categories as category}
<section>
<h2 class="title">{category.title}</h2>
<p class="text-white xl:text-2xl text-lg font-bold quicksand xl:py-8 py-4">{category.description}</p>

<div class="w-full">
<ul class="flex flex-wrap w-full h-fit">
{#each prices_posttf as i}
<Image image="{i}" thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}/>
{/each}
</ul>
</div>
<div class="w-full">
<ul class="flex flex-wrap w-full h-fit">
{#each category.prices as price}
<Image image={price} thumbnail={{...price, src: price.src.replace('gallery\\', 'thumbnails\\')}}/>
{/each}
</ul>
</div>

<h3 class="text-white text-2xl font-bold font-[quicksand] pt-8">
Base price starting at <span class="quicksand-bold">45</span><span class="font-semibold font-sans">€</span>
</h3>
<hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
</section>
<h3 class="text-white text-2xl font-bold quicksand pt-8">
Base price starting at <span class="quicksand-bold">{category.basePrice}</span><span class="font-semibold font-sans">€</span>
</h3>
<hr class="my-12 h-0.5 border-t-0 bg-neutral-100/10" />
</section>
{/each}

<section class="flex flex-col w-full items-center justify-center">
<h2
class="title pb-8">
Extras
</h2>
<h2 class="title pb-8">Extras</h2>
<div class="flex w-[50rem] text-beauty xl:text-2xl md:text-xl sm:text-base text-xs font-semibold justify-center">
<div>
<table>
<thead>
<tr>
<th class="py-4 border-b-2 border-white/25 quicksand-bold"
>Addon</th>
<th class="py-4 border-b-2 border-white/25 quicksand-bold"
>Price</th>
<th class="py-4 border-b-2 border-white/25 quicksand-bold">Addon</th>
<th class="py-4 border-b-2 border-white/25 quicksand-bold">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-4 border-b border-white/10 quicksand">Rough Background</td>
<td class="py-4 border-b border-white/10 quicksand"
>15<span class="font-light font-sans">€</span></td>
<td class="py-4 border-b border-white/10 quicksand">15<span class="font-light font-sans">€</span></td>
</tr>
<tr>
<td class="py-4 border-b border-white/10 quicksand">Background</td>
<td class="py-4 border-b border-white/10 quicksand"
>30<span class="font-light font-sans">€</span></td>
<td class="py-4 border-b border-white/10 quicksand">30<span class="font-light font-sans">€</span></td>
</tr>
<tr>
<td class="py-4 quicksand">Extra Character*</td>
Expand All @@ -135,17 +78,13 @@
</div>

<p>
<span
class="block text-white text-sm font-bold quicksand xl:pt-8 pt-4">
*Extra Character doesn't apply to Post TF Doodle Page category
Extra Character price vary depending on the difficulty
</span>

<span
class="block text-white xl:text-xl text-lg font-bold quicksand xl:py-4 py-2">
Feel free to DM me about any doubt or inquiry! You can request things that aren't listed here.
</span>
</p>
<span class="block text-white text-sm font-bold quicksand xl:pt-8 pt-4">
*Extra Character doesn't apply to Post TF Doodle Page category. Extra Character price may vary depending on the difficulty.
</span>
<span class="block text-white xl:text-xl text-lg font-bold quicksand xl:py-4 py-2">
Feel free to DM me about any doubt or inquiry! <strong class="quicksand-bold">You can request things that aren't listed here.</strong>
</span>
</p>
</section>

<BackButton />
Expand Down

0 comments on commit 3bd5a32

Please sign in to comment.