arsam/arsam-port
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Import source: src/components/About

Browse Source 
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
2026-09-18 23:05:47 +03:30
parent 78405f2156
commit 41e4cec495
1 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/About.tsx
+92
View File
@@ -0,0 +1,92 @@
'use client';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
export default function About() {
const t = useTranslations('About');
return (
<section id="about" className="py-24 bg-warm-white dark:bg-near-black border-t border-sand/20 dark:border-charcoal/50 transition-colors duration-300">
<div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
{/* Left Column: Premium SVG Placeholder for Avatar/Photo */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.8 }}
className="col-span-1 md:col-span-5 flex justify-center"
>
<div className="relative w-full max-w-[340px] aspect-square rounded-2xl overflow-hidden border border-sand dark:border-charcoal bg-warm-white dark:bg-charcoal/30 shadow-sm flex items-center justify-center p-6 group">
{/* Architectural gridlines for designer aesthetic */}
<div className="absolute inset-0 grid grid-cols-6 grid-rows-6 opacity-10 pointer-events-none">
<div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
<div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
<div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
<div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
<div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
<div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[16.6%]"></div>
<div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[33.3%]"></div>
<div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[50%]"></div>
<div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[66.6%]"></div>
<div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[83.3%]"></div>
</div>
{/* Glowing gradient backdrops */}
<div className="absolute -top-12 -left-12 w-32 h-32 rounded-full bg-teal-brand/10 dark:bg-teal-brand/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />
<div className="absolute -bottom-12 -right-12 w-32 h-32 rounded-full bg-terracotta/10 dark:bg-terracotta/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />
{/* Inner diagram representation of LLM/Web alignment */}
<svg
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-48 h-48 text-charcoal/20 dark:text-warm-white/10 group-hover:rotate-6 transition-transform duration-700"
>
{/* Outer ring */}
<circle cx="100" cy="100" r="80" stroke="currentColor" strokeWidth="1" strokeDasharray="4 4" />
{/* Core shape */}
<path d="M100 30 L160 140 L40 140 Z" stroke="currentColor" strokeWidth="1.5" />
<circle cx="100" cy="80" r="24" stroke="currentColor" strokeWidth="1" />
<line x1="100" y1="30" x2="100" y2="170" stroke="currentColor" strokeWidth="1" />
<line x1="20" y1="100" x2="180" y2="100" stroke="currentColor" strokeWidth="1" />
</svg>
{/* Label indicating image placeholder */}
<div className="absolute bottom-4 left-4 right-4 text-center py-2 px-3 bg-warm-white/90 dark:bg-near-black/90 border border-sand/40 dark:border-charcoal/60 rounded-lg backdrop-blur-sm transition-all duration-300">
<span className="text-xs font-semibold uppercase tracking-wider text-charcoal/50 dark:text-warm-white/40">
[ Image Placeholder ]
</span>
</div>
</div>
</motion.div>
{/* Right Column: Narrative Copy */}
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.8 }}
className="col-span-1 md:col-span-7 flex flex-col justify-center space-y-6"
>
<div>
<h2 className="text-xs font-semibold tracking-widest text-terracotta uppercase mb-2">
{t('title')}
</h2>
<h3 className="text-3xl font-extrabold tracking-tight text-charcoal dark:text-warm-white">
{t('subtitle')}
</h3>
</div>
<div className="space-y-4 text-charcoal/80 dark:text-warm-white/70 leading-relaxed font-normal text-base md:text-[17px]">
<p>{t('p1')}</p>
<p>{t('p2')}</p>
<p>{t('p3')}</p>
</div>
</motion.div>
</div>
</section>
);
}