Make Slider + Card and add to index

6 files changed, 111 insertions, 1 deletions

diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
new file mode 100644
index 0000000..b3fbc00
--- /dev/null
+++ b/apps/website/src/components/base/Card.astro
@@ -0,0 +1,22 @@
+---
+import type { Icons } from '@components/icons/Icon.astro';
+import Icon from '@components/icons/Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+	icon: Icons;
+	text?: string;
+}
+
+const {
+	icon,
+	text = 'Hiiii',
+	...rest
+} = Astro.props;
+---
+
+<!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
+<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+	<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
+	<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p>
+</div>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
new file mode 100644
index 0000000..f40b747
--- /dev/null
+++ b/apps/website/src/components/base/Slider.astro
@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+	dir?: string;
+	wrapperClass?: string;
+}
+
+const {
+	dir = "left",
+	wrapperClass = ""
+} = Astro.props;
+---
+
+<div class={
+	`w-full bg-blue-100 flex flex-row gap-2.5 overflow-hidden slider
+	${dir === "right" ? "reverse" : ""}
+	${wrapperClass}`}>
+	<slot />
+</div>
+
+<!-- might be cheating a bit using global styles here but at least it lets you use slots -->
+<style is:global>
+	.slider > * {
+		animation: 5s linear infinite slide;
+	}
+	.slider.reverse > * {
+		animation-direction: reverse;
+	}
+	@keyframes slide {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(calc(-100% - 10px));
+		}
+	}
+</style>
diff --git a/apps/website/src/components/icons/impl/chatting.svg b/apps/website/src/components/icons/impl/chatting.svg
new file mode 100644
index 0000000..6ccac14
--- /dev/null
+++ b/apps/website/src/components/icons/impl/chatting.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5919 40.2371H7.39267C4.45924 40.2371 1.5 38.01 1.5 33.0356V23.1326C1.5398 18.6185 3.22974 14.2747 6.25144 10.9209C9.27161 7.56525 13.4154 5.4309 17.9011 4.92008C18.3215 4.88963 18.7525 4.875 19.1815 4.875H19.2502C17.8505 6.01965 16.7872 7.52242 16.1737 9.22328C13.1048 10.0424 10.3906 11.8479 8.44897 14.3617C6.50734 16.8754 5.44605 19.9581 5.42887 23.1343V33.0373C5.42887 33.8052 5.57006 36.3096 7.39136 36.3096H18.5905C22.1186 36.2908 25.5185 34.9854 28.1525 32.6381C30.7865 30.2908 32.4735 27.0633 32.8969 23.5607C32.9202 23.2434 32.9319 22.9137 32.9324 22.5806H36.8617C36.8617 22.9988 36.8457 23.421 36.817 23.8361C36.3061 28.3245 34.1692 32.4704 30.8101 35.491C27.4536 38.5121 23.1076 40.2 18.5919 40.2371Z" fill="#DFE3EC"/>
+<path d="M39.2599 19.8405H25.5654C24.1335 19.8406 22.7338 19.416 21.5432 18.6206C20.3527 17.8251 19.4247 16.6944 18.8768 15.3715C18.3288 14.0487 18.1855 12.593 18.4648 11.1887C18.7442 9.78431 19.4337 8.49435 20.4462 7.48189C21.1169 6.80752 21.9147 6.27289 22.7934 5.90895C23.6721 5.54501 24.6143 5.35897 25.5654 5.3616H39.2599C40.6916 5.36145 42.0915 5.78591 43.2821 6.58132C44.4727 7.3767 45.4005 8.50729 45.9487 9.8301C46.4966 11.1529 46.6402 12.6085 46.3609 14.0129C46.0819 15.4173 45.3922 16.7073 44.3801 17.7198C43.7092 18.3943 42.9112 18.9291 42.0322 19.2931C41.1536 19.6572 40.2112 19.8432 39.2599 19.8405ZM25.0288 9.2745C23.4904 9.2745 22.2392 10.7668 22.2392 12.6006C22.2392 14.4345 23.4908 15.9267 25.0288 15.9267H39.7976C41.3362 15.9267 42.5876 14.4349 42.5876 12.6006C42.5876 10.7663 41.3362 9.2745 39.7976 9.2745H25.0288Z" fill="#E0E9FB"/>
+<path opacity="0.7" d="M28.5234 43.3675H31.8007C33.9729 43.3649 36.0554 42.5009 37.5914 40.9649C39.1274 39.4289 39.9914 37.3464 39.9941 35.1742V31.8969C39.9941 31.4623 39.8216 31.0455 39.5141 30.7382C39.2069 30.4309 38.7899 30.2583 38.3553 30.2583C37.9207 30.2583 37.5041 30.4309 37.1967 30.7382C36.8894 31.0455 36.7168 31.4623 36.7168 31.8969V35.1742C36.7169 35.8198 36.5897 36.4591 36.3427 37.0556C36.0957 37.6521 35.7335 38.194 35.277 38.6504C34.8205 39.1071 34.2785 39.469 33.6821 39.7161C33.0856 39.9633 32.4463 40.0904 31.8007 40.0904H28.5234C28.0888 40.0904 27.672 40.2629 27.3647 40.5704C27.0574 40.8775 26.8848 41.2945 26.8848 41.7288C26.8848 42.1634 27.0574 42.5804 27.3647 42.8875C27.672 43.195 28.0888 43.3675 28.5234 43.3675Z" fill="#E0E9FB"/>
+</svg>
diff --git a/apps/website/src/components/icons/impl/damage-tint.svg b/apps/website/src/components/icons/impl/damage-tint.svg
new file mode 100644
index 0000000..88ba6a7
--- /dev/null
+++ b/apps/website/src/components/icons/impl/damage-tint.svg
@@ -0,0 +1,17 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8_862)">
+<path d="M38.4 0H9.6C4.29807 0 0 4.29807 0 9.6V38.4C0 43.7019 4.29807 48 9.6 48H38.4C43.7019 48 48 43.7019 48 38.4V9.6C48 4.29807 43.7019 0 38.4 0Z" fill="#ECF2FF"/>
+<path d="M38.3999 0.149902H9.5999C4.38081 0.149902 0.149902 4.38081 0.149902 9.5999V38.3999C0.149902 43.619 4.38081 47.8499 9.5999 47.8499H38.3999C43.619 47.8499 47.8499 43.619 47.8499 38.3999V9.5999C47.8499 4.38081 43.619 0.149902 38.3999 0.149902Z" stroke="white" stroke-opacity="0.5"/>
+<path d="M33.4024 9.21411C32.0006 9.2357 30.6293 9.62686 29.427 10.3481C28.2248 11.0693 27.2342 12.0951 26.5552 13.3217C25.8765 12.0955 24.8863 11.07 23.6846 10.3488C22.4829 9.62756 21.1121 9.23617 19.7107 9.21411C17.4764 9.31121 15.3713 10.2887 13.8553 11.9329C12.3393 13.5771 11.5357 15.7545 11.62 17.9894C11.62 23.6492 17.5771 29.8304 22.5736 34.0214C23.6892 34.9589 25.0996 35.4728 26.5567 35.4728C28.0139 35.4728 29.4243 34.9589 30.5398 34.0214C35.536 29.8304 41.4934 23.6492 41.4934 17.9894C41.5777 15.7545 40.7741 13.5771 39.2581 11.9328C37.742 10.2885 35.6368 9.31113 33.4024 9.21411ZM28.9402 32.117C28.2731 32.6789 27.4288 32.987 26.5566 32.987C25.6843 32.987 24.8401 32.6789 24.1729 32.117C17.7775 26.7512 14.1094 21.6029 14.1094 17.9894C14.0244 16.4145 14.5655 14.8698 15.6148 13.6922C16.6641 12.5147 18.1364 11.7998 19.7107 11.7035C21.285 11.7999 22.7572 12.5148 23.8065 13.6923C24.8557 14.8699 25.3968 16.4145 25.3117 17.9894C25.3117 18.3196 25.4429 18.6363 25.6764 18.8698C25.9099 19.1032 26.2265 19.2344 26.5567 19.2344C26.8869 19.2344 27.2036 19.1032 27.4371 18.8698C27.6706 18.6363 27.8017 18.3196 27.8017 17.9894C27.7167 16.4146 28.2577 14.87 29.3069 13.6924C30.3561 12.5149 31.8283 11.8 33.4024 11.7035C34.977 11.7994 36.4497 12.5141 37.4993 13.6917C38.549 14.8693 39.0903 16.4142 39.0052 17.9894C39.0052 21.6029 35.3371 26.7509 28.9417 32.1122L28.9402 32.117Z" fill="url(#paint0_linear_8_862)"/>
+<path d="M12.9236 37.4764C15.0242 36.7531 16.1408 34.4638 15.4175 32.3632C14.6942 30.2625 12.4049 29.146 10.3043 29.8693C8.20363 30.5926 7.08709 32.8819 7.8104 34.9825C8.5337 37.0831 10.823 38.1997 12.9236 37.4764Z" stroke="#5991F5" stroke-width="10" stroke-dasharray="9 12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8_862" x1="14.5727" y1="10.9734" x2="32.3414" y2="33.0427" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0A5BE8"/>
+<stop offset="1" stop-color="#00348E"/>
+</linearGradient>
+<clipPath id="clip0_8_862">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 4df1c22..a758fd1 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -9,6 +9,8 @@ import Layout from '../layouts/Layout.astro';
 
 import { Code } from 'astro:components';
 
