feat(how-much): added how much browser do you want section
5
.astro/settings.json
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"_variables": {
|
||||||
|
"lastUpdateCheck": 1731292924393
|
||||||
|
}
|
||||||
|
}
|
1
.astro/types.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="astro/client" />
|
14
package.json
|
@ -3,8 +3,8 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev --port 3000",
|
||||||
"start": "astro dev",
|
"start": "astro preview",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro",
|
"astro": "astro",
|
||||||
|
@ -12,20 +12,26 @@
|
||||||
"format": "prettier --check ./src"
|
"format": "prettier --check ./src"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/tailwind": "3.1.1",
|
"@astrojs/tailwind": "5.1.2",
|
||||||
"astro": "2.1.3",
|
"astro": "4.16.10",
|
||||||
"autoprefixer": "10.4.14",
|
"autoprefixer": "10.4.14",
|
||||||
"postcss": "8.4.21",
|
"postcss": "8.4.21",
|
||||||
"postcss-import": "^16.1.0",
|
"postcss-import": "^16.1.0",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
"prettier-plugin-astro": "^0.14.1",
|
"prettier-plugin-astro": "^0.14.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||||
|
"sharp": "^0.33.5",
|
||||||
"tailwindcss": "3.2.7"
|
"tailwindcss": "3.2.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@astrojs/react": "^3.6.2",
|
||||||
"@fontsource/dm-sans": "^5.1.0",
|
"@fontsource/dm-sans": "^5.1.0",
|
||||||
"@fontsource/inter": "^5.1.0",
|
"@fontsource/inter": "^5.1.0",
|
||||||
|
"@types/react": "^18.0.21",
|
||||||
|
"@types/react-dom": "^18.0.6",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"react": "^19.0.0-beta",
|
||||||
|
"react-dom": "^19.0.0-beta",
|
||||||
"tailwind-merge": "^2.5.4"
|
"tailwind-merge": "^2.5.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
3142
pnpm-lock.yaml
generated
BIN
public/Redrawn_v1_Barebones.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
1
public/placeholder.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/Redrawn_v1_Barebones.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/collapsed.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/compact.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/split.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/standard.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
3
src/components/footer.astro
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<footer class="h-40">
|
||||||
|
<p>Work in progress - coming soon</p>
|
||||||
|
</footer>
|
|
@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
|
||||||
<header>
|
<header>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<section>
|
<section>
|
||||||
<LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
|
<LanguageIcon class="dark:text-primary-dark h-7 w-7 text-primary" />
|
||||||
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
|
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
@ -20,7 +20,7 @@ import Navbar from "./navbar.astro";
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
@apply flex items-center gap-4;
|
@apply flex items-center gap-10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,28 +1,64 @@
|
||||||
---
|
---
|
||||||
|
// src/components/hero.astro
|
||||||
import DownloadIcon from "./icons/download-icon.astro";
|
import DownloadIcon from "./icons/download-icon.astro";
|
||||||
import '@fontsource/dm-sans/700.css';
|
import browserImage from "@/assets/Redrawn_v1_Barebones.png";
|
||||||
|
import "@fontsource/dm-sans/700.css";
|
||||||
|
import { Image } from "astro:assets";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="hero" class="section flex flex-col md:flex-row gap-md items-center">
|
<section id="hero">
|
||||||
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
|
<h2>Stay focused, browse faster</h2>
|
||||||
<h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
|
<p class="description">
|
||||||
<p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
|
Zen is beautifully designed, privacy-focused, and packed with features. We
|
||||||
Zen is beautifully designed, privacy-focused, and packed with features. We
|
care about your experience, not your data.
|
||||||
care about your experience, not your data.
|
</p>
|
||||||
</p>
|
<div class="download">
|
||||||
<div class="center flex flex-col gap-sm">
|
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
|
||||||
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
|
<p>Available on Windows, Mac, and Linux</p>
|
||||||
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
|
</div>
|
||||||
</div>
|
<div class="hero__image">
|
||||||
|
<Image src={browserImage} alt="Zen Logo" />
|
||||||
|
<figcaption>
|
||||||
|
Your experience using Zen may change over time, as new features are added,
|
||||||
|
improved and adjusted with upstream Firefox updates. User discretion is
|
||||||
|
advised.
|
||||||
|
</figcaption>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
|
|
||||||
<img
|
|
||||||
src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
|
|
||||||
alt="Zen Logo"
|
|
||||||
class="w-full rounded-lg drop-shadow-glow"
|
|
||||||
/>
|
|
||||||
<figcaption class="text-md text-muted/95">
|
|
||||||
Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
|
|
||||||
</figcaption>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@tailwind base;
|
||||||
|
@layer base {
|
||||||
|
section {
|
||||||
|
@apply section flex flex-col items-center gap-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply drop-shadow-md md:text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download {
|
||||||
|
@apply center flex flex-col gap-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download p {
|
||||||
|
@apply text-muted/95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__image {
|
||||||
|
@apply flex flex-1 flex-col gap-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
@apply w-full rounded-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
@apply text-muted/95;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
140
src/components/how-much/index.astro
Normal file
|
@ -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"];
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="how-much">
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
How <span class="highlight">much</span> browser do you want?
|
||||||
|
</h3>
|
||||||
|
<fieldset id="radio-group">
|
||||||
|
<legend class="sr-only">Choose a view</legend>
|
||||||
|
{
|
||||||
|
modes.map((mode) => (
|
||||||
|
<label for={mode}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id={mode}
|
||||||
|
name="view"
|
||||||
|
value={mode}
|
||||||
|
checked={mode === "compact"}
|
||||||
|
/>
|
||||||
|
<span>{mode.charAt(0).toUpperCase() + mode.slice(1)}</span>
|
||||||
|
</label>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</fieldset>
|
||||||
|
<div id="slider-container">
|
||||||
|
<span id="slider-value">🌱</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="view-slider"
|
||||||
|
min="0"
|
||||||
|
max="3"
|
||||||
|
value="0"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<span id="slider-value">🌳</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="image-container">
|
||||||
|
<div id="image-wrapper">
|
||||||
|
{
|
||||||
|
modes.map((mode, index) => (
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
[compactImage, collapsedImage, standardImage, splitImage][index]
|
||||||
|
}
|
||||||
|
alt={`${mode} browser view`}
|
||||||
|
id={mode}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div id="carousel-indicators">
|
||||||
|
{
|
||||||
|
modes.map((_, index) => (
|
||||||
|
<span
|
||||||
|
class:list={["indicator", { active: index === 0 }]}
|
||||||
|
data-index={index}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const radioButtons = document.querySelectorAll('input[name="view"]');
|
||||||
|
const imageWrapper = document.getElementById("image-wrapper") as HTMLElement;
|
||||||
|
const indicators = document.querySelectorAll(".indicator");
|
||||||
|
const modeOrder = ["compact", "collapsed", "standard", "split"];
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
const slider = document.getElementById("view-slider") as HTMLInputElement;
|
||||||
|
|
||||||
|
function updateImages(selectedMode: string) {
|
||||||
|
const selectedIndex = modeOrder.indexOf(selectedMode);
|
||||||
|
currentIndex = selectedIndex;
|
||||||
|
const offset = selectedIndex * -100;
|
||||||
|
const mediaQuery = window.matchMedia("(min-width: 1280px)");
|
||||||
|
if (mediaQuery.matches) {
|
||||||
|
imageWrapper.style.transform = `translateY(${offset}%)`;
|
||||||
|
} else {
|
||||||
|
imageWrapper.style.transform = `translateX(${offset}%)`;
|
||||||
|
}
|
||||||
|
updateIndicators();
|
||||||
|
updateRadioButtons();
|
||||||
|
updateSlider();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateIndicators() {
|
||||||
|
indicators.forEach((indicator, index) => {
|
||||||
|
if (index === currentIndex) {
|
||||||
|
indicator.classList.add("active");
|
||||||
|
} else {
|
||||||
|
indicator.classList.remove("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRadioButtons() {
|
||||||
|
const selectedRadio = document.querySelector(
|
||||||
|
`input[value="${modeOrder[currentIndex]}"]`
|
||||||
|
) as HTMLInputElement;
|
||||||
|
if (selectedRadio) {
|
||||||
|
selectedRadio.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSlider() {
|
||||||
|
slider.value = currentIndex.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
radioButtons.forEach((radio) => {
|
||||||
|
radio.addEventListener("change", (e) => {
|
||||||
|
if (e.target instanceof HTMLInputElement && e.target.checked) {
|
||||||
|
updateImages(e.target.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
indicators.forEach((indicator, index) => {
|
||||||
|
indicator.addEventListener("click", () => {
|
||||||
|
updateImages(modeOrder[index]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
slider.addEventListener("input", () => {
|
||||||
|
updateImages(modeOrder[parseInt(slider.value)]);
|
||||||
|
});
|
||||||
|
</script>
|
64
src/components/how-much/styles.css
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
17
src/components/icons/chevron-left-icon.astro
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
import { ny } from "../../lib/utils";
|
||||||
|
const { class: className } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class={ny("w-5 h-5", className)}><path d="m15 18-6-6 6-6"></path></svg
|
||||||
|
>
|
17
src/components/icons/chevron-right-icon.astro
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
import { ny } from "../../lib/utils";
|
||||||
|
const { class: className } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class={ny("w-5 h-5", className)}><path d="m9 18 6-6-6-6"></path></svg
|
||||||
|
>
|
1
src/env.d.ts
vendored
|
@ -1 +1,2 @@
|
||||||
|
/// <reference path="../.astro/types.d.ts" />
|
||||||
/// <reference types="astro/client" />
|
/// <reference types="astro/client" />
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
---
|
---
|
||||||
import CircleEffect from "../components/circle-effect.astro";
|
import CircleEffect from "../components/circle-effect.astro";
|
||||||
import Header from "../components/header.astro";
|
import Header from "../components/header.astro";
|
||||||
|
import Footer from "../components/footer.astro";
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
import '@fontsource/inter';
|
import "@fontsource/inter";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
@ -21,21 +22,13 @@ import '@fontsource/inter';
|
||||||
<body>
|
<body>
|
||||||
<div class="container flex min-h-screen flex-col items-center gap-y-4xl">
|
<div class="container flex min-h-screen flex-col items-center gap-y-4xl">
|
||||||
<CircleEffect />
|
<CircleEffect />
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 -z-10 bg-gradient-to-b from-secondary/20 to-transparent"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<Header />
|
<Header />
|
||||||
<main class="flex w-full flex-col gap-4"><slot /></main>
|
<main class="flex w-full flex-col gap-40"><slot /></main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
hsla(22, 96%, 60%, 0.1),
|
|
||||||
transparent 70%
|
|
||||||
),
|
|
||||||
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
|
|
||||||
linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
---
|
---
|
||||||
|
import HowMuch from "../components/how-much/index.astro";
|
||||||
import Hero from "../components/hero.astro";
|
import Hero from "../components/hero.astro";
|
||||||
import Layout from "../layouts/main.astro";
|
import Layout from "../layouts/main.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Zen Browser">
|
<Layout title="Zen Browser">
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<HowMuch />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -16,8 +16,10 @@ module.exports = {
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: "hsl(22, 96%, 60%)",
|
// primary: "hsl(258, 48%, 23%)",
|
||||||
muted: "hsl(22, 96%, 70%)",
|
primary: "hsl(0 0% 20%)",
|
||||||
|
secondary: "hsl(22, 96%, 60%)",
|
||||||
|
muted: "hsl(0 0% 30%)",
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
xs: "0.5rem",
|
xs: "0.5rem",
|
||||||
|
@ -34,9 +36,6 @@ module.exports = {
|
||||||
"8xl": "10rem",
|
"8xl": "10rem",
|
||||||
"9xl": "11rem",
|
"9xl": "11rem",
|
||||||
},
|
},
|
||||||
fontSize: {
|
|
||||||
"scale-large": "clamp(3rem, 6vw, 4rem)",
|
|
||||||
},
|
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: [
|
sans: [
|
||||||
"Inter",
|
"Inter",
|
||||||
|
@ -50,20 +49,26 @@ module.exports = {
|
||||||
],
|
],
|
||||||
dm: ["DM Sans"],
|
dm: ["DM Sans"],
|
||||||
},
|
},
|
||||||
dropShadow: {
|
screens: {
|
||||||
glow: [
|
"-sm": { max: "639px" },
|
||||||
"0 0px 5px hsla(22, 96%, 60%, 0.90)",
|
"-md": { max: "767px" },
|
||||||
"0 0px 20px hsla(22, 96%, 60%, 0.75)"
|
"-lg": { max: "1023px" },
|
||||||
]
|
"-xl": { max: "1279px" },
|
||||||
}
|
"-2xl": { max: "1535px" },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
||||||
addBase({
|
addBase({
|
||||||
h2: {
|
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({
|
addComponents({
|
||||||
|
@ -74,12 +79,14 @@ module.exports = {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
".highlight": {
|
||||||
|
color: theme("colors.secondary"),
|
||||||
|
},
|
||||||
".center": {
|
".center": {
|
||||||
"@apply text-center place-items-center": {},
|
"@apply text-center place-items-center": {},
|
||||||
},
|
},
|
||||||
".btn-base": {
|
".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":
|
||||||
|
|
||||||
{},
|
{},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,3 +1,13 @@
|
||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/base"
|
"extends": "astro/tsconfigs/base",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "react"
|
||||||
|
}
|
||||||
}
|
}
|