52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|