v2 donation page

src/lib/components/common/DonationMethod.svelte

@@ -1,25 +1,32 @@
 <script>
+	import { ClickableTile, CodeSnippet } from 'carbon-components-svelte';
 	import SanityImage from '$lib/sanity/image/SanityImage.svelte';
+
+	import { ComposedModal, ModalHeader, ModalBody } from 'carbon-components-svelte';
 	/**
 	 * @type {import('../../types/donatePage').PaymentMethod} - data
 	 */
 
 	export let data;
+	$: open = false;
 </script>
 
-<div
-	class="cursor-pointer group bg-[#edf3f9] py-2 min-h-[130px] items-center flex justify-between flex-col"
+<ComposedModal size="xs" bind:open on:open on:open on:close>
+	<ModalHeader title={data.name} />
+	<ModalBody>
+		<div class=" text-lg overflow-hidden">
+			<CodeSnippet light={true}>{data.number}</CodeSnippet>
+		</div>
+	</ModalBody>
+</ComposedModal>
+<ClickableTile
+	class="cursor-pointer group   grid place-items-center "
+	on:click={() => (open = true)}
 >
-	<div class="w-full flex mx-auto transition-all duration-300 group-hover:scale-[1.1]">
-		<SanityImage
-			className="w-[100px] md:w-[140px]   aspect-square mx-auto object-contain bg-transparent"
-			image={data.Image}
-			alt={data.name}
-			maxWidth={200}
-		/>
-	</div>
-	<div class="flex flex-col p-4 text-center gap-2">
-		<p class="font-semibold text-sm md:text-lg text-theme-body leading-[1]">{data.name}</p>
-		<p class="text-sm group-hover:text-blue-500">{data.number}</p>
-	</div>
-</div>
+	<SanityImage
+		className="w-full aspect-square mx-auto object-contain bg-transparent max-w-[80px]"
+		image={data.Image}
+		alt={data.name}
+		maxWidth={100}
+	/>
+</ClickableTile>

src/lib/studio/schema/common/donator.js

@@ -1,19 +1,19 @@
 import { FaPeopleCarry } from 'react-icons/fa';
 export default {
-	icon: FaPeopleCarry,
-	title: 'Donor',
-	name: 'donator',
-	type: 'document',
-	fields: [
-		{
-			title: 'Name',
-			name: 'name',
-			type: 'string'
-		},
-		{
-			title: 'Amount in USD',
-			name: 'amount',
-			type: 'number'
-		}
-	]
+    icon: FaPeopleCarry,
+    title: 'Donor',
+    name: 'donator',
+    type: 'document',
+    fields: [
+        {
+            title: 'Name',
+            name: 'name',
+            type: 'string'
+        },
+        {
+            title: 'Units',
+            name: 'amount',
+            type: 'number'
+        }
+    ]
 };

src/lib/studio/schema/pages/donate/document.js

@@ -1,31 +1,26 @@
 import { FaDollarSign } from 'react-icons/fa';
 export default {
-	icon: FaDollarSign,
-	id: 'donatePage',
-	title: 'Donate Page',
-	name: 'donatePage',
-	type: 'document',
-	fields: [
-		{ title: 'SEO', name: 'seo', type: 'seo' },
-		{ title: 'Title', name: 'title', type: 'string' },
-		{ title: 'CoverImage', name: 'coverImage', type: 'image' },
-		{ title: 'Content', name: 'content', type: 'blockContent' },
-		{
-			title: 'Payment Methods Description',
-			name: 'payment_methods_description',
-			type: 'string'
-		},
-		{
-			title: 'Payment Methods',
-			name: 'payment_methods',
-			type: 'array',
-			of: [{ type: 'payment_method' }]
-		},
-		{
-			title: 'Donate Roadmap',
-			name: 'donate_roadmap',
-			type: 'donate_roadmap'
-		}
-	],
-	preview: { select: { title: 'seo.title', media: 'seo.ogImage' } }
+    icon: FaDollarSign,
+    id: 'donatePage',
+    title: 'Donate Page',
+    name: 'donatePage',
+    type: 'document',
+    fields: [
+        { title: 'SEO', name: 'seo', type: 'seo' },
+        { title: 'Title', name: 'title', type: 'string' },
+        { title: 'CoverImage', name: 'coverImage', type: 'image' },
+        { title: 'Content', name: 'content', type: 'blockContent' },
+        {
+            title: 'Payment Methods',
+            name: 'payment_methods',
+            type: 'array',
+            of: [{ type: 'payment_method' }]
+        },
+        {
+            title: 'Goal',
+            type: 'number',
+            name: 'goal'
+        }
+    ],
+    preview: { select: { title: 'seo.title', media: 'seo.ogImage' } }
 };

