unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Working state: Serbian at root (/), English at /en, proper i18n structure

Browse Source
This commit is contained in:
Neo
2026-03-04 08:48:13 +00:00
commit cbb49ba64f
51 changed files with 10050 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/layout/Footer.tsx Normal file
View File

@@ -0,0 +1,66 @@
import Link from "next/link";
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-background-ice border-t border-border/30">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="md:col-span-2">
<h3 className="text-2xl font-serif mb-4">ManoonOils</h3>
<p className="text-foreground-muted max-w-md">
Premium natural oils for hair and skin care. Crafted with love for your daily beauty routine.
</p>
</div>
<div>
<h4 className="font-serif mb-4">Quick Links</h4>
<ul className="space-y-2">
<li>
<Link href="/en/products" className="text-foreground-muted hover:text-foreground transition-colors">
Products
</Link>
</li>
<li>
<Link href="/en/about" className="text-foreground-muted hover:text-foreground transition-colors">
About Us
</Link>
</li>
<li>
<Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
Contact
</Link>
</li>
</ul>
</div>
<div>
<h4 className="font-serif mb-4">Customer Service</h4>
<ul className="space-y-2">
<li>
<Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
Shipping Info
</Link>
</li>
<li>
<Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
Returns
</Link>
</li>
<li>
<a href="https://manoonoils.com" className="text-foreground-muted hover:text-foreground transition-colors">
WooCommerce Store
</a>
</li>
</ul>
</div>
</div>
<div className="border-t border-border/30 mt-12 pt-8 text-center text-foreground-muted text-sm">
<p>&copy; {currentYear} ManoonOils. All rights reserved.</p>
</div>
</div>
</footer>
);
}

79
src/components/layout/Header.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { useCartStore } from "@/stores/cartStore";
import { formatPrice } from "@/lib/woocommerce";
import MobileMenu from "./MobileMenu";
import CartDrawer from "@/components/cart/CartDrawer";
export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const { items, toggleCart } = useCartStore();
const itemCount = items.reduce((count, item) => count + item.quantity, 0);
return (
<>
<header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16 md:h-20">
<button
className="md:hidden p-2"
onClick={() => setMobileMenuOpen(true)}
aria-label="Open menu"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</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]"
/>
</Link>
<nav className="hidden md:flex items-center space-x-8">
<Link href="/en/products" className="text-foreground hover:text-accent-dark transition-colors">
Products
</Link>
<Link href="/en/about" className="text-foreground hover:text-accent-dark transition-colors">
About
</Link>
<Link href="/en/contact" className="text-foreground hover:text-accent-dark transition-colors">
Contact
</Link>
</nav>
<button
className="p-2 relative"
onClick={toggleCart}
aria-label="Open cart"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
{itemCount > 0 && (
<span className="absolute -top-1 -right-1 bg-accent-dark text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
{itemCount}
</span>
)}
</button>
</div>
</div>
</header>
<AnimatePresence>
{mobileMenuOpen && (
<MobileMenu onClose={() => setMobileMenuOpen(false)} />
)}
</AnimatePresence>
<CartDrawer />
</>
);
}

64
src/components/layout/MobileMenu.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { motion } from "framer-motion";
import Link from "next/link";
interface MobileMenuProps {
onClose: () => void;
}
export default function MobileMenu({ onClose }: MobileMenuProps) {
const menuItems = [
{ href: "/en", label: "Home" },
{ href: "/en/products", label: "Products" },
{ href: "/en/about", label: "About" },
{ href: "/en/contact", label: "Contact" },
];
return (
<>
<motion.div
className="fixed inset-0 bg-black/50 z-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
/>
<motion.div
className="fixed top-0 left-0 bottom-0 w-80 bg-white z-50 shadow-xl"
initial={{ x: "-100%" }}
animate={{ x: 0 }}
exit={{ x: "-100%" }}
transition={{ type: "tween", duration: 0.3 }}
>
<div className="p-6">
<div className="flex items-center justify-between mb-8">
<h2 className="text-2xl font-serif">ManoonOils</h2>
<button
onClick={onClose}
className="p-2"
aria-label="Close menu"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<nav className="space-y-4">
{menuItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="block text-xl font-serif py-2 border-b border-border/30"
onClick={onClose}
>
{item.label}
</Link>
))}
</nav>
</div>
</motion.div>
</>
);
}