diff --git a/package.json b/package.json index 4d6f733..3ecb408 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "astro": "^4.0.7", "clsx": "2.0.0", "framer-motion": "10.16.16", + "html-to-image": "1.11.11", "nanostores": "0.9.5", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "^0.33.1", "tailwindcss": "^3.4.0", + "tailwind-merge": "2.2.0", "typescript": "^5.3.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17c1e9b..234110e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ dependencies: framer-motion: specifier: 10.16.16 version: 10.16.16(react-dom@18.2.0)(react@18.2.0) + html-to-image: + specifier: 1.11.11 + version: 1.11.11 nanostores: specifier: 0.9.5 version: 0.9.5 @@ -47,6 +50,9 @@ dependencies: sharp: specifier: ^0.33.1 version: 0.33.1 + tailwind-merge: + specifier: 2.2.0 + version: 2.2.0 tailwindcss: specifier: ^3.4.0 version: 3.4.0 @@ -461,6 +467,13 @@ packages: '@babel/types': 7.23.6 dev: false + /@babel/runtime@7.23.7: + resolution: {integrity: sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.1 + dev: false + /@babel/template@7.22.15: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} engines: {node: '>=6.9.0'} @@ -2885,6 +2898,10 @@ packages: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} dev: false + /html-to-image@1.11.11: + resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} + dev: false + /html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: false @@ -4305,6 +4322,10 @@ packages: picomatch: 2.3.1 dev: false + /regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + dev: false + /rehype-parse@9.0.0: resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==} dependencies: @@ -4828,6 +4849,12 @@ packages: tslib: 2.6.2 dev: true + /tailwind-merge@2.2.0: + resolution: {integrity: sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==} + dependencies: + '@babel/runtime': 7.23.7 + dev: false + /tailwindcss@3.4.0: resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==} engines: {node: '>=14.0.0'} diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-Bold.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-Bold.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-Light.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Light.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-Light.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-Light.ttf diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-Medium.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-Medium.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-SemiBold.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-SemiBold.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-Text.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Text.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-Text.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-Text.ttf diff --git a/public/fonts/SukhumvitSet/SukhumvitSet-Thin.ttf b/public/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf similarity index 100% rename from public/fonts/SukhumvitSet/SukhumvitSet-Thin.ttf rename to public/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf diff --git a/src/assets/elements/lavender-lemonade.png b/src/assets/elements/lavender-lemonade.png index 3669a8f..ad80083 100644 Binary files a/src/assets/elements/lavender-lemonade.png and b/src/assets/elements/lavender-lemonade.png differ diff --git a/src/assets/elements/logo.png b/src/assets/elements/logo.png new file mode 100644 index 0000000..d897753 Binary files /dev/null and b/src/assets/elements/logo.png differ diff --git a/src/assets/elements/summer-berry-sangria.png b/src/assets/elements/summer-berry-sangria.png index 9b05d2e..feef440 100644 Binary files a/src/assets/elements/summer-berry-sangria.png and b/src/assets/elements/summer-berry-sangria.png differ diff --git a/src/components/story/ButtonSet.tsx b/src/components/story/ButtonSet.tsx new file mode 100644 index 0000000..dcc38b3 --- /dev/null +++ b/src/components/story/ButtonSet.tsx @@ -0,0 +1,47 @@ +import { BACKGROUND_BOX, TEXT, type Cocktail } from "@/data/cocktail"; +import { cn } from "@/lib/utils"; +import * as htmlToImage from "html-to-image"; +interface Props extends Cocktail {} + +const ButtonSet = ({ variant }: Props): JSX.Element => { + const downloadImage = () => { + const result = document.getElementById("result"); + if (!result) return; + htmlToImage.toJpeg(result, { quality: 0.96 }).then(function (dataUrl) { + const link = document.createElement("a"); + link.download = "result.jpeg"; + link.href = dataUrl; + link.click(); + }); + }; + + return ( +
+ + กลับสู่หน้าหลัก + + +
+ ); +}; + +export default ButtonSet; diff --git a/src/components/story/Card.tsx b/src/components/story/Card.tsx new file mode 100644 index 0000000..92d480f --- /dev/null +++ b/src/components/story/Card.tsx @@ -0,0 +1,36 @@ +import { useRef, type ReactNode } from "react"; + +import { cn } from "@/lib/utils"; + +import { BACKGROUND_BOX, NAME, TEXT, type Cocktail } from "@/data/cocktail"; + +interface Props extends Cocktail { + children: ReactNode; + img: string; +} + +const Card = ({ variant, children, img }: Props) => { + const ref = useRef(null); + + return ( +
+
+ +

+ {NAME[variant]} +

+
+ {children} +
+
+
+ ); +}; + +export default Card; diff --git a/src/components/story/FooterDecorator.astro b/src/components/story/FooterDecorator.astro new file mode 100644 index 0000000..dce0c35 --- /dev/null +++ b/src/components/story/FooterDecorator.astro @@ -0,0 +1,63 @@ +--- +import { Image } from "astro:assets"; + +import Cake1 from "@/assets/elements/cake-1.png"; +import Calendar from "@/assets/elements/calendar.png"; +import Donut from "@/assets/elements/donut.png"; +import Drinks from "@/assets/elements/drinks.png"; +import Heart1 from "@/assets/elements/heart-1.png"; +import Letter from "@/assets/elements/letter.png"; +import Orange from "@/assets/elements/orange.png"; +import Palette from "@/assets/elements/palette.png"; +import Strawberry from "@/assets/elements/strawberry.png"; +--- + +
+ + + + + + + + + +
diff --git a/src/data/cocktail.ts b/src/data/cocktail.ts new file mode 100644 index 0000000..4b73aed --- /dev/null +++ b/src/data/cocktail.ts @@ -0,0 +1,40 @@ +export interface Cocktail { + variant: "raspberry" | "cosmo" | "pina" | "gin" | "lagoon" | "lalemon"; +} + +export const BACKGROUND: Record = { + raspberry: "bg-raspberry", + cosmo: "bg-cosmo", + pina: "bg-pina", + gin: "bg-gin", + lagoon: "bg-lagoon", + lalemon: "bg-lalemon", +}; + +export const BACKGROUND_BOX: Record = { + raspberry: "bg-raspberrybox", + cosmo: "bg-cosmobox", + pina: "bg-pinabox", + gin: "bg-ginbox", + lagoon: "bg-lagoonbox", + lalemon: "bg-lalemonbox", +}; + +export const TEXT: Record = { + raspberry: "text-salmon", + cosmo: "text-peach", + pina: "text-pineapple", + gin: "text-leaf", + lagoon: "text-tropical", + lalemon: "text-lavender", +}; + +export const NAME: Record = { + raspberry: "Summer Berry Sangria", + cosmo: "Cosmopolitan", + pina: "Pina Colada", + gin: "Gin and Tonic", + lagoon: "Blue Lagoon", + lalemon: "Lavender Lemonade", +}; + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index da1a733..40224f2 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,5 +1,6 @@ --- import "@/style.css"; +import { ViewTransitions } from "astro:transitions"; interface Props { pageTitle?: string; } @@ -14,10 +15,11 @@ const { pageTitle = "GearFestival" } = Astro.props; {pageTitle} +
diff --git a/src/layouts/CocktailCard.astro b/src/layouts/CocktailCard.astro new file mode 100644 index 0000000..f58f3fd --- /dev/null +++ b/src/layouts/CocktailCard.astro @@ -0,0 +1,34 @@ +--- +import { Image } from "astro:assets"; + +import BaseLayout from "@/layouts/BaseLayout.astro"; +import Card from "@/components/story/Card"; +import ButtonSet from "@/components/story/ButtonSet"; +import FooterDecorator from "@/components/story/FooterDecorator.astro"; + +import Logo from "@/assets/elements/logo.png"; +import { BACKGROUND, type Cocktail } from "@/data/cocktail"; + +interface Props extends Cocktail { + img: string; +} + +const { variant, img } = Astro.props; +--- + + +
+ + + + + + +
+ diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..21fe2b7 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...args: ClassValue[]) { + return twMerge(clsx(args)); +} diff --git a/src/pages/cocktail/bluelagoon.astro b/src/pages/cocktail/bluelagoon.astro new file mode 100644 index 0000000..8444aff --- /dev/null +++ b/src/pages/cocktail/bluelagoon.astro @@ -0,0 +1,26 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import BlueLagoon from "@/assets/elements/blue-lagoon.png"; +--- + + + บลู ลากูน – เครื่องดื่มสีสดใสที่เกิดจากการผสมกันระหว่าง +
วอดก้า บลูคูราโซ่ และน้ำมะนาว เนื่องด้วยรสชาติที่ให้ความสดชื่น + และสีสันที่สวยงามจึงเป็นเครื่องดื่มที่มักเป็นที่นิยมในงานสังสรรค์ +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว คุณเป็นมนุษย์ที่ชอบเข้าสังคม สดใส ร่าเริง + ชอบพูดคุยและทำความรู้จักกับผู้คนใหม่ ๆ + เปรียบเหมือนผีเสื้อที่บินไปหาดอกไม้มากมาย +

