-
+
+
+
diff --git a/src/components/how-much/index.astro b/src/components/how-much/index.astro
new file mode 100644
index 0000000..32e487d
--- /dev/null
+++ b/src/components/how-much/index.astro
@@ -0,0 +1,140 @@
+---
+import { Image } from "astro:assets";
+import compactImage from "@/assets/modes/compact.png";
+import collapsedImage from "@/assets/modes/collapsed.png";
+import standardImage from "@/assets/modes/standard.png";
+import splitImage from "@/assets/modes/split.png";
+import "./styles.css";
+
+type ModesOptions = "compact" | "collapsed" | "standard" | "split";
+
+const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
+---
+
+
+
+
+
diff --git a/src/components/how-much/styles.css b/src/components/how-much/styles.css
new file mode 100644
index 0000000..a4f5f51
--- /dev/null
+++ b/src/components/how-much/styles.css
@@ -0,0 +1,64 @@
+@tailwind base;
+
+@layer base {
+ section {
+ @apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr];
+ }
+
+ section>div {
+ @apply flex flex-col gap-md rounded-lg p-6;
+ }
+
+ label {
+ @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
+ }
+
+ label span {
+ @apply text-lg;
+ }
+
+ input[type="radio"] {
+ @apply h-4 w-4 text-secondary focus:ring-secondary;
+ }
+
+ #image-container {
+ @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
+ }
+
+ #image-wrapper {
+ @apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col;
+ }
+
+ img {
+ @apply aspect-[1.55/1] object-cover bg-[#272626];
+ }
+
+ #radio-group {
+ @apply hidden flex-col xl:flex;
+ }
+
+ #carousel-indicators {
+ @apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
+ }
+
+ .indicator {
+ @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
+ }
+
+ .indicator.active {
+ @apply w-8 xl:h-8 xl:w-3 bg-opacity-100;
+ }
+
+ #slider-container {
+ @apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center;
+ }
+
+ #view-slider {
+ @apply w-full;
+ }
+
+ #slider-labels {
+ @apply text-xs;
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/icons/chevron-left-icon.astro b/src/components/icons/chevron-left-icon.astro
new file mode 100644
index 0000000..f4cc7c4
--- /dev/null
+++ b/src/components/icons/chevron-left-icon.astro
@@ -0,0 +1,17 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className } = Astro.props;
+---
+
+
diff --git a/src/components/icons/chevron-right-icon.astro b/src/components/icons/chevron-right-icon.astro
new file mode 100644
index 0000000..99007ef
--- /dev/null
+++ b/src/components/icons/chevron-right-icon.astro
@@ -0,0 +1,17 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className } = Astro.props;
+---
+
+
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+///
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ce4dc83..5ca29f0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,8 +16,10 @@ module.exports = {
},
extend: {
colors: {
- primary: "hsl(22, 96%, 60%)",
- muted: "hsl(22, 96%, 70%)",
+ // primary: "hsl(258, 48%, 23%)",
+ primary: "hsl(0 0% 20%)",
+ secondary: "hsl(22, 96%, 60%)",
+ muted: "hsl(0 0% 30%)",
},
spacing: {
xs: "0.5rem",
@@ -34,9 +36,6 @@ module.exports = {
"8xl": "10rem",
"9xl": "11rem",
},
- fontSize: {
- "scale-large": "clamp(3rem, 6vw, 4rem)",
- },
fontFamily: {
sans: [
"Inter",
@@ -50,20 +49,26 @@ module.exports = {
],
dm: ["DM Sans"],
},
- dropShadow: {
- glow: [
- "0 0px 5px hsla(22, 96%, 60%, 0.90)",
- "0 0px 20px hsla(22, 96%, 60%, 0.75)"
- ]
- }
+ screens: {
+ "-sm": { max: "639px" },
+ "-md": { max: "767px" },
+ "-lg": { max: "1023px" },
+ "-xl": { max: "1279px" },
+ "-2xl": { max: "1535px" },
+ },
},
},
plugins: [
plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({
h2: {
- "@apply text-scale-large font-bold text-primary": {},
-
+ "@apply text-7xl font-bold text-primary": {},
+ },
+ p: {
+ "@apply text-primary": {},
+ },
+ h3: {
+ "@apply text-5xl font-bold text-primary": {},
},
});
addComponents({
@@ -74,12 +79,14 @@ module.exports = {
alignItems: "center",
textAlign: "center",
},
+ ".highlight": {
+ color: theme("colors.secondary"),
+ },
".center": {
"@apply text-center place-items-center": {},
},
".btn-base": {
- "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white dark:text-black":
-
+ "@apply bg-black text-primary font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white":
{},
},
});
diff --git a/tsconfig.json b/tsconfig.json
index 1a46b47..4cbe4d8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,13 @@
{
- "extends": "astro/tsconfigs/base"
+ "extends": "astro/tsconfigs/base",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ },
+ "jsx": "react-jsx",
+ "jsxImportSource": "react"
+ }
}
\ No newline at end of file
Stay focused, browse faster
-- Zen is beautifully designed, privacy-focused, and packed with features. We - care about your experience, not your data. -
-
-
+Available on Windows, Mac, and Linux
-Stay focused, browse faster
++ Zen is beautifully designed, privacy-focused, and packed with features. We + care about your experience, not your data. +
+
+
+ Available on Windows, Mac, and Linux
+
+
+ Your experience using Zen may change over time, as new features are added,
+ improved and adjusted with upstream Firefox updates. User discretion is
+ advised.
+
-
- 
-
- Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
-
-
-
+
+ + How much browser do you want? +
+ +
+ 🌱
+
+ 🌳
+
+
+
+
+ {
+ modes.map((mode, index) => (
+
+
+ {
+ modes.map((_, index) => (
+
+ ))
+ }
+
+
+