improve mobile layout

update colors
remove landing button

web/src/components/Card.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { VariantProps, cva } from "class-variance-authority";
 
 const card = cva(
-    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10 flex-1",
+    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
     {
         variants: {
             interactable: {
@@ -23,9 +23,14 @@ export interface Props
     extends HTMLAttributes<"div">,
         VariantProps<typeof card> {}
 
-const { interactable = false, padding = true, ...props } = Astro.props;
+const {
+    interactable = false,
+    padding = true,
+    class: _class,
+    ...props
+} = Astro.props;
 ---
 
-<div {...props} class={card({ interactable, padding })}>
+<div {...props} class={card({ interactable, padding, class: _class })}>
     <slot />
 </div>

web/src/components/Cards/CardFeature.astro

@@ -11,8 +11,8 @@ export interface Props {
 const { title, description, iconName } = Astro.props;
 ---
 
-<Card>
-    <div class="text-main w-12 mb-4">
+<Card class="w-[300px] shrink-0 grow">
+    <div class="text-primary w-12 mb-4">
         <Icon name={iconName} />
     </div>
     <h4 class="text-lg font-bold">

web/src/pages/index.astro

@@ -8,13 +8,13 @@ import Features from "@/sections/Features.astro";
 
 <RootLayout title="tempblade - Creator">
 	<main>
-		<Section>
+		<Section padding={false}>
 			<Landing />
 		</Section>
 		<Section>
 			<Introduction />
 		</Section>
-		<Section>
+		<Section padding={false}>
 			<Features />
 		</Section>
 	</main>

web/src/sections/Features.astro

@@ -30,8 +30,12 @@ const features: Array<Feature> = [
 ---
 
 <div>
-    <Heading>Core Features & Values</Heading>
-    <div class="flex flex-row gap-card">
+    <div class="p-main py-0">
+        <Heading>Core Features & Values</Heading>
+    </div>
+    <div
+        class="flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory gap-card overflow-y-clip p-main snap-center"
+    >
         {
             features.map((feature) => (
                 <CardFeature

web/src/sections/Landing.astro

@@ -2,15 +2,15 @@
 import Button from "@/components/Button.astro";
 ---
 
-<div class="h-[80vh] relative">
-    <div
+<div class="h-[80vh] relative w-full overflow-x-hidden">
+    <aside
         style="filter:blur(50px);"
         class="z-0 absolute top-0 flex items-center w-full h-full justify-center object-center object-contain"
         id="landing-bg-container"
     >
         <canvas width="1920" height="1080" class="w-[800px]" id="landing-bg"
         ></canvas>
-    </div>
+    </aside>
     <div
         class="z-10 relative w-full h-full flex items-center flex-col justify-center"
     >
@@ -21,7 +21,6 @@ import Button from "@/components/Button.astro";
             <h2 class="text-center dark:text-neutral text-xl font-normal">
                 Rust Based Open Source Motion Design Editor & Toolkit
             </h2>
-            <Button>Explore now!</Button>
         </div>
     </div>
 </div>

web/src/styles/global.css

@@ -27,9 +27,9 @@
   :root {
     --color-main: 0 0% 100%;
     --color-secondary: 0 0% 80%;
-    --color-primary: 0 0% 0%;
-    --color-neutral: 264 100% 6%;
-    --color-neutral-accent: 271 100% 10%;
+    --color-primary: 280 90% 60%;
+    --color-neutral: 240 100% 4%;
+    --color-neutral-accent: 250 70% 6%;
     --color-highlight: 336 100% 60%;
     --color-success: 132 100% 78%;
     --color-error: 335 100% 62%;