feat: Migrate Astro to root - Replace Next.js completely
- Removed Next.js project (src, app, components, etc.) - Moved Astro from dealplustech-astro/ to root - Updated Dockerfile for Astro root deployment - All PDPA compliance features preserved: * Cookie consent banner * Consent logging API with SQLite * Admin dashboard (/admin/consent-logs) * Privacy Policy (Thai, PDPA-compliant) * Terms & Conditions (Thai) - 15 pages: homepage, 6 products, 3 blog posts, legal pages, admin - Build: 660ms, all pages generated successfully
This commit is contained in:
Kunthawat
157
src/styles/global.css
Normal file
157
src/styles/global.css
Normal file
@@ -0,0 +1,157 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Deal Plus Tech - Industrial Theme */
|
||||
@theme {
|
||||
/* Primary Colors - Green for trust and growth */
|
||||
--color-primary-50: #f0fdf4;
|
||||
--color-primary-100: #dcfce7;
|
||||
--color-primary-200: #bbf7d0;
|
||||
--color-primary-300: #86efac;
|
||||
--color-primary-400: #4ade80;
|
||||
--color-primary-500: #22c55e;
|
||||
--color-primary-600: #16a34a;
|
||||
--color-primary-700: #15803d;
|
||||
--color-primary-800: #166534;
|
||||
--color-primary-900: #14532d;
|
||||
|
||||
/* Secondary Colors - Slate grays for industrial look */
|
||||
--color-secondary-50: #f8fafc;
|
||||
--color-secondary-100: #f1f5f9;
|
||||
--color-secondary-200: #e2e8f0;
|
||||
--color-secondary-300: #cbd5e1;
|
||||
--color-secondary-400: #94a3b8;
|
||||
--color-secondary-500: #64748b;
|
||||
--color-secondary-600: #475569;
|
||||
--color-secondary-700: #334155;
|
||||
--color-secondary-800: #1e293b;
|
||||
--color-secondary-900: #0f172a;
|
||||
|
||||
/* Accent Colors - Yellow for highlights */
|
||||
--color-accent-400: #facc15;
|
||||
--color-accent-500: #eab308;
|
||||
--color-accent-600: #ca8a04;
|
||||
|
||||
/* Industrial custom colors */
|
||||
--color-industrial-dark: #1a1a1a;
|
||||
--color-industrial-light: #f5f5f5;
|
||||
|
||||
/* Font - Kanit for Thai support */
|
||||
--font-sans: 'Kanit', system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-industrial: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-bold: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/* Base font size */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Responsive font sizes for larger screens */
|
||||
@media (min-width: 1280px) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
html {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
html {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-secondary-900 antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold tracking-tight;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 bg-primary-600 text-white font-semibold rounded-lg
|
||||
hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
|
||||
active:translate-y-0.5 text-base md:text-lg;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 bg-secondary-800 text-white font-semibold rounded-lg
|
||||
hover:bg-secondary-900 transition-all duration-200 text-base md:text-lg;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
|
||||
hover:bg-primary-600 hover:text-white transition-all duration-200 text-base md:text-lg;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@apply text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 mt-4;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300
|
||||
hover:shadow-industrial hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.card-industrial {
|
||||
@apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
|
||||
}
|
||||
|
||||
.industrial-badge {
|
||||
@apply inline-flex items-center px-3 py-1 md:px-4 md:py-2 bg-primary-600 text-white text-sm md:text-base font-semibold rounded;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
|
||||
}
|
||||
|
||||
/* Responsive text utilities */
|
||||
.text-responsive-sm {
|
||||
@apply text-sm md:text-base lg:text-lg xl:text-xl;
|
||||
}
|
||||
|
||||
.text-responsive-base {
|
||||
@apply text-base md:text-lg lg:text-xl xl:text-2xl;
|
||||
}
|
||||
|
||||
.text-responsive-lg {
|
||||
@apply text-lg md:text-xl lg:text-2xl xl:text-3xl;
|
||||
}
|
||||
|
||||
.text-responsive-xl {
|
||||
@apply text-xl md:text-2xl lg:text-3xl xl:text-4xl;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-secondary-900 antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold tracking-tight;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg
|
||||
hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
|
||||
active:translate-y-0.5;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 bg-secondary-800 text-white font-semibold rounded-lg
|
||||
hover:bg-secondary-900 transition-all duration-200;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
|
||||
hover:bg-primary-600 hover:text-white transition-all duration-200;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@apply text-lg md:text-xl text-secondary-600 mt-4;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300
|
||||
hover:shadow-industrial hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.card-industrial {
|
||||
@apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
|
||||
}
|
||||
|
||||
.industrial-badge {
|
||||
@apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Typography Best Practices:
|
||||
* - Use .text-base (16px) as minimum for readable text
|
||||
* - Avoid .text-xs (12px) and .text-sm (14px) for body content
|
||||
* - For less emphasis, use color (text-secondary-600) not smaller size
|
||||
*/
|
||||
Reference in New Issue
Block a user