@vibe2founder/tests2dialects 0.1.0

package/landing-page/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "landing-page",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^12.29.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "3.4.15",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/landing-page/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/landing-page/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/landing-page/src/App.tsx

@@ -0,0 +1,358 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  ShieldCheck, 
+  BookOpen, 
+  Calculator, 
+  Send, 
+  Zap, 
+  CheckCircle2, 
+  ArrowRight,
+  Terminal,
+  Code2,
+  FileCode2,
+  Cpu
+} from 'lucide-react';
+
+const DialectCard = ({ icon: Icon, title, description, colorClass, active, onClick }: any) => (
+  <motion.div
+    whileHover={{ scale: 1.02 }}
+    whileTap={{ scale: 0.98 }}
+    onClick={onClick}
+    className={`p-6 cursor-pointer glass-card border-2 transition-all duration-300 ${
+      active ? colorClass : 'border-white/5 opacity-60 hover:opacity-100'
+    }`}
+  >
+    <div className="flex items-center gap-4 mb-3">
+      <div className={`p-2 rounded-lg ${active ? 'bg-white/10' : ''}`}>
+        <Icon className={`w-6 h-6 ${active ? 'text-inherit' : 'text-white/40'}`} />
+      </div>
+      <h3 className="text-xl font-bold">{title}</h3>
+    </div>
+    <p className="text-sm text-white/60 leading-relaxed">{description}</p>
+  </motion.div>
+);
+
+const CodeBlock = ({ code, language }: { code: string; language: string }) => (
+  <div className="relative group">
+    <div className="absolute -inset-1 bg-gradient-to-r from-math/20 to-apispec/20 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
+    <div className="relative bg-black/40 border border-white/10 rounded-xl p-6 font-mono text-sm overflow-x-auto">
+      <div className="flex gap-2 mb-4 border-b border-white/5 pb-2">
+        <div className="w-3 h-3 rounded-full bg-red-500/50" />
+        <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
+        <div className="w-3 h-3 rounded-full bg-green-500/50" />
+        <span className="ml-4 text-white/30 text-xs italic">{language}</span>
+      </div>
+      <pre className="text-white/80 leading-relaxed">{code}</pre>
+    </div>
+  </div>
+);
+
+function App() {
+  const [activeDialect, setActiveDialect] = useState('math');
+
+  const dialects = [
+    {
+      id: 'math',
+      icon: Calculator,
+      title: 'Mathematical',
+      description: 'Perfect for algorithms, pure logic, and complex data processing. Prove your code, don\'t just test it.',
+      colorClass: 'border-math text-math-light',
+      keywords: ['axiom', 'proof', 'implies', 'postulate'],
+      code: `axiom("Number Theory", () => {
+  const fib = arbitrary();
+  fib.derive((n) => n <= 1 ? n : fib(n-1) + fib(n-2));
+
+  proof("Fibonacci(2) implies 1", () => {
+    implies(fib(2)).is(1);
+  });
+});`
+    },
+    {
+      id: 'narrative',
+      icon: BookOpen,
+      title: 'Narrative',
+      description: 'Ideal for user journeys and business rules. Readable by PMs and stakeholders. Your tests are your documentation.',
+      colorClass: 'border-narrative text-narrative-light',
+      keywords: ['intend', 'scenario', 'to', 'story'],
+      code: `intend("User Checkout Journey", () => {
+  scenario("User without permission tries to access admin", () => {
+    to(response.status).be(403);
+  });
+});`
+    },
+    {
+      id: 'imperative',
+      icon: ShieldCheck,
+      title: 'Imperative',
+      description: 'Best for API contracts and system compliance. Assertive language for strict requirements.',
+      colorClass: 'border-imperative text-imperative-light',
+      keywords: ['ensure', 'check', 'that', 'verify'],
+      code: `ensure("PCI-DSS v4 Compliance", () => {
+    verify("Sensitive data is never in plain text", () => {
+      that(payload).matches(/^encrypted:/);
+    });
+});`
+    },
+    {
+      id: 'apispec',
+      icon: Send,
+      title: 'API Spec',
+      description: 'Declarative API testing. Validate contracts and schemas with fluid, readable syntax.',
+      colorClass: 'border-apispec text-apispec-light',
+      keywords: ['define', 'post', 'shouldReturn', 'matchingSchema'],
+      code: `await ApiSpec.define("Create User")
+  .from("https://api.example.com")
+  .post("/users", { name: "John" })
+  .shouldReturn(201)
+  .matchingSchema(userSchema)
+  .run();`
+    }
+  ];
+
+  const currentDialect = dialects.find(d => d.id === activeDialect)!;
+
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <header className="relative overflow-hidden pt-20 pb-32 px-4">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
+          <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-math/10 rounded-full blur-[120px]" />
+          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-apispec/10 rounded-full blur-[120px]" />
+        </div>
+
+        <div className="max-w-6xl mx-auto text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <span className="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium bg-white/5 border border-white/10 text-white/70 mb-8">
+              <Zap className="w-4 h-4 mr-2 text-amber-400" />
+              The Future of Polyglot Testing
+            </span>
+            <h1 className="text-6xl md:text-8xl font-black mb-8 leading-[1.1] tracking-tight">
+              One Proof <span className="gradient-text">4 All.</span>
+            </h1>
+            <p className="text-xl md:text-2xl text-white/60 max-w-3xl mx-auto mb-12 font-light leading-relaxed">
+              One Runner to Rule Them All. Decouple your execution logic from
+              semantics. Speak the language of the problem you are solving.
+            </p>
+            <div className="flex flex-col sm:flex-row justify-center gap-4">
+              <button className="px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-white/90 transition-all flex items-center justify-center gap-2 group">
+                Get Started{" "}
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </button>
+              <button className="px-8 py-4 bg-white/5 border border-white/10 text-white font-bold rounded-full hover:bg-white/10 transition-all">
+                View Documentation
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      </header>
+
+      {/* Philosophy Section */}
+      <section className="py-24 px-4 bg-white/5 border-y border-white/10">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="text-4xl font-bold mb-6">
+                Zero Risk. <span className="text-white/40">Total Freedom.</span>
+              </h2>
+              <p className="text-lg text-white/60 mb-10 leading-relaxed">
+                Your legacy Jest code remains untouched. <b>one-spec-4-all</b>{" "}
+                is an additive framework. Keep your existing tests and start
+                adding new ones using the dialect that fits best.
+              </p>
+
+              <div className="space-y-6">
+                {[
+                  { icon: CheckCircle2, text: "Runs natively alongside Jest" },
+                  {
+                    icon: CheckCircle2,
+                    text: "No rewrite required for existing tests",
+                  },
+                  {
+                    icon: CheckCircle2,
+                    text: "Unify your whole team's testing language",
+                  },
+                ].map((item, i) => (
+                  <motion.div
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    transition={{ delay: i * 0.1 }}
+                    key={i}
+                    className="flex items-center gap-3 text-white/80"
+                  >
+                    <item.icon className="w-5 h-5 text-narrative" />
+                    <span>{item.text}</span>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+
+            <div className="bg-black/60 p-8 rounded-3xl border border-white/10 shadow-2xl relative overflow-hidden group">
+              <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                <ShieldCheck className="w-32 h-32" />
+              </div>
+              <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
+                <Terminal className="w-6 h-6 text-math" />
+                Polyglot Runner
+              </h3>
+              <p className="text-white/40 mb-6 font-mono text-sm">
+                // coexist in the same file
+              </p>
+              <div className="space-y-4 opacity-80 scale-95 group-hover:scale-100 transition-transform duration-500">
+                <div className="p-4 bg-white/5 rounded-xl border-l-4 border-white/20 text-xs font-mono">
+                  <span className="text-white/40">// Standard Jest</span>
+                  <div className="mt-1">
+                    <span className="text-purple-400">describe</span>(
+                    <span className="text-amber-200">"Legacy Login"</span>, ()
+                    =&gt; {" { ... } "})
+                  </div>
+                </div>
+                <div className="p-4 bg-white/5 rounded-xl border-l-4 border-narrative text-xs font-mono">
+                  <span className="text-narrative/60">// One Proof 4 All</span>
+                  <div className="mt-1">
+                    <span className="text-narrative-light">intend</span>(
+                    <span className="text-amber-200">"New Auth Flow"</span>, ()
+                    =&gt; {" { ... } "})
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Dialects Section */}
+      <section className="py-32 px-4 max-w-7xl mx-auto">
+        <div className="text-center mb-20">
+          <h2 className="text-5xl font-bold mb-6">
+            Choose Your <span className="gradient-text">Dialect.</span>
+          </h2>
+          <p className="text-white/50 text-xl max-w-2xl mx-auto leading-relaxed">
+            Don't learn everything. Just pick what fits your domain and ignore
+            the rest.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
+          {dialects.map((d) => (
+            <DialectCard
+              key={d.id}
+              {...d}
+              active={activeDialect === d.id}
+              onClick={() => setActiveDialect(d.id)}
+            />
+          ))}
+        </div>
+
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeDialect}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
+          >
+            <div className="glass-card p-12 border-white/10">
+              <div className="flex items-center gap-4 mb-6 text-2xl font-bold">
+                <currentDialect.icon
+                  className={`w-8 h-8 ${currentDialect.colorClass.split(" ")[1]}`}
+                />
+                {currentDialect.title} Dialect
+              </div>
+              <p className="text-white/70 text-lg mb-8 leading-relaxed">
+                {currentDialect.description}
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {currentDialect.keywords.map((kw) => (
+                  <span
+                    key={kw}
+                    className="px-3 py-1 rounded-md bg-white/5 text-white/50 font-mono text-xs"
+                  >
+                    {kw}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <CodeBlock code={currentDialect.code} language="typescript" />
+          </motion.div>
+        </AnimatePresence>
+      </section>
+
+      {/* Why Section */}
+      <section className="py-32 px-4 border-t border-white/10">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-20">
+            <h2 className="text-4xl font-bold mb-4">Engineered for Teams</h2>
+            <p className="text-white/40">
+              Bridging the gap between engineering, product, and science.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                icon: Cpu,
+                title: "Data Scientists",
+                desc: "Use mathematical proofs for algorithms without wrestling with UI-focused testing frameworks.",
+              },
+              {
+                icon: FileCode2,
+                title: "Architects",
+                desc: "Enforce API contracts and strict compliance with imperative dialects that mean business.",
+              },
+              {
+                icon: Code2,
+                title: "PMs & QAs",
+                desc: "Narrative specs that read like English. Verification becomes a collaborative process.",
+              },
+            ].map((feature, i) => (
+              <div key={i} className="p-8 glass-card">
+                <feature.icon className="w-10 h-10 mb-6 text-white/80" />
+                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                <p className="text-white/50 text-sm leading-relaxed">
+                  {feature.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-20 px-4 border-t border-white/10 text-center">
+        <h2 className="text-3xl font-black mb-8 italic">
+          One Proof <span className="gradient-text">4 All.</span>
+        </h2>
+        <p className="text-white/30 text-sm mb-8">
+          © 2026 vibe2founder Canonical. Built for the era of agentic coding.
+        </p>
+        <div className="flex justify-center gap-6">
+          <a
+            href="#"
+            className="text-white/50 hover:text-white transition-colors"
+          >
+            GitHub
+          </a>
+          <a
+            href="#"
+            className="text-white/50 hover:text-white transition-colors"
+          >
+            Documentation
+          </a>
+          <a
+            href="#"
+            className="text-white/50 hover:text-white transition-colors"
+          >
+            Changelog
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

package/landing-page/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/landing-page/src/index.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
+  }
+}
+
+.glass-card {
+  @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl;
+}
+
+.gradient-text {
+  @apply bg-clip-text text-transparent bg-gradient-to-r from-math-light via-narrative-light to-imperative-light;
+}
+
+.dialect-card-math {
+  @apply border-math/30 hover:border-math transition-all duration-300;
+}
+
+.dialect-card-narrative {
+  @apply border-narrative/30 hover:border-narrative transition-all duration-300;
+}
+
+.dialect-card-imperative {
+  @apply border-imperative/30 hover:border-imperative transition-all duration-300;
+}
+
+.dialect-card-apispec {
+  @apply border-apispec/30 hover:border-apispec transition-all duration-300;
+}

package/landing-page/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/landing-page/tailwind.config.js

@@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "#0a0a0a",
+        foreground: "#ededed",
+        math: {
+          light: "#818cf8",
+          DEFAULT: "#6366f1",
+          dark: "#4f46e5",
+        },
+        narrative: {
+          light: "#34d399",
+          DEFAULT: "#10b981",
+          dark: "#059669",
+        },
+        imperative: {
+          light: "#fbbf24",
+          DEFAULT: "#f59e0b",
+          dark: "#d97706",
+        },
+        apispec: {
+          light: "#fb7185",
+          DEFAULT: "#f43f5e",
+          dark: "#e11d48",
+        }
+      },
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'slide-up': 'slideUp 0.6s ease-out',
+        'glow': 'glow 2s infinite alternate',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        glow: {
+          '0%': { boxShadow: '0 0 5px rgba(99, 102, 241, 0.2)' },
+          '100%': { boxShadow: '0 0 20px rgba(99, 102, 241, 0.6)' },
+        }
+      }
+    },
+  },
+  plugins: [],
+}

