Fix: Add root-level routes without locale prefix

.github/workflows/deploy.yml

@@ -1,24 +0,0 @@
-name: Deploy to Production
-
-on:
-  push:
-    branches: [master, main]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy to server
-        uses: appleboy/[email protected]
-        with:
-          host: ${{ secrets.HOST }}
-          username: root
-          key: ${{ secrets.SSH_KEY }}
-          script: |
-            cd /root/manoonoils-store
-            git pull origin master
-            npm run build
-            docker build -t manoonoils-store:latest .
-            docker stop manoonoils-store && docker rm manoonoils-store
-            docker run -d --name manoonoils-store -p 3000:3000 --env-file .env.local manoonoils-store:latest
-            docker network connect coolify manoonoils-store

src/app/en/about/page.tsx

@@ -1,66 +0,0 @@
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-
-export const metadata = {
-  title: "About - ManoonOils",
-  description: "Learn about ManoonOils - our story, mission, and commitment to natural beauty.",
-};
-
-export default function AboutPage() {
-  return (
-    <main className="min-h-screen pt-16 md:pt-20">
-      <Header />
-      
-      <section className="py-20 px-4">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
-            Our Story
-          </h1>
-          
-          <div className="prose prose-lg max-w-none text-foreground-muted space-y-6">
-            <p>
-              ManoonOils was born from a passion for natural beauty and the belief 
-              that the best skincare comes from nature itself. Our journey began with 
-              a simple question: how can we create products that truly nurture both 
-              hair and skin?
-            </p>
-            
-            <p>
-              We believe in the power of natural ingredients. Every oil in our 
-              collection is carefully selected for its unique properties and 
-              benefits. From nourishing oils that restore hair vitality to serums 
-              that rejuvenate skin, we craft each product with love and attention 
-              to detail.
-            </p>
-            
-            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
-              Our Mission
-            </h2>
-            <p>
-              Our mission is to provide premium quality, natural products that 
-              enhance your daily beauty routine. We are committed to:
-            </p>
-            <ul className="list-disc pl-6 space-y-2">
-              <li>Using only the finest natural ingredients</li>
-              <li>Cruelty-free and ethical production</li>
-              <li>Sustainable packaging practices</li>
-              <li>Transparency in our formulations</li>
-            </ul>
-            
-            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
-              Handmade with Love
-            </h2>
-            <p>
-              Every bottle of ManoonOils is handcrafted with care. We small-batch 
-              produce our products to ensure the highest quality and freshness. 
-              When you use ManoonOils, you can feel confident that you're using 
-              something made with genuine care and expertise.
-            </p>
-          </div>
-        </div>
-      </section>
-      
-      <Footer />
-    </main>
-  );
-}

src/app/en/contact/page.tsx

@@ -1,114 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-
-export default function ContactPage() {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    message: "",
-  });
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setSubmitted(true);
-  };
-
-  return (
-    <main className="min-h-screen pt-16 md:pt-20">
-      <Header />
-      
-      <section className="py-20 px-4">
-        <div className="max-w-2xl mx-auto">
-          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
-            Contact Us
-          </h1>
-          
-          <p className="text-foreground-muted text-center mb-12">
-            Have questions? We'd love to hear from you.
-          </p>
-          
-          {submitted ? (
-            <div className="bg-green-50 text-green-700 p-6 text-center">
-              <p className="text-lg">Thank you for your message!</p>
-              <p className="mt-2">We'll get back to you soon.</p>
-            </div>
-          ) : (
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div>
-                <label htmlFor="name" className="block text-sm font-medium mb-2">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  id="name"
-                  required
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
-                />
-              </div>
-              
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium mb-2">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  required
-                  value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
-                />
-              </div>
-              
-              <div>
-                <label htmlFor="message" className="block text-sm font-medium mb-2">
-                  Message
-                </label>
-                <textarea
-                  id="message"
-                  required
-                  rows={5}
-                  value={formData.message}
-                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground resize-none"
-                />
-              </div>
-              
-              <button
-                type="submit"
-                className="w-full py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
-              >
-                Send Message
-              </button>
-            </form>
-          )}
-          
-          <div className="mt-16 pt-8 border-t border-border/30">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
-              <div>
-                <h3 className="font-serif mb-2">Email</h3>
-                <p className="text-foreground-muted">hello@manoonoils.com</p>
-              </div>
-              <div>
-                <h3 className="font-serif mb-2">Shipping</h3>
-                <p className="text-foreground-muted">Free over 3000 RSD</p>
-              </div>
-              <div>
-                <h3 className="font-serif mb-2">Location</h3>
-                <p className="text-foreground-muted">Serbia</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      
-      <Footer />
-    </main>
-  );
-}

src/app/page.tsx

