Initial commit - Deal Plus Tech Astro Website

✅ 53 pages (34 products + corporate)
✅ All logo images
✅ Nginx Dockerfile (production-ready)
✅ PDPA compliant (cookie consent)
✅ Modern design with Kanit font
✅ Line + Phone buttons on products

Built: 2026-03-13

src/styles/global.css

@@ -0,0 +1,178 @@
+@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* Responsive typography for big screens */
+  html {
+    font-size: 18px;
+    scroll-behavior: smooth;
+  }
+
+  @media (min-width: 1280px) {
+    html {
+      font-size: 20px;
+    }
+  }
+
+  @media (min-width: 1536px) {
+    html {
+      font-size: 22px;
+    }
+  }
+
+  @media (min-width: 1920px) {
+    html {
+      font-size: 24px;
+    }
+  }
+
+  body {
+    @apply font-sans text-secondary-800 antialiased;
+  }
+
+  /* Modern scrollbar */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-secondary-100;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-primary-500 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-600;
+  }
+}
+
+@layer components {
+  /* Modern card with hover effects */
+  .card {
+    @apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 
+           hover:shadow-2xl hover:-translate-y-1;
+  }
+
+  /* Gradient button with modern effects */
+  .btn-primary {
+    @apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-3 rounded-xl
+           font-medium shadow-lg hover:shadow-xl transition-all duration-300
+           hover:from-primary-500 hover:to-primary-400 active:scale-95;
+  }
+
+  .btn-secondary {
+    @apply bg-white text-primary-600 px-8 py-3 rounded-xl border-2 border-primary-500
+           font-medium shadow-md hover:shadow-lg transition-all duration-300
+           hover:bg-primary-50 active:scale-95;
+  }
+
+  /* Product card styling */
+  .product-card {
+    @apply card cursor-pointer;
+  }
+
+  .product-card-image {
+    @apply relative overflow-hidden bg-gradient-to-br from-secondary-50 to-secondary-100
+           aspect-square flex items-center justify-center;
+  }
+
+  .product-card-image img {
+    @apply w-full h-full object-contain p-6 transition-transform duration-500
+           group-hover:scale-110;
+  }
+
+  /* Modern section styling */
+  .section {
+    @apply py-16 md:py-24;
+  }
+
+  .section-title {
+    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-6
+           animate-fade-in;
+  }
+
+  .section-subtitle {
+    @apply text-lg md:text-xl text-secondary-600 max-w-3xl animate-fade-in;
+  }
+
+  /* Container with modern spacing */
+  .container-custom {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  /* Gradient background */
+  .gradient-bg {
+    @apply bg-gradient-to-br from-primary-50 via-white to-accent-50;
+  }
+
+  /* Modern navbar */
+  .navbar {
+    @apply sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-secondary-200
+           transition-all duration-300;
+  }
+
+  /* Footer styling */
+  .footer {
+    @apply bg-gradient-to-br from-secondary-900 to-secondary-800 text-white;
+  }
+
+  /* Table styling - responsive */
+  .modern-table {
+    @apply w-full border-collapse rounded-xl overflow-hidden shadow-lg;
+  }
+
+  .modern-table th {
+    @apply bg-primary-600 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider;
+  }
+
+  .modern-table td {
+    @apply px-6 py-4 border-b border-secondary-200;
+  }
+
+  .modern-table tr:last-child td {
+    @apply border-b-0;
+  }
+
+  .modern-table tr:hover td {
+    @apply bg-primary-50;
+  }
+
+  /* Badge styling */
+  .badge {
+    @apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium
+           bg-primary-100 text-primary-700;
+  }
+
+  /* Modern input fields */
+  .input-modern {
+    @apply w-full px-4 py-3 rounded-xl border-2 border-secondary-300
+           focus:border-primary-500 focus:ring-4 focus:ring-primary-100
+           transition-all duration-300 outline-none;
+  }
+}
+
+@layer utilities {
+  /* Animation utilities */
+  .animate-on-scroll {
+    @apply opacity-0 translate-y-4 transition-all duration-700;
+  }
+
+  .animate-on-scroll.visible {
+    @apply opacity-100 translate-y-0;
+  }
+
+  /* Gradient text */
+  .gradient-text {
+    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
+  }
+
+  /* Glass morphism */
+  .glass {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20;
+  }
+}