Redesign: Complete AI transformation with new branding
Features: - New 5-color palette (Yellow, Black, Blue, Purple, Teal) - White footer with updated navigation - Homepage redesigned with Hero, Tech Stack, Process, FAQ, Blog sections - 4 new AI service pages (Strategy, Automation, Training, Analytics) - Modern effects: glass morphism, hover animations, gradients - Removed all 'รับปรึกษา ฟรี' CTAs, replaced with Phone/Line - Updated content to AI Transformation theme - Port changed to 80 for Easypanel deployment Breaking Changes: - Old service pages removed (replaced with AI-focused services) - Layout structure updated with new color variables - CSS completely rewritten with new design system
This commit is contained in:
Kunthawat Greethong
@@ -1,12 +1,30 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Primary Colors */
|
||||
--color-primary: #fed400;
|
||||
--color-primary-hover: #e5c000;
|
||||
--color-secondary: #000000;
|
||||
--color-accent: #e8e8e8;
|
||||
--color-text: #0f0f0f;
|
||||
--color-primary-light: #fff4b3;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: #000000;
|
||||
--color-secondary-light: #1a1a1a;
|
||||
|
||||
/* AI/Tech Accent Colors */
|
||||
--color-accent-blue: #2563eb;
|
||||
--color-accent-blue-hover: #1d4ed8;
|
||||
--color-accent-purple: #7c3aed;
|
||||
--color-accent-purple-hover: #6d28d9;
|
||||
--color-accent-teal: #0891b2;
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-gray-light: #f9fafb;
|
||||
--color-gray: #6b7280;
|
||||
--color-gray-dark: #374151;
|
||||
--color-text: #0f0f0f;
|
||||
--color-white: #ffffff;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Noto Sans Thai', system-ui, sans-serif;
|
||||
--font-display: 'Kanit', var(--font-sans);
|
||||
}
|
||||
@@ -20,16 +38,146 @@
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Smooth animations */
|
||||
* {
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Glass Morphism */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Card Hover Effects */
|
||||
.card-hover {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Gradient Backgrounds */
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%);
|
||||
}
|
||||
|
||||
.gradient-ai {
|
||||
background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%);
|
||||
}
|
||||
|
||||
.gradient-hero {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%);
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-secondary);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-white);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-secondary-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
|
||||
color: var(--color-white);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-accent:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text Colors */
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-secondary { color: var(--color-secondary); }
|
||||
.text-accent-blue { color: var(--color-accent-blue); }
|
||||
.text-accent-purple { color: var(--color-accent-purple); }
|
||||
|
||||
/* Background Colors */
|
||||
.bg-primary { background-color: var(--color-primary); }
|
||||
.bg-secondary { background-color: var(--color-secondary); }
|
||||
.bg-accent-blue { background-color: var(--color-accent-blue); }
|
||||
.bg-accent-purple { background-color: var(--color-accent-purple); }
|
||||
.bg-gray-light { background-color: var(--color-gray-light); }
|
||||
|
||||
/* Hover Effects */
|
||||
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
|
||||
}
|
||||
|
||||
/* Animation Utilities */
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-delayed {
|
||||
animation: float 6s ease-in-out 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Parallax Effect Class */
|
||||
.parallax {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user