@@ -5,7 +5,7 @@ import ProductCard from "@/components/product/ProductCard";
 
 export const metadata = {
   title: "ManoonOils - Premium Natural Oils for Hair & Skin",
-  description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.",
+  description: "Discover our premium collection of natural oils for hair and skin care.",
 };
 
 export default async function Homepage() {
@@ -16,7 +16,6 @@ export default async function Homepage() {
     <main className="min-h-screen">
       <Header />
       
-      {/* Hero Section */}
       <section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
         <div className="text-center px-4">
           <h1 className="text-5xl md:text-7xl font-serif mb-6">
@@ -34,7 +33,6 @@ export default async function Homepage() {
         </div>
       </section>
 
-      {/* Products Section */}
       {publishedProducts.length > 0 && (
         <section className="py-20 px-4">
           <div className="max-w-7xl mx-auto">
@@ -48,7 +46,6 @@ export default async function Homepage() {
         </section>
       )}
 
-      {/* About Teaser */}
       <section className="py-20 px-4 bg-background-ice">
         <div className="max-w-3xl mx-auto text-center">
           <h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>

src/app/products/page.tsx

@@ -5,32 +5,29 @@ import ProductCard from "@/components/product/ProductCard";
 
 export const metadata = {
   title: "Products - ManoonOils",
-  description: "Browse our collection of premium natural oils for hair and skin care.",
+  description: "Browse our premium natural oils for hair and skin.",
 };
 
 export default async function ProductsPage() {
   const products = await getProducts();
-  
   const publishedProducts = products.filter((p) => p.status === "publish");
 
   return (
-    <main className="min-h-screen pt-16 md:pt-20">
+    <main className="min-h-screen">
       <Header />
       
-      <section className="py-20 px-4">
+      <section className="pt-24 pb-20 px-4">
         <div className="max-w-7xl mx-auto">
-          <h1 className="text-4xl md:text-5xl font-serif text-center mb-16">
-            All Products
-          </h1>
+          <h1 className="text-4xl font-serif text-center mb-12">All Products</h1>
           
-          {publishedProducts.length === 0 ? (
-            <p className="text-center text-foreground-muted">No products available</p>
-          ) : (
+          {publishedProducts.length > 0 ? (
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
               {publishedProducts.map((product, index) => (
                 <ProductCard key={product.id} product={product} index={index} />
               ))}
             </div>
+          ) : (
+            <p className="text-center text-gray-500">No products available.</p>
           )}
         </div>
       </section>

src/components/layout/Header.tsx

@@ -30,21 +30,19 @@ export default function Header() {
             </button>
 
             <Link href="/" className="flex-shrink-0">
-              <img 
-                src="/manoon-logo.jpg" 
-                alt="ManoonOils" 
-                className="h-8 w-[124px] md:h-10 md:w-[154px]"
-              />
+              <h1 className="text-2xl md:text-3xl font-serif tracking-wide text-foreground">
+                ManoonOils
+              </h1>
             </Link>
 
             <nav className="hidden md:flex items-center space-x-8">
-              <Link href="/products" className="text-foreground hover:text-accent-dark transition-colors">
+              <Link href="/en/products" className="text-foreground hover:text-accent-dark transition-colors">
                 Products
               </Link>
-              <Link href="/about" className="text-foreground hover:text-accent-dark transition-colors">
+              <Link href="/en/about" className="text-foreground hover:text-accent-dark transition-colors">
                 About
               </Link>
-              <Link href="/contact" className="text-foreground hover:text-accent-dark transition-colors">
+              <Link href="/en/contact" className="text-foreground hover:text-accent-dark transition-colors">
                 Contact
               </Link>
             </nav>

src/i18n/index.ts

@@ -5,11 +5,11 @@ export const locales = ["en", "sr"] as const;
 export type Locale = (typeof locales)[number];
 
 export default getRequestConfig(async ({ locale }) => {
-  const currentLocale = locale || "sr";
+  const currentLocale = locale || "en";
   if (!locales.includes(currentLocale as Locale)) notFound();
 
   return {
     locale: currentLocale,
-    messages: (await import(`./messages/${currentLocale}.json`)).default,
+    messages: (await import(`./${currentLocale}.json`)).default,
   };
 });

src/middleware.ts

@@ -1,13 +1,12 @@
 import createMiddleware from "next-intl/middleware";
-import { defineRouting } from 'next-intl/routing';
+import { locales } from "./i18n";
 
-const routing = defineRouting({
-  locales: ['en', 'sr'],
-  defaultLocale: 'sr'
+export default createMiddleware({
+  locales,
+  defaultLocale: "sr",
+  localePrefix: "always"
 });
 
-export default createMiddleware(routing);
-
 export const config = {
-  matcher: ['/((?!api|_next|_vercel|).*)']
+  matcher: ["/((?!api|_next|.*\\\\..*).*)"]
 };