Working state: Serbian at root (/), English at /en, proper i18n structure
This commit is contained in:
Neo
51
src/components/home/BrandStory.tsx
Normal file
51
src/components/home/BrandStory.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function BrandStory() {
|
||||
return (
|
||||
<section className="py-20 px-4 bg-background-ice">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-serif mb-6">
|
||||
Our Story
|
||||
</h2>
|
||||
<div className="space-y-4 text-foreground-muted leading-relaxed">
|
||||
<p>
|
||||
ManoonOils was born from a passion for natural beauty and the belief
|
||||
that the best skincare comes from nature itself.
|
||||
</p>
|
||||
<p>
|
||||
Our premium oils are carefully crafted using only the finest natural
|
||||
ingredients, handpicked for their nourishing and restorative properties.
|
||||
</p>
|
||||
<p>
|
||||
Each product is made with love and attention to detail, ensuring
|
||||
that you receive the very best for your hair and skin.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative aspect-square bg-gradient-to-br from-accent/20 to-accent-dark/20"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="absolute inset-8 border border-foreground/10" />
|
||||
<div className="absolute inset-12 bg-white/50 backdrop-blur-sm flex items-center justify-center">
|
||||
<span className="font-serif text-3xl text-foreground/60">ManoonOils</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
75
src/components/home/Hero.tsx
Normal file
75
src/components/home/Hero.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background-ice/50 to-background" />
|
||||
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute top-20 left-10 w-64 h-64 rounded-full bg-accent blur-3xl" />
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-accent-dark blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<span className="inline-block text-sm tracking-[0.3em] text-foreground-muted mb-6">
|
||||
PREMIUM NATURAL OILS
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl lg:text-8xl font-serif mb-6 leading-tight"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
ManoonOils
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-foreground-muted mb-10 font-light"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
For hair and skin care
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<Link
|
||||
href="/en/products"
|
||||
className="inline-block px-10 py-4 bg-foreground text-white text-lg tracking-wide hover:bg-accent-dark transition-colors duration-300"
|
||||
>
|
||||
Shop Now
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.2, duration: 0.8 }}
|
||||
>
|
||||
<div className="w-6 h-10 border-2 border-foreground/30 rounded-full flex justify-center pt-2">
|
||||
<motion.div
|
||||
className="w-1 h-2 bg-foreground/50 rounded-full"
|
||||
animate={{ y: [0, 12, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 1.5 }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
68
src/components/home/Newsletter.tsx
Normal file
68
src/components/home/Newsletter.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Newsletter() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-20 px-4 bg-foreground text-white">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl md font-serif mb-:text-4xl4">
|
||||
Stay Updated
|
||||
</h2>
|
||||
<p className="text-white/60 mb-8">
|
||||
Subscribe to receive news about new products and special offers
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{submitted ? (
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-accent"
|
||||
>
|
||||
Thank you for subscribing!
|
||||
</motion.p>
|
||||
) : (
|
||||
<motion.form
|
||||
onSubmit={handleSubmit}
|
||||
className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
className="flex-1 px-6 py-3 bg-white/10 border border-white/20 text-white placeholder:text-white/40 focus:outline-none focus:border-accent"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-8 py-3 bg-accent hover:bg-accent-dark transition-colors"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</motion.form>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
38
src/components/home/ProductShowcase.tsx
Normal file
38
src/components/home/ProductShowcase.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { WooProduct } from "@/lib/woocommerce";
|
||||
import ProductCard from "@/components/product/ProductCard";
|
||||
|
||||
interface ProductShowcaseProps {
|
||||
products: WooProduct[];
|
||||
}
|
||||
|
||||
export default function ProductShowcase({ products }: ProductShowcaseProps) {
|
||||
if (!products || products.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-serif mb-4">Our Products</h2>
|
||||
<p className="text-foreground-muted max-w-2xl mx-auto">
|
||||
Discover our premium collection of natural oils for hair and skin care
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{products.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
63
src/components/home/Testimonials.tsx
Normal file
63
src/components/home/Testimonials.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "My hair has never looked better. The Morning Glow oil is a miracle in a bottle!",
|
||||
author: "Ana M.",
|
||||
},
|
||||
{
|
||||
quote: "Finally found products that truly work. My skin feels amazing every day.",
|
||||
author: "Jelena K.",
|
||||
},
|
||||
{
|
||||
quote: "The Anti-age Serum is my go-to. Love the natural ingredients.",
|
||||
author: "Milica P.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-serif mb-4">
|
||||
What Our Customers Say
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="bg-white p-8 shadow-sm"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
>
|
||||
<svg
|
||||
className="w-8 h-8 text-accent mb-4"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
||||
</svg>
|
||||
<p className="font-serif text-lg italic mb-4 text-foreground-muted">
|
||||
{testimonial.quote}
|
||||
</p>
|
||||
<p className="font-medium">— {testimonial.author}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
35
src/components/home/TickerBar.tsx
Normal file
35
src/components/home/TickerBar.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function TickerBar() {
|
||||
const items = [
|
||||
"Free shipping on orders over 3000 RSD",
|
||||
"Natural ingredients",
|
||||
"Cruelty-free",
|
||||
"Handmade with love",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-foreground text-white py-3 overflow-hidden">
|
||||
<motion.div
|
||||
className="flex whitespace-nowrap"
|
||||
animate={{ x: ["0%", "-50%"] }}
|
||||
transition={{
|
||||
x: {
|
||||
repeat: Infinity,
|
||||
repeatType: "loop",
|
||||
duration: 20,
|
||||
ease: "linear",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{[...items, ...items, ...items, ...items].map((item, index) => (
|
||||
<span key={index} className="mx-8 text-sm tracking-wide">
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user