diff --git a/package-lock.json b/package-lock.json
index 84f81c2..7199c5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,9 @@
"astro": "^6.1.9",
"react": "^19.2.5",
"react-dom": "^19.2.5",
- "tailwindcss": "^4.2.4"
+ "tailwind-merge": "^3.6.0",
+ "tailwind-variants": "^3.2.2",
+ "tailwindcss": "^4.3.0"
},
"engines": {
"node": ">=22.12.0"
@@ -1851,6 +1853,12 @@
"tailwindcss": "4.2.4"
}
},
+ "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+ "version": "4.2.4",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
+ "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
+ "license": "MIT"
+ },
"node_modules/@tailwindcss/oxide": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.4.tgz",
@@ -2093,6 +2101,12 @@
"vite": "^5.2.0 || ^6 || ^7 || ^8"
}
},
+ "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+ "version": "4.2.4",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
+ "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
+ "license": "MIT"
+ },
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -5281,10 +5295,39 @@
"url": "https://opencollective.com/svgo"
}
},
+ "node_modules/tailwind-merge": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+ "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/dcastil"
+ }
+ },
+ "node_modules/tailwind-variants": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.2.2.tgz",
+ "integrity": "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=16.x",
+ "pnpm": ">=7.x"
+ },
+ "peerDependencies": {
+ "tailwind-merge": ">=3.0.0",
+ "tailwindcss": "*"
+ },
+ "peerDependenciesMeta": {
+ "tailwind-merge": {
+ "optional": true
+ }
+ }
+ },
"node_modules/tailwindcss": {
- "version": "4.2.4",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
- "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+ "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
"license": "MIT"
},
"node_modules/tapable": {
diff --git a/package.json b/package.json
index 7af595d..d73028f 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
"astro": "^6.1.9",
"react": "^19.2.5",
"react-dom": "^19.2.5",
- "tailwindcss": "^4.2.4"
+ "tailwind-merge": "^3.6.0",
+ "tailwind-variants": "^3.2.2",
+ "tailwindcss": "^4.3.0"
}
}
diff --git a/src/components/TextExample.astro b/src/components/TextExample.astro
new file mode 100644
index 0000000..4aaaf44
--- /dev/null
+++ b/src/components/TextExample.astro
@@ -0,0 +1,19 @@
+---
+
+---
+
+Cherry On Tech (Display-1)
+Cherry On Tech (Display-1)
+Cherry On Tech (Display-2)
+Cherry On Tech (Display-2)
+Cherry On Tech (Display-3)
+Cherry On Tech (Display-3)
+Cherry On Tech (H1)
+Cherry On Tech (H2)
+Cherry On Tech (H3)
+Cherry On Tech (H4)
+Cherry On Tech (H5)
+Cherry On Tech (Body)
+Cherry On Tech (Body)
+Cherry On Tech (Caption)
+
diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index 1b2cf9c..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,210 +0,0 @@
----
-import astroLogo from '../assets/astro.svg';
-import background from '../assets/background.svg';
----
-
-
-
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c04f360..c7ab4e9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,8 @@
---
-import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
-
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+import TextExample from '../components/TextExample.astro';
---
-
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 84e685f..6c4d0dc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@100..900,0&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@100..900,0&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import "tailwindcss";
+
@theme {
+ /* Font and typography */
+ --font-geologica: "Geologica";
+ --font-lato: "Lato";
+ --breakpoint-*: initial;
+ --breakpoint-desktop: 64rem; /* 1024px */
+ --breakpoint-tablet: 48rem; /* 768px */
/* Primary tokens */
--color-primary-01: #0a205a;
--color-primary-01-50: rgb(10 32 90 / 50%);
@@ -87,3 +96,87 @@
--color-icon-inverse: #ffffff;
--color-icon-disabled: rgb(22 22 22 / 25%);
}
+
+@layer base {
+ body {
+ font-family: var(--font-lato);
+ font-size: var(--text-base);
+ font-weight: var(--font-weight-normal);
+ }
+ h1, h2, h3, h4, h5 {
+ font-family: var(--font-lato);
+ font-weight: var(--font-weight-bold);
+ }
+ h1 {
+ font-size: var(--text-2xl);
+ }
+ h2 {
+ font-size: var(--text-xl);
+ }
+ h3 {
+ font-size: var(--text-lg);
+ }
+ h4 {
+ font-size: var(--text-base);
+ }
+ h5 {
+ font-size: var(--text-sm);
+ }
+ label {
+ font-family: var(--font-lato);
+ font-size: var(--text-xs);
+ font-weight: var(--font-weight-semibold);
+ }
+ @media (min-width: 64rem) {
+ h1 {
+ font-size: var(--text-3xl);
+ }
+ h2 {
+ font-size: var(--text-2xl);
+ }
+ h3 {
+ font-size: var(--text-xl);
+ }
+ h4 {
+ font-size: var(--text-lg);
+ }
+ h5 {
+ font-size: var(--text-base);
+ }
+ }
+}
+
+@layer components {
+ .caption {
+ font-family: var(--font-lato);
+ font-weight: var(--font-weight-normal);
+ font-size: var(--text-sm);
+ }
+ .display-1, .display-2, .display-3 {
+ font-family: var(--font-geologica);
+ font-weight: var(--font-weight-normal);
+ }
+
+ .display-1 {
+ font-size: var(--text-5xl);
+ }
+ .display-2 {
+ font-size: var(--text-4xl);
+ }
+ .display-3 {
+ font-size: var(--text-3xl);
+
+ }
+ @media (min-width: 64rem) {
+ .display-1 {
+ font-size: var(--text-6xl);
+ }
+ .display-2 {
+ font-size: var(--text-5xl);
+ }
+ .display-3 {
+ font-size: var(--text-4xl);
+ }
+}
+}
+