+ คุณเป็นคนที่มีความเป็นเด็กน้อยในตัวสูง + ตื่นเต้นกับสิ่งที่แปลกใหม่รอบตัวจนในบางทีคุณอาจจะมีแนวโน้มที่จะเป็นคนเบื่อง่าย + + +

+ ถึงแม้ภายนอกคุณจะดูสดใส แต่จริง ๆ + คุณก็มีมุมที่มีความลึกลับที่คนนอกอาจจะเข้าไม่ถึง +

+ “Love has absolutely no pattern, +
and no one will ever be perfect“ +
—Taylor swift + diff --git a/src/pages/cocktail/cosmopolitan.astro b/src/pages/cocktail/cosmopolitan.astro new file mode 100644 index 0000000..094db3d --- /dev/null +++ b/src/pages/cocktail/cosmopolitan.astro @@ -0,0 +1,26 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import Cosmo from "@/assets/elements/cosmopolitan.png"; +--- + + + วอดก้า แครนเบอรี่ และน้ำมะนาว สามส่วนผสมหลักที่เข้ากันได้อย่างไม่น่าเชื่อ + รวมกันเป็นค็อกเทลรสเปรี้ยวอมหวานสีชมพูสดใส +
ที่ครองใจสาว ๆ นักดื่มทั่วโลก +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว คุณเป็นคนขี้เล่น มีเสน่ห์ +
และมักจะเต็มเปี่ยมไปด้วยพลังงานในการทำสิ่งต่าง ๆ +
คุณเป็นคนที่ให้ลุคสบาย ๆ แต่ในขณะเดียวกัน ก็แฝงไปด้วยความมั่นใจในตนเอง + มีอารมณ์ขัน +
และเป็นคนที่มักจะปล่อยวางในสถานการณ์ที่ควบคุมไม่ได้ได้ดี + แต่ในบางครั้งด้วยความที่คุณเป็นคนคารมคมคาย +