src/lib/studio/schema/pages/donate/index.js

@@ -1,4 +1,3 @@
 import document from './document';
-import donate_roadmap from './donate_roadmap';
 
-export default [document, donate_roadmap];
+export default [document];

src/lib/types/donatePage.ts

@@ -1,27 +1,27 @@
 export interface DonatePageData {
-	seo: BaseMetaData;
-	title: string;
-	description: string;
-	content: PortableText;
-	payment_methods: PaymentMethod[];
-	payment_methods_description: string;
-	coverImage: SanityImage;
-	donors: Donator[];
-	donate_roadmap: DonateRoadmap;
+    seo: BaseMetaData;
+    title: string;
+    description: string;
+    content: PortableText;
+    payment_methods: PaymentMethod[];
+    payment_methods_description: string;
+    coverImage: SanityImage;
+    donors: Donator[];
+    goal: number;
 }
 export interface Donator {
-	_id: string;
-	group: string;
-	amount: number;
+    _id: string;
+    group: string;
+    amount: number;
 }
 
 export interface PaymentMethod {
-	name: string;
-	number: string;
-	Image: SanityImage;
+    name: string;
+    number: string;
+    Image: SanityImage;
 }
 export interface DonateRoadmap {
-	title: string;
-	description: PortableText;
-	target: number;
+    title: string;
+    description: PortableText;
+    target: number;
 }

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
 	import 'carbon-components-svelte/css/g10.css';
 	import '@algolia/autocomplete-theme-classic';
+	import '@carbon/charts-svelte/styles.css';
 	import '$lib/styles/onedark.css';
 	import '$lib/styles/app.css';
 	import Container from '$lib/components/common/Container.svelte';

src/routes/donate/+page.js

