feat: add landing page

This commit is contained in:
Sosokker 2025-02-13 05:19:57 +07:00
parent 1c0a42a111
commit 05dd69e957
6 changed files with 276 additions and 177 deletions

View File

@ -1,21 +1,28 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Open_Sans, Roboto_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
const geistSans = Geist({ const openSans = Open_Sans({
variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
display: "swap",
variable: "--font-opensans",
}); });
const geistMono = Geist_Mono({ const robotoMono = Roboto_Mono({
variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
display: "swap",
variable: "--font-roboto-mono",
}); });
// const geistMono = Geist_Mono({
// variable: "--font-geist-mono",
// subsets: ["latin"],
// });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "ForFarm - Smart Farming Solutions",
description: "Generated by create next app", description: "Optimize your agricultural business with AI-driven insights and real-time data.",
}; };
export default function RootLayout({ export default function RootLayout({
@ -26,7 +33,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head /> <head />
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> <body className={`${openSans.variable} ${robotoMono.variable} font-sans antialiased`}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem> <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<div className="relative flex min-h-screen flex-col"> <div className="relative flex min-h-screen flex-col">
<div className="flex-1 bg-background">{children}</div> <div className="flex-1 bg-background">{children}</div>

View File

@ -1,100 +1,68 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Cloud, BarChart, Zap } from "lucide-react";
import { Leaf } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Home() { export default function Home() {
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className="min-h-screen bg-gradient-to-br from-green-400 via-green-600 to-green-900 text-white">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> <header className="container mx-auto px-4 py-6 flex justify-between items-center">
<Image <Link href="/" className="flex items-center space-x-2">
className="dark:invert" <span className="flex font-bold text-xl">
src="/next.svg" <Leaf />
alt="Next.js logo" ForFarm
width={180} </span>
height={38} </Link>
priority <span className="flex space-x-4 items-center">
/> <Link href="/documentation" className="hover:text-gray-200 transition-colors font-bold">
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> Documentation
<li className="mb-2"> </Link>
Get started by editing{" "} <Link
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold"> href="/auth/signup"
app/page.tsx className="bg-white text-blue-600 font-bold px-4 py-2 rounded-full hover:bg-gray-100 transition-colors">
</code> Get started
. </Link>
</li> </span>
<li>Save and see your changes instantly.</li> </header>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row"> <main className="container mx-auto px-4 py-20 text-center">
<a <div className="max-w-3xl mx-auto">
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5" <Image
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" src="/water-pot.png"
target="_blank" alt="ForFarm Icon"
rel="noopener noreferrer" width={100}
> height={100}
<Image className="mx-auto mb-8 rounded-2xl"
className="dark:invert" />
src="/vercel.svg" <h1 className="text-6xl font-bold mb-6">Your Smart Farming Platform</h1>
alt="Vercel logomark" <p className="text-xl md:text-2xl mb-12 text-gray-200">
width={20} It's a smart and easy way to optimize your agricultural business, with the help of AI-driven insights and
height={20} real-time data.
/> </p>
Deploy now <Link href="/auth/signin">
</a> <Button className="bg-black text-white text-md font-bold px-4 py-6 rounded-full hover:bg-gray-600">
<a Manage your farm
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44" </Button>
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" </Link>
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div> </div>
</main> </main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a {/* <div className="absolute -inset-2 bg-gradient-to-r from-green-600 to-blue-600 rounded-lg blur opacity-10"></div> */}
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <footer className="container mx-auto px-4 py-6 text-center text-sm text-gray-300">
target="_blank" <Link href="#" className="hover:text-white transition-colors">
rel="noopener noreferrer" Terms
> </Link>
<Image {" • "}
aria-hidden <Link href="#" className="hover:text-white transition-colors">
src="/file.svg" Privacy
alt="File icon" </Link>
width={16} {" • "}
height={16} <Link href="#" className="hover:text-white transition-colors">
/> Cookies
Learn </Link>
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org
</a>
</footer> </footer>
</div> </div>
); );

View File

@ -0,0 +1,30 @@
"use client"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

View File

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@radix-ui/react-avatar": "^1.1.3", "@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-checkbox": "^1.1.4",
"@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.2", "@radix-ui/react-label": "^2.1.2",
@ -17,6 +18,7 @@
"@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.8", "@radix-ui/react-tooltip": "^1.1.8",
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.16",
"@tanstack/react-query": "^5.66.0",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
@ -24,8 +26,10 @@
"next-themes": "^0.4.4", "next-themes": "^0.4.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"tailwind-merge": "^3.0.1", "tailwind-merge": "^3.0.1",
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7",
"zod": "^3.24.2"
}, },
"devDependencies": { "devDependencies": {
"@eslint/eslintrc": "^3", "@eslint/eslintrc": "^3",

View File

@ -11,6 +11,9 @@ importers:
'@radix-ui/react-avatar': '@radix-ui/react-avatar':
specifier: ^1.1.3 specifier: ^1.1.3
version: 1.1.3(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 1.1.3(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-checkbox':
specifier: ^1.1.4
version: 1.1.4(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-dialog': '@radix-ui/react-dialog':
specifier: ^1.1.6 specifier: ^1.1.6
version: 1.1.6(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 1.1.6(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -32,6 +35,9 @@ importers:
'@tailwindcss/typography': '@tailwindcss/typography':
specifier: ^0.5.16 specifier: ^0.5.16
version: 0.5.16(tailwindcss@3.4.17) version: 0.5.16(tailwindcss@3.4.17)
'@tanstack/react-query':
specifier: ^5.66.0
version: 5.66.0(react@19.0.0)
class-variance-authority: class-variance-authority:
specifier: ^0.7.1 specifier: ^0.7.1
version: 0.7.1 version: 0.7.1
@ -53,12 +59,18 @@ importers:
react-dom: react-dom:
specifier: ^19.0.0 specifier: ^19.0.0
version: 19.0.0(react@19.0.0) version: 19.0.0(react@19.0.0)
react-hook-form:
specifier: ^7.54.2
version: 7.54.2(react@19.0.0)
tailwind-merge: tailwind-merge:
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1 version: 3.0.1
tailwindcss-animate: tailwindcss-animate:
specifier: ^1.0.7 specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.17) version: 1.0.7(tailwindcss@3.4.17)
zod:
specifier: ^3.24.2
version: 3.24.2
devDependencies: devDependencies:
'@eslint/eslintrc': '@eslint/eslintrc':
specifier: ^3 specifier: ^3
@ -400,6 +412,19 @@ packages:
'@types/react-dom': '@types/react-dom':
optional: true optional: true
'@radix-ui/react-checkbox@1.1.4':
resolution: {integrity: sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-collection@1.1.2': '@radix-ui/react-collection@1.1.2':
resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==} resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
peerDependencies: peerDependencies:
@ -672,6 +697,15 @@ packages:
'@types/react': '@types/react':
optional: true optional: true
'@radix-ui/react-use-previous@1.1.0':
resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-use-rect@1.1.0': '@radix-ui/react-use-rect@1.1.0':
resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==} resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
peerDependencies: peerDependencies:
@ -723,6 +757,14 @@ packages:
peerDependencies: peerDependencies:
tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1' tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
'@tanstack/query-core@5.66.0':
resolution: {integrity: sha512-J+JeBtthiKxrpzUu7rfIPDzhscXF2p5zE/hVdrqkACBP8Yu0M96mwJ5m/8cPPYQE9aRNvXztXHlNwIh4FEeMZw==}
'@tanstack/react-query@5.66.0':
resolution: {integrity: sha512-z3sYixFQJe8hndFnXgWu7C79ctL+pI0KAelYyW+khaNJ1m22lWrhJU2QrsTcRKMuVPtoZvfBYrTStIdKo+x0Xw==}
peerDependencies:
react: ^18 || ^19
'@types/estree@1.0.6': '@types/estree@1.0.6':
resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
@ -1798,6 +1840,12 @@ packages:
peerDependencies: peerDependencies:
react: ^19.0.0 react: ^19.0.0
react-hook-form@7.54.2:
resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19
react-is@16.13.1: react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@ -2171,6 +2219,9 @@ packages:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'} engines: {node: '>=10'}
zod@3.24.2:
resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
snapshots: snapshots:
'@alloc/quick-lru@5.2.0': {} '@alloc/quick-lru@5.2.0': {}
@ -2427,6 +2478,22 @@ snapshots:
'@types/react': 19.0.8 '@types/react': 19.0.8
'@types/react-dom': 19.0.3(@types/react@19.0.8) '@types/react-dom': 19.0.3(@types/react@19.0.8)
'@radix-ui/react-checkbox@1.1.4(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@radix-ui/primitive': 1.1.1
'@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.8)(react@19.0.0)
'@radix-ui/react-context': 1.1.1(@types/react@19.0.8)(react@19.0.0)
'@radix-ui/react-presence': 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.8)(react@19.0.0)
'@radix-ui/react-use-previous': 1.1.0(@types/react@19.0.8)(react@19.0.0)
'@radix-ui/react-use-size': 1.1.0(@types/react@19.0.8)(react@19.0.0)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
optionalDependencies:
'@types/react': 19.0.8
'@types/react-dom': 19.0.3(@types/react@19.0.8)
'@radix-ui/react-collection@1.1.2(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': '@radix-ui/react-collection@1.1.2(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies: dependencies:
'@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.8)(react@19.0.0) '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.8)(react@19.0.0)
@ -2692,6 +2759,12 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/react': 19.0.8 '@types/react': 19.0.8
'@radix-ui/react-use-previous@1.1.0(@types/react@19.0.8)(react@19.0.0)':
dependencies:
react: 19.0.0
optionalDependencies:
'@types/react': 19.0.8
'@radix-ui/react-use-rect@1.1.0(@types/react@19.0.8)(react@19.0.0)': '@radix-ui/react-use-rect@1.1.0(@types/react@19.0.8)(react@19.0.0)':
dependencies: dependencies:
'@radix-ui/rect': 1.1.0 '@radix-ui/rect': 1.1.0
@ -2735,6 +2808,13 @@ snapshots:
postcss-selector-parser: 6.0.10 postcss-selector-parser: 6.0.10
tailwindcss: 3.4.17 tailwindcss: 3.4.17
'@tanstack/query-core@5.66.0': {}
'@tanstack/react-query@5.66.0(react@19.0.0)':
dependencies:
'@tanstack/query-core': 5.66.0
react: 19.0.0
'@types/estree@1.0.6': {} '@types/estree@1.0.6': {}
'@types/json-schema@7.0.15': {} '@types/json-schema@7.0.15': {}
@ -4008,6 +4088,10 @@ snapshots:
react: 19.0.0 react: 19.0.0
scheduler: 0.25.0 scheduler: 0.25.0
react-hook-form@7.54.2(react@19.0.0):
dependencies:
react: 19.0.0
react-is@16.13.1: {} react-is@16.13.1: {}
react-remove-scroll-bar@2.3.8(@types/react@19.0.8)(react@19.0.0): react-remove-scroll-bar@2.3.8(@types/react@19.0.8)(react@19.0.0):
@ -4497,3 +4581,5 @@ snapshots:
yaml@2.7.0: {} yaml@2.7.0: {}
yocto-queue@0.1.0: {} yocto-queue@0.1.0: {}
zod@3.24.2: {}

View File

@ -8,84 +8,88 @@ export default {
"./app/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
extend: { extend: {
colors: { fontFamily: {
background: 'hsl(var(--background))', sans: ["var(--font-opensans)"],
foreground: 'hsl(var(--foreground))', mono: ["var(--font-roboto-mono)"],
card: { },
DEFAULT: 'hsl(var(--card))', colors: {
foreground: 'hsl(var(--card-foreground))' background: "hsl(var(--background))",
}, foreground: "hsl(var(--foreground))",
popover: { card: {
DEFAULT: 'hsl(var(--popover))', DEFAULT: "hsl(var(--card))",
foreground: 'hsl(var(--popover-foreground))' foreground: "hsl(var(--card-foreground))",
}, },
primary: { popover: {
DEFAULT: 'hsl(var(--primary))', DEFAULT: "hsl(var(--popover))",
foreground: 'hsl(var(--primary-foreground))' foreground: "hsl(var(--popover-foreground))",
}, },
secondary: { primary: {
DEFAULT: 'hsl(var(--secondary))', DEFAULT: "hsl(var(--primary))",
foreground: 'hsl(var(--secondary-foreground))' foreground: "hsl(var(--primary-foreground))",
}, },
muted: { secondary: {
DEFAULT: 'hsl(var(--muted))', DEFAULT: "hsl(var(--secondary))",
foreground: 'hsl(var(--muted-foreground))' foreground: "hsl(var(--secondary-foreground))",
}, },
accent: { muted: {
DEFAULT: 'hsl(var(--accent))', DEFAULT: "hsl(var(--muted))",
foreground: 'hsl(var(--accent-foreground))' foreground: "hsl(var(--muted-foreground))",
}, },
destructive: { accent: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: "hsl(var(--accent))",
foreground: 'hsl(var(--destructive-foreground))' foreground: "hsl(var(--accent-foreground))",
}, },
border: 'hsl(var(--border))', destructive: {
input: 'hsl(var(--input))', DEFAULT: "hsl(var(--destructive))",
ring: 'hsl(var(--ring))', foreground: "hsl(var(--destructive-foreground))",
chart: { },
'1': 'hsl(var(--chart-1))', border: "hsl(var(--border))",
'2': 'hsl(var(--chart-2))', input: "hsl(var(--input))",
'3': 'hsl(var(--chart-3))', ring: "hsl(var(--ring))",
'4': 'hsl(var(--chart-4))', chart: {
'5': 'hsl(var(--chart-5))' "1": "hsl(var(--chart-1))",
}, "2": "hsl(var(--chart-2))",
sidebar: { "3": "hsl(var(--chart-3))",
DEFAULT: 'hsl(var(--sidebar-background))', "4": "hsl(var(--chart-4))",
foreground: 'hsl(var(--sidebar-foreground))', "5": "hsl(var(--chart-5))",
primary: 'hsl(var(--sidebar-primary))', },
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', sidebar: {
accent: 'hsl(var(--sidebar-accent))', DEFAULT: "hsl(var(--sidebar-background))",
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', foreground: "hsl(var(--sidebar-foreground))",
border: 'hsl(var(--sidebar-border))', primary: "hsl(var(--sidebar-primary))",
ring: 'hsl(var(--sidebar-ring))' "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
} accent: "hsl(var(--sidebar-accent))",
}, "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
borderRadius: { border: "hsl(var(--sidebar-border))",
lg: 'var(--radius)', ring: "hsl(var(--sidebar-ring))",
md: 'calc(var(--radius) - 2px)', },
sm: 'calc(var(--radius) - 4px)' },
}, borderRadius: {
keyframes: { lg: "var(--radius)",
dropAnimation: { md: "calc(var(--radius) - 2px)",
'0%': { sm: "calc(var(--radius) - 4px)",
transform: 'translateY(-50px)', },
borderRadius: '50%', keyframes: {
width: '1.5rem', dropAnimation: {
height: '1.5rem' "0%": {
}, transform: "translateY(-50px)",
'100%': { borderRadius: "50%",
transform: 'translateY(100vh)', width: "1.5rem",
borderRadius: '50% 50% 50% 50%', height: "1.5rem",
width: '1rem', },
height: '2rem' "100%": {
} transform: "translateY(100vh)",
} borderRadius: "50% 50% 50% 50%",
}, width: "1rem",
animation: { height: "2rem",
drop: 'dropAnimation 2s ease-in-out infinite' },
} },
} },
animation: {
drop: "dropAnimation 2s ease-in-out infinite",
},
},
}, },
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
} satisfies Config; } satisfies Config;