+ คนอื่นอาจมองว่าคุณเป็นคนเจ้าชู้ ไม่จริงจังกับความสัมพันธ์ + จากการที่คุณสามารถเข้ากับคนง่าย +
คุณอาจจะต้องใช้ระยะเวลาและความจริงใจในการพิสูจน์ +
ซึ่งหากผ่านพ้นไปได้แล้วจะได้เจอกับความรักที่คุณตามหาแน่นอน +

+ “Love has absolutely no pattern, +
and no one will ever be perfect“ +
—Taylor swift + diff --git a/src/pages/cocktail/ginandtonic.astro b/src/pages/cocktail/ginandtonic.astro new file mode 100644 index 0000000..ea33a7d --- /dev/null +++ b/src/pages/cocktail/ginandtonic.astro @@ -0,0 +1,25 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import Gin from "@/assets/elements/gin-and-tonic.png"; +--- + + + ด้วยรสซิตรัสจาก “จิน” + สุรากลั่นจากเมล็ดข้าวซึ่งมีกลิ่นหอมสดชื่นอันเป็นเอกลักษณ์จากผลจูนิเปอร์ + ผสมผสานกับ “โทนิค” เครื่องดื่มอัดแก๊สรสขมเพิ่มความซาบซ่า + ทำให้ค็อกเทลรสชาติจัดจ้านนี้กลายมาเป็นค็อกเทลยอดนิยมทั่วโลก +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว +
คุณเป็นมนุษย์ผู้รักความสมบูรณ์แบบ + มักจะรู้สึกหงุดหงิดเมื่อผู้คนรอบข้างปฏิบัติตัวไม่ตรงตามสิ่งที่คุณคาดหวังให้พวกเขาทำ + + +
คุณเป็นคนที่หนักแน่นและซื่อสัตย์กับความรู้สึกของตนเอง +
ยอมหักไม่ยอมงอ นอกจากนี้คุณยังใช้ชีวิตอย่างมีแบบแผน +
และตั้งอยู่บนหลักความเป็นจริง +

