first commit

landing/src/components/sections/Languages.tsx

@@ -0,0 +1,178 @@
+import { motion } from "framer-motion"
+import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"
+
+const languages = [
+  {
+    name: "Go",
+    alias: "golang",
+    icon: "🐹",
+    color: "from-cyan-400 to-cyan-600",
+    docs: "pkg.go.dev",
+  },
+  {
+    name: "Python",
+    alias: "py",
+    icon: "🐍",
+    color: "from-yellow-400 to-green-500",
+    docs: "docs.python.org",
+  },
+  {
+    name: "Rust",
+    alias: "rust",
+    icon: "🦀",
+    color: "from-orange-400 to-red-500",
+    docs: "docs.rs",
+  },
+  {
+    name: "TypeScript",
+    alias: "ts",
+    icon: "📘",
+    color: "from-blue-400 to-blue-600",
+    docs: "typescriptlang.org",
+  },
+  {
+    name: "React",
+    alias: "react",
+    icon: "⚛️",
+    color: "from-cyan-400 to-purple-500",
+    docs: "react.dev",
+  },
+  {
+    name: "Vue",
+    alias: "vue",
+    icon: "💚",
+    color: "from-green-400 to-emerald-500",
+    docs: "vuejs.org",
+  },
+  {
+    name: "Nuxt",
+    alias: "nuxt",
+    icon: "💚",
+    color: "from-green-400 to-teal-500",
+    docs: "nuxt.com",
+  },
+  {
+    name: "Docker",
+    alias: "docker",
+    icon: "🐳",
+    color: "from-blue-400 to-cyan-500",
+    docs: "docs.docker.com",
+  },
+  {
+    name: "Java",
+    alias: "java",
+    icon: "☕",
+    color: "from-red-400 to-orange-500",
+    docs: "docs.oracle.com",
+  },
+  {
+    name: "Spring",
+    alias: "spring",
+    icon: "🍃",
+    color: "from-green-500 to-green-600",
+    docs: "docs.spring.io",
+  },
+  {
+    name: "Astro",
+    alias: "astro",
+    icon: "🚀",
+    color: "from-purple-400 to-pink-500",
+    docs: "docs.astro.build",
+  },
+  {
+    name: "Cloudflare",
+    alias: "cf",
+    icon: "☁️",
+    color: "from-orange-400 to-yellow-500",
+    docs: "developers.cloudflare.com",
+  },
+]
+
+export function Languages() {
+  return (
+    <section id="languages" className="relative py-24 md:py-32 overflow-hidden">
+      {/* Background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/5 to-background" />
+
+      <div className="container relative z-10 px-4 md:px-6">
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <FadeIn>
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">
+              Supported <GradientText>Languages</GradientText>
+            </h2>
+          </FadeIn>
+          <FadeIn delay={0.1}>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Quick access to documentation for popular languages and frameworks
+            </p>
+          </FadeIn>
+        </div>
+
+        {/* Languages Grid */}
+        <StaggerContainer 
+          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
+          staggerDelay={0.05}
+        >
+          {languages.map((lang, index) => (
+            <StaggerItem key={index}>
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ duration: 0.2 }}
+                className="group relative p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer"
+              >
+                {/* Icon */}
+                <div className="text-3xl mb-3">{lang.icon}</div>
+
+                {/* Name */}
+                <h3 className="font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
+                  {lang.name}
+                </h3>
+
+                {/* Alias */}
+                <p className="text-xs text-muted-foreground">
+                  <span className="font-mono bg-white/10 px-1.5 py-0.5 rounded">
+                    devour get {lang.alias.toLowerCase()}
+                  </span>
+                </p>
+
+                {/* Gradient Line on Hover */}
+                <div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${lang.color} opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-b-xl`} />
+              </motion.div>
+            </StaggerItem>
+          ))}
+        </StaggerContainer>
+
+        {/* Usage Example */}
+        <FadeIn delay={0.4}>
+          <div className="mt-12 text-center">
+            <div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
+              <p className="text-sm text-muted-foreground">Quick usage example:</p>
+              <div className="flex flex-wrap justify-center gap-2 font-mono text-sm">
+                <span className="text-muted-foreground">$</span>
+                <span className="text-cyan-400">devour</span>
+                <span className="text-white">get</span>
+                <span className="text-green-400">go</span>
+                <span className="text-white">http</span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Fetches Go net/http package documentation
+              </p>
+            </div>
+          </div>
+        </FadeIn>
+
+        {/* More Info */}
+        <FadeIn delay={0.5}>
+          <div className="mt-8 text-center">
+            <p className="text-sm text-muted-foreground">
+              More languages and frameworks are being added regularly.
+              <br />
+              <span className="text-cyan-400">Request a new source</span> on GitHub.
+            </p>
+          </div>
+        </FadeIn>
+      </div>
+    </section>
+  )
+}