init: init repo with existing code

2026-03-30 20:20:21 +06:00
commit d71b4ab17e
100 changed files with 19389 additions and 0 deletions
@@ -0,0 +1,107 @@
+import { useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { Globe, Smartphone, Brain, Cloud } from 'lucide-react';
+
+const services = [
+  {
+    icon: Globe,
+    title: 'Web Development',
+    description: 'Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.',
+    color: 'neon-blue',
+  },
+  {
+    icon: Smartphone,
+    title: 'Mobile App Development',
+    description: 'Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.',
+    color: 'neon-purple',
+  },
+  {
+    icon: Brain,
+    title: 'AI Solutions',
+    description: 'Intelligent automation and machine learning solutions that transform data into actionable insights.',
+    color: 'neon-green',
+  },
+  {
+    icon: Cloud,
+    title: 'Cloud Solutions',
+    description: 'Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.',
+    color: 'neon-blue',
+  },
+];
+
+export default function ServicesSection() {
+  const ref = useRef<HTMLElement>(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <section id="services" ref={ref} className="py-24 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="absolute top-1/2 left-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
+        <div className="absolute bottom-0 right-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
+            Our Expertise
+          </span>
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+            What We <span className="text-primary neon-text-glow">Do</span>
+          </h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
+            We deliver comprehensive technology solutions that empower businesses 
+            to thrive in the digital age.
+          </p>
+        </motion.div>
+
+        {/* Services Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {services.map((service, index) => (
+            <motion.div
+              key={service.title}
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              whileHover={{ y: -8, transition: { duration: 0.2 } }}
+              className="group relative"
+            >
+              {/* Card */}
+              <div className="relative h-full p-6 rounded-2xl glass border border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden">
+                {/* Glow effect on hover */}
+                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                  <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" />
+                </div>
+
+                {/* Icon */}
+                <motion.div
+                  whileHover={{ scale: 1.1, rotate: 5 }}
+                  className={`relative w-14 h-14 rounded-xl bg-${service.color}/10 flex items-center justify-center mb-5 group-hover:neon-glow transition-all duration-300`}
+                >
+                  <service.icon className="w-7 h-7 text-primary" />
+                </motion.div>
+
+                {/* Content */}
+                <h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors">
+                  {service.title}
+                </h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  {service.description}
+                </p>
+
+                {/* Decorative corner */}
+                <div className="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-primary/5 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity" />
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}