implement global styles and configure static export for restaurant location pages

next.config.ts

@@ -1,7 +1,11 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: 'export',
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

src/app/globals.css

@@ -28,21 +28,22 @@ body {
   overflow-x: hidden;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   font-family: var(--font-heading);
   color: var(--color-heading);
 }
 
 .grand-text {
   font-family: var(--font-heading);
-  background: linear-gradient(
+  background: linear-gradient(45deg,
-    45deg,
       #d3cab3 0%,
       #d28839 25%,
       #c49c5c 50%,
       #d28839 75%,
-    #d3cab3 100%
+      #d3cab3 100%);
-  );
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
@@ -53,8 +54,13 @@ h1, h2, h3, h4 {
 }
 
 @keyframes colorShift {
-  0% { background-position: 0% center; }
+  0% {
-  100% { background-position: 200% center; }
+    background-position: 0% center;
+  }
+
+  100% {
+    background-position: 200% center;
+  }
 }
 
 
@@ -70,20 +76,26 @@ h1, h2, h3, h4 {
   left: -100%;
   width: 50%;
   height: 100%;
-  background: linear-gradient(
+  background: linear-gradient(to right,
-    to right,
       rgba(255, 255, 255, 0) 0%,
       rgba(210, 136, 57, 0.4) 50%,
-    rgba(255, 255, 255, 0) 100%
+      rgba(255, 255, 255, 0) 100%);
-  );
   transform: skewX(-25deg);
   animation: shine 6s infinite;
 }
 
 @keyframes shine {
-  0% { left: -100%; }
+  0% {
-  20% { left: 100%; }
+    left: -100%;
-  100% { left: 100%; }
+  }
+
+  20% {
+    left: 100%;
+  }
+
+  100% {
+    left: 100%;
+  }
 }
 
 
@@ -214,7 +226,8 @@ h1, h2, h3, h4 {
   position: relative;
   z-index: 10;
   width: 100%;
-  max-width: 1152px; /* 6xl */
+  max-width: 1152px;
+  /* 6xl */
   margin: 0 auto;
 }
 
@@ -245,7 +258,8 @@ h1, h2, h3, h4 {
 /* Card Specifics */
 .card-image-container {
   position: relative;
-  height: 384px; /* 24rem / 96 */
+  height: 384px;
+  /* 24rem / 96 */
   overflow: hidden;
 }
 
@@ -258,21 +272,60 @@ h1, h2, h3, h4 {
 .card-content {
   padding: 40px;
   border-top: 1px solid rgba(176, 124, 75, 0.1);
+  background-color: #410d0a;
 }
 
 /* Text & Typography */
-.text-center { text-align: center; }
+.text-center {
-.text-gold { color: var(--color-gold); }
+  text-align: center;
-.flex-center { display: flex; justify-content: center; align-items: center; }
+}
-.flex-col { display: flex; flex-direction: column; }
+
-.gap-2 { gap: 8px; }
+.text-gold {
-.mb-2 { margin-bottom: 8px; }
+  color: var(--color-gold);
-.mb-3 { margin-bottom: 12px; }
+}
-.mb-4 { margin-bottom: 16px; }
+
-.mb-6 { margin-bottom: 24px; }
+.flex-center {
-.mb-8 { margin-bottom: 32px; }
+  display: flex;
-.mt-12 { margin-top: 48px; }
+  justify-content: center;
-.mt-24 { margin-top: 96px; }
+  align-items: center;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.mb-2 {
+  margin-bottom: 8px;
+}
+
+.mb-3 {
+  margin-bottom: 12px;
+}
+
+.mb-4 {
+  margin-bottom: 16px;
+}
+
+.mb-6 {
+  margin-bottom: 24px;
+}
+
+.mb-8 {
+  margin-bottom: 32px;
+}
+
+.mt-12 {
+  margin-top: 48px;
+}
+
+.mt-24 {
+  margin-top: 96px;
+}
 
 .footer-copyright {
   margin-top: 80px;
@@ -306,6 +359,16 @@ h1, h2, h3, h4 {
   z-index: 0;
 }
 
-.blob-1 { top: -16px; left: -16px; width: 256px; height: 256px; }
+.blob-1 {
-.blob-2 { bottom: -16px; right: -16px; width: 384px; height: 384px; }
+  top: -16px;
+  left: -16px;
+  width: 256px;
+  height: 256px;
+}
 
+.blob-2 {
+  bottom: -16px;
+  right: -16px;
+  width: 384px;
+  height: 384px;
+}