+ แต่ในบางครั้งคุณยึดติดกับแบบแผนของตนเองมากเกินไปจนละเลยความรู้สึกของคนรอบตัว + +
อย่าลืมที่จะปลอยวางสิ่งที่คุณยึดถือไว้ + และหันมาใส่ใจสิ่งที่เกิดขึ้นรอบตัว โดยพยายามไม่ละเลยความรู้สึกตนเองด้วยล่ะ + diff --git a/src/pages/cocktail/lavenderlemonade.astro b/src/pages/cocktail/lavenderlemonade.astro new file mode 100644 index 0000000..56b58f1 --- /dev/null +++ b/src/pages/cocktail/lavenderlemonade.astro @@ -0,0 +1,27 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import Lavender from "@/assets/elements/lavender-lemonade.png"; +--- + + + ลาเวนเดอร์ เลมอนเนด จิน ค็อกเทลสีม่วงน่าค้นหา +
พร้อมส่วนผสมที่ประกอบไปด้วยจิน, น้ำเลม่อน, น้ำเชื่อมลาเวนเดอร์ + และน้ำโซดา สร้างความซับซ้อนในรสชาติ มีรสฝาดจากน้ำมะนาว +
และกลิ่นหอมหวานจากดอกลาเวนเดอร์ เป็นเครื่องดื่มที่มีความลึกซึ้งในรสชาติ +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว + คุณเป็นคนที่อ่อนโยนและลึกซึ้งในเรื่องของความสัมพันธ์ + คุณเป็นคนละเอียดในทุกการกระทำ +
และมักจะมีความเห็นอกเห็นใจผู้อื่นอยู่เสมอ + ทำให้ใครหลายคนมักนิยามคุณว่าคุณคือผู้ฟังที่ดี +

+ คุณมีมุมที่เป็นคนอ่อนไหวได้ง่าย +
ในบางครั้งคุณอาจจะนึกถึงการกระทำ หรือคำพูดที่เกิดขึ้นในอดีต +
ที่ทำให้คุณรู้สึกไม่ดีอยากจะกลับไปแก้ไข + แต่อย่าลืมที่จะพยายามปล่อยวางเรื่องทุกข์ใจเหล่านี้โดยหันมาโอบกอดตัวเองให้แน่นในการให้อภัย + ละทิ้งซึ่งอดีต และเดินหน้าไปต่ออย่างภาคภูมินะ +

+ “Love has absolutely no pattern, +
and no one will ever be perfect“ +
—Taylor swift + diff --git a/src/pages/cocktail/pinacolada.astro b/src/pages/cocktail/pinacolada.astro new file mode 100644 index 0000000..bddb1c7 --- /dev/null +++ b/src/pages/cocktail/pinacolada.astro @@ -0,0 +1,27 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import Pina from "@/assets/elements/pina-colada.png"; +--- + + + น้ำสับปะรด, รัม, และครีมมะพร้าว +
ทั้งสามสิ่งนี้คือส่วนผสมหลักที่ประกอบออกมาเป็นพีน่า โคลาดา + เครื่องดื่มที่ให้ความรู้สึกถึงฤดูร้อนที่แดดจ้า +
เมื่อดื่มรู้สึกสดชื่นจากส่วนผสมหลักอย่างน้ำสับปะรด +
ที่มีรสชาติเปรี้ยว ตัดกับความหวาานของครีมมะพร้าว +
และความกลมกล่อมจากเหล้ารัม +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว เป็นมนุษย์ที่มีความทะเยอทะยาน + และมีแพชชั่นที่ร้อนแรงในการทำสิ่งต่าง ๆ +
คุณเป็นคนที่มีความอิสระโลดโผนในตัวสูง มีความคิดเป็นของตนเอง + และมีความมั่นใจในการทำสิ่งต่าง ๆ เปรียบเหมือนบรรยากาศริมชายทะเลที่มีแดดจ้า + +

+ บางครั้งคุณอาจจะเบื่อกับการใช้ชีวิต ทำให้คุณมักจะหาสิ่งใหม่ ๆ ทำ +
เพื่อเป็นท้าทายตนเอง คุณมักจะมีมุมที่มีความเป็นศิลปินในตนเองสูง + ทำให้หลาย ๆ คนอาจจะตามคุณไม่ทัน +

+ “Love has absolutely no pattern, +
and no one will ever be perfect“ +
—Taylor swift + diff --git a/src/pages/cocktail/sangria.astro b/src/pages/cocktail/sangria.astro new file mode 100644 index 0000000..2b20c88 --- /dev/null +++ b/src/pages/cocktail/sangria.astro @@ -0,0 +1,29 @@ +--- +import CocktailCard from "@/layouts/CocktailCard.astro"; +import SBSangria from "@/assets/elements/summer-berry-sangria.png"; +--- + + + เครื่องดื่มสีสดใสที่ประกอบไปด้วยไวน์ขาว, เตกีล่า, น้ำผลไม้, บลูเบอร์รี่, + สตรอเบอร์รี่, ราสเบอร์รี่ และ เลม่อนโซดา +