package/landing-page/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/landing-page/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/landing-page/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/landing-page/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/output.log

@@ -0,0 +1,60 @@
+
+  tests2dialects  v0.2.0
+
+ DEV Scanning for .spec.ts files in /mnt/d/www/Freelas/PROJETOS_OPENSOURCE/MEUS/@vibe2founder/canonical/one-spec-4-all/vibe2founder-one-spec-4-all
+
+ Found 5 test files
+
+ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ
+
+
+ Ô£ô examples/imperative.spec.ts 4 passed (7ms)
+   Ô£ô Sistema de Seguran├ºa e Compliance ÔÇ║ Deve bloquear conex├Áes de IPs na blacklist 7ms
+   Ô£ô Sistema de Seguran├ºa e Compliance ÔÇ║ Deve registrar auditoria para cada acesso 8ms
+   Ô£ô Valida├º├úo Estrutural da API V2 ÔÇ║ Payload deve conter metadados corretos 2ms
+   Ô£ô Valida├º├úo Estrutural da API V2 ÔÇ║ Campos obrigat├│rios devem existir 2ms
+
+
+ Ô£ô examples/math.spec.ts 4 passed (4ms)
+   Ô£ô Teoria Financeira: Juros Compostos ÔÇ║ O capital deve crescer exponencialmente 8ms
+   Ô£ô Teoria Financeira: Juros Compostos ÔÇ║ Taxa zero implica em imutabilidade do capital 6ms
+   Ô£ô ├ülgebra Booleana: Leis de De Morgan ÔÇ║ A nega├º├úo da disjun├º├úo ├® a conjun├º├úo das nega├º├Áes 10ms
+   Ô£ô An├ílise de Fun├º├Áes Recursivas ÔÇ║ Fatorial de 5 converge para 120 1ms
+
+
+ Ô£ô examples/narrative.spec.ts 3 passed (4ms)
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ O cliente finaliza a compra com sucesso 1ms
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ O sistema deve lidar com falha no pagamento 5ms
+   Ô£ô Onboarding de Novos Membros ÔÇ║ Deve criar perfil padr├úo ao registrar 2ms
+
+
+ Ô£ô examples/polyglot-shopping-cart.spec.ts 14 passed (5ms)
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Desconto de 10% em R$100 implica R$90 6ms
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Desconto de 0% preserva o valor original 8ms
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Desconto de 100% anula o pre├ºo 3ms
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Total de carrinho vazio converge para zero 2ms
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Total de 3 itens a R$10 cada (qty=2) implica R$60 9ms
+   Ô£ô Teoria de C├ílculo de Pre├ºos ÔÇ║ Imposto de 10% sobre R$100 resulta em R$110 4ms
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ Usu├írio adiciona primeiro produto ao carrinho 7ms
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ Usu├írio aplica cupom de desconto 3ms
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ Usu├írio remove item e carrinho fica vazio 8ms
+   Ô£ô Jornada de Compra do Usu├írio ÔÇ║ Usu├írio n├úo logado tenta finalizar compra 9ms
+   Ô£ô Conformidade com Gateway de Pagamento v2.1 ÔÇ║ Transa├º├úo bem-sucedida retorna status 200 1ms
+   Ô£ô Conformidade com Gateway de Pagamento v2.1 ÔÇ║ TransactionId segue padr├úo RFC do contrato 5ms
+   Ô£ô Conformidade com Gateway de Pagamento v2.1 ÔÇ║ Toda transa├º├úo deve ser logada para auditoria 8ms
+   Ô£ô Conformidade com Gateway de Pagamento v2.1 ÔÇ║ Gateway deve ser acionado exatamente uma vez por request 4ms
+
+
+ Ô£ô examples/sanity.spec.ts 3 passed (2ms)
+   Ô£ô Teoria dos Conjuntos (Dialeto Matem├ítico) ÔÇ║ f deve mapear para 10 1ms
+   Ô£ô Autentica├º├úo de Usu├írio (Dialeto Narrativo) ÔÇ║ login bem sucedido 6ms
+   Ô£ô Servi├ºo de Pagamento (Dialeto Imperativo) ÔÇ║ status da API ├® 200 4ms
+
+ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ ÔöÇ
+
+ Test Files  5 passed (5)
+      Tests  28 passed (28)
+   Duration  22ms
+
+  PASS  All tests passed!
+