@@ -16,12 +16,12 @@ const query = `
  * @type {import('@sveltejs/kit').Load}
  */
 export const load = async () => {
-	/**
-	 * @type {import('$lib/types/donatePage').DonatePageData}
-	 */
-	const data = await getPageData(query);
-	if (!data) throw error(404, 'Not Found');
-	return {
-		data
-	};
+    /**
+     * @type {import('$lib/types/donatePage').DonatePageData}
+     */
+    const data = await getPageData(query);
+    if (!data) throw error(404, 'Not Found');
+    return {
+        data
+    };
 };

src/routes/donate/+page.svelte

@@ -1,41 +1,91 @@
 <script>
-	import DonatorChart from '$lib/components/common/DonatorChart.svelte';
-	import SubHero from '$lib/components/common/SubHero.svelte';
 	import Meta from '$lib/components/common/Meta.svelte';
 	import SanityImage from '$lib/sanity/image/SanityImage.svelte';
 	import PortableText from '$lib/components/common/portableText/PortableText.svelte';
+	import { Tile, Button, TextInput, TextArea } from 'carbon-components-svelte';
+	import { MeterChart } from '@carbon/charts-svelte';
 	import DonationMethod from '$lib/components/common/DonationMethod.svelte';
+
+	let formID = 'mrgwbjkb';
 	/**
 	 * @type {{data:import('../../lib/types/donatePage').DonatePageData;}}
 	 */
 	export let data;
+	let max = data.data.goal || 10000;
+
+	let chartOptions = {
+		title: 'Donation goal',
+		height: '130px',
+		meter: {
+			proportional: {
+				total: max,
+				unit: 'Units',
+				// @ts-ignore
+				totalFormatter: (e) => `Goal : ${e}`,
+				// @ts-ignore
+				breakdownFormatter: (e) => `Currently Donated ${e.datasetsTotal} Units`
+			}
+		},
+		toolbar: {
+			enabled: false
+		},
+		color: {
+			pairing: {
+				option: 2
+			}
+		}
+	};
 </script>
 
 <Meta data={data.data.seo} />
-<div class="w-full min-h-screen flex flex-col">
-	<SubHero title="Donate Us" />
-	<div class="section-container box">
-		<div class="w-full flex flex-col">
-			<div class="mb-6 md:mb-12">
-				<SanityImage
-					image={data.data.coverImage}
-					maxWidth={1000}
-					alt={data.data.title}
-					className="w-full h-full "
-				/>
-			</div>
-			<div class="w-full grid place-items-center mt-6">
-				<PortableText value={data.data.content} />
-			</div>
-		</div>
-		<div class="flex flex-col gap-4 my-24">
-			<h3 class="text-xl md:text-2xl text-center">{data.data.payment_methods_description}</h3>
-			<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-12 mt-8">
+<div
+	class="w-full bg-gradient-to-b from-black to-gray-900 text-white min-h-[300px] flex justify-end flex-col"
+>
+	<div class="section-container border p-6 md:p-12 w-full">
+		<h1 class="text-5xl leading-[1.1] md:text-6xl mb-4">Donate us</h1>
+	</div>
+</div>
+<div class="section-container p-4 md:px-12 py-12">
+	<SanityImage
+		image={data.data.coverImage}
+		maxWidth={1000}
+		alt={data.data.title}
+		className="w-full h-full "
+	/>
+	<div class="w-full grid place-items-center mt-6">
+		<div>
+			<PortableText value={data.data.content} />
+			<Tile class="my-8 p-4 border">
+				<MeterChart data={data.data.donors} options={chartOptions} />
+			</Tile>
+
+			<div class="grid grid-cols-auto-fit-100 gap-1 md:gap-4 mt-8">
 				{#each data.data.payment_methods as method}
 					<DonationMethod data={method} />
 				{/each}
 			</div>
+			<form
+				class="flex flex-col basis-1/2 gap-4 mt-6"
+				action={`https://formspree.io/f/${formID}`}
+				method="POST"
+			>
+				<TextInput
+					labelText="Email"
+					placeholder="Enter your email"
+					type="email"
+					required
+					name="email"
+				/>
+				<TextInput
+					labelText="Units"
+					placeholder="Enter units "
+					type="number"
+					required
+					name="units"
+				/>
+				<TextArea labelText="Message" placeholder="Enter message..." name="message" required />
+				<Button type="submit" class=" mt-4 bg-[#0F62FE]" kind="primary">Send</Button>
+			</form>
 		</div>
-		<DonatorChart data={data.data.donors} roadmap={data.data.donate_roadmap} />
 	</div>
 </div>

tailwind.config.js

@@ -1,18 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/**/*.{html,js,svelte,ts}'],
-	theme: {
-		fontFamily: {
-			san: ['GreatHorKham Yangon', 'sans-serif']
-		},
-		extend: {
-			colors: {
-				'theme-primary': '#D0E2FF',
-				'theme-dark': '#161616',
-				'theme-muted': '#e8e8e8',
-				'theme-secondary': '#E8DAFF'
-			}
-		}
-	},
-	plugins: [require('@tailwindcss/typography')]
+    content: ['./src/**/**/*.{html,js,svelte,ts}'],
+    theme: {
+        fontFamily: {
+            san: ['GreatHorKham Yangon', 'sans-serif']
+        },
+        extend: {
+            colors: {
+                'theme-primary': '#D0E2FF',
+                'theme-dark': '#161616',
+                'theme-muted': '#e8e8e8',
+                'theme-secondary': '#E8DAFF'
+            },
+            gridTemplateColumns: {
+                'auto-fill-100': 'repeat(auto-fill, minmax(100px, 1fr))',
+                'auto-fit-100': 'repeat(auto-fit, minmax(100px, 1fr))'
+            }
+        }
+    },
+    plugins: [require('@tailwindcss/typography')]
 };