+ ซัมเมอร์ เบอร์รี่ แซงเกรียถูกจัดว่าเป็นเครื่องดื่มที่มักเสิร์ฟในงานสังสรรค์ + และเป็นที่นิยมในประเทศสเปน ซึ่งเป็นแหล่งกำเนิดของเครื่องดื่มชนิดนี้ +

+ คุณเปรียบเสมือนค็อกเทลดังกล่าว + คุณชื่นชอบในการอยู่ในที่ที่คุณรู้สึกสบายใจหรือกับกลุ่มคนที่เป็นที่พักพิงทางใจ + +
ด้วยค็อกเทลดังกล่าวประกอบไปด้วยวัตถุดิบที่ดื่มได้ง่าย +
มีรสชาติกล่มกล่อม เหมือนกับตัวคุณที่มักจะปรับตัวเข้ากับ +
สังคมใหม่ ๆ ได้ง่ายกว่าใครหลายคน +

+ คุณชื่นชอบที่จะช่วยเหลือผู้อื่นและทำให้ผู้อื่นมีความสุข +
จนบางครั้ง + อาจเป็นตัวคุณเองที่ไม่สบายใจในการตัดสินใจทำบางอย่างเพื่อผู้อื่น + อย่าลืมหันมาให้ความสนใจกับตนเอง +
โดยให้การมอบสิ่งที่ดีแก่ผู้อื่นของคุณสมดุลกับการรักษาใจคุณเองด้วยนะ +

+ “Love has absolutely no pattern, +
and no one will ever be perfect“ +
—Taylor swift + diff --git a/src/style.css b/src/style.css index 3d04768..d449964 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,6 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-Text.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-Text.ttf"); font-weight: normal; font-style: normal; font-display: swap; @@ -8,7 +8,7 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-Bold.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf"); font-weight: bold; font-style: normal; font-display: swap; @@ -16,7 +16,7 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-SemiBold.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf"); font-weight: 600; font-style: normal; font-display: swap; @@ -24,7 +24,7 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-Medium.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf"); font-weight: 500; font-style: normal; font-display: swap; @@ -32,7 +32,7 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-Light.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-Light.ttf"); font-weight: 300; font-style: normal; font-display: swap; @@ -40,7 +40,7 @@ @font-face { font-family: "SukhumvitSet"; - src: url("/fonts/SukhumvitSet/SukhumvitSet-Thin.ttf"); + src: url("/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf"); font-weight: 100; font-style: normal; font-display: swap; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 00dc3de..0139479 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -9,8 +9,34 @@ export default { fontFamily: { sans: ["SukhumvitSet", ...defaultTheme.fontFamily.sans], }, + backgroundImage: { + raspberry: + 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #F9998C -10.14%, #650C17 98.39%)', + raspberrybox: + "linear-gradient(166deg, #FFFDF9 -16.07%, #ECC7BB 81.36%)", + cosmo: + 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #F9A68B -10.14%, #C04343 98.39%)', + cosmobox: "linear-gradient(166deg, #FFFFFF -16.07%, #ECC8BB 81.36%)", + pina: 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #F9C08C -10.14%, #CB6100 98.39%)', + pinabox: "linear-gradient(166deg, #FFFDF9 -16.07%, #ECD3BB 81.36%)", + gin: 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #B2C196 -10.14%, #0D5649 98.39%)', + ginbox: "linear-gradient(166deg, #FFFFFF -16.07%, #C7DBB7 81.36%)", + lagoon: + 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #84C9EF -10.14%, #0D3C56 98.39%)', + lagoonbox: "linear-gradient(166deg, #FAFEFF -16.07%, #B1DCFC 81.36%)", + lalemon: + 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #D09DDE -10.14%, #30255A 98.39%)', + lalemonbox: "linear-gradient(166deg, #FBF6FE -16.07%, #E2C9E8 81.36%)", + }, colors: { mutedpurple: "#864974", + mutedbrown: "#6D5958", + salmon: "#EB7676", + peach: "#DE7671", + pineapple: "#E5986C", + leaf: "#547937", + tropical: "#3884EB", + lavender: "#8D61A7", }, }, },