+import Slider from '@components/base/Slider.astro';
+import Card from '@components/base/Card.astro';
 ---
 
 <Layout>
@@ -107,7 +109,7 @@ import { Code } from 'astro:components';
 			</Paragraph>
 		</Section>
 
-		<Section tabindex="0" wrapperClass="bg-blue-100" class="md:py-20 gap-4 pr-2">
+		<Section tabindex="0" wrapperClass="bg-blue-100 -mb-40" class="md:py-20 gap-4 pr-2">
 			<div slot="left" class="flex flex-col gap-2">
 				<Header size="xl" class="text-blue-500">With many fabulous mods</Header>
 				<Paragraph class="text-blue-400 max-w-[500px]">
@@ -118,5 +120,27 @@ import { Code } from 'astro:components';
 				</div>
 			</div>
 		</Section>
+		<Slider wrapperClass="-mb-40 pb-4">
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+		</Slider>
+		<Slider dir="right">
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+			<Card icon="chatting"/>
+		</Slider>
 	</div>
 </Layout>
diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
index fa26c99..011df25 100644
--- a/apps/website/tailwind.config.ts
+++ b/apps/website/tailwind.config.ts
@@ -21,6 +21,7 @@ const config: Config = {
 			'gray': {
 				50: 'rgba(240, 242, 244, 1)',
 				400: 'rgba(138, 150, 168, 1)',
+				600: 'rgba(42, 44, 48, 1)',
 				700: 'rgba(65, 74, 88, 1)',
 				800: 'rgba(42, 47, 55, 1)',
 			},
@@ -38,6 +39,9 @@ const config: Config = {
 			},
 			// Other
 			'navy-peony': 'rgba(32, 55, 91, 1)',
+			'primary': {
+				600: 'rgba(20, 82, 204, 1)',
+			},
 		},
 		borderRadius: {
 			'none': '0',