first commit

2026-06-03 03:59:46 +03:00
parent 5882fc12c1
commit bba389b513
30 changed files with 3153 additions and 149 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { motion } from 'framer-motion';
+import { Waves, Leaf, Music } from 'lucide-react';
+import Image from 'next/image';
+
+const features = [
+  { icon: Waves, titleKey: 'card1_title', descKey: 'card1_desc', color: 'text-aqua',   bg: 'bg-aqua/10'   },
+  { icon: Leaf,  titleKey: 'card2_title', descKey: 'card2_desc', color: 'text-amber',  bg: 'bg-amber/10'  },
+  { icon: Music, titleKey: 'card3_title', descKey: 'card3_desc', color: 'text-coral',  bg: 'bg-coral/10'  },
+];
+
+export default function About() {
+  const t = useTranslations('About');
+
+  return (
+    <section id="about" className="py-28 bg-sand text-midnight relative">
+      <div className="container mx-auto px-6 lg:px-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+
+          {/* Left content */}
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="space-y-8"
+          >
+            <div>
+              <span className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block">
+                — Beach &amp; More
+              </span>
+              <h2 className="font-heading text-5xl md:text-6xl font-black leading-tight text-midnight mb-6">
+                {t('title')}
+              </h2>
+              <p className="text-lg leading-relaxed text-midnight/60">{t('description')}</p>
+            </div>
+
+            <div className="space-y-2">
+              {features.map(({ icon: Icon, titleKey, descKey, color, bg }, i) => (
+                <motion.div
+                  key={titleKey}
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1 + 0.2 }}
+                  className="flex items-start gap-4 p-4 rounded-2xl hover:bg-sandy/50 transition-colors"
+                >
+                  <div className={`p-3 rounded-xl ${bg} ${color} flex-shrink-0`}>
+                    <Icon size={20} />
+                  </div>
+                  <div>
+                    <h3 className="font-heading text-lg font-bold mb-0.5">{t(titleKey)}</h3>
+                    <p className="text-midnight/55 text-sm leading-relaxed">{t(descKey)}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Right image */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative"
+          >
+            {/* Glow ring */}
+            <div
+              className="absolute inset-0 rounded-3xl opacity-30 blur-2xl scale-105"
+              style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827, #00BFA5)' }}
+            />
+            <div className="relative h-[560px] w-full rounded-3xl overflow-hidden shadow-2xl">
+              <Image
+                src="https://picsum.photos/800/1100?random=2"
+                alt="Kozmos atmosferi"
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-cover"
+              />
+              <div
+                className="absolute inset-0"
+                style={{ background: 'linear-gradient(to top, rgba(8,13,24,0.35) 0%, transparent 55%)' }}
+              />
+            </div>
+          </motion.div>
+
+        </div>
+      </div>
+    </section>
+  );
+}