Hugging Face's logo

Spaces:
M-Zeki
/
anycoder-2e0e36d2
Build error

App Files Community
anycoder-2e0e36d2
File size: 2,697 Bytes
0f3babc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import ThreeBackground from './ThreeBackground'

export default function Hero() {
  const { t } = useTranslation()

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <ThreeBackground />
      
      <div className="container mx-auto px-6 relative z-10 pt-20">
        <div className="max-w-4xl mx-auto text-center">
          
          {/* Super Title */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-block mb-6"
          >
            <span className="font-mono text-xs md:text-sm text-nordic-cyan/80 border border-nordic-cyan/30 px-3 py-1 rounded-full bg-nordic-cyan/5">
              {t('hero.location')}
            </span>
          </motion.div>

          {/* Main Headline */}
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-4xl md:text-6xl lg:text-7xl font-bold text-nordic-ice mb-8 leading-tight tracking-tight"
          >
            {t('hero.headline')}
          </motion.h1>

          {/* Sub-headline */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="text-lg md:text-xl text-nordic-stone mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            {t('hero.subheadline')}
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <button className="group relative px-8 py-4 bg-nordic-cyan text-nordic-navy font-bold rounded-sm overflow-hidden transition-all hover:shadow-[0_0_20px_rgba(0,229,255,0.4)]">
              <span className="relative z-10">{t('hero.cta_primary')}</span>
              <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </button>
            
            <button className="px-8 py-4 border border-nordic-stone/30 text-nordic-ice rounded-sm hover:bg-nordic-stone/10 transition-colors backdrop-blur-sm">
              {t('hero.cta_secondary')}
            </button>
          </motion.div>
        </div>
      </div>
    </section>
  )
}