Initial commit

apps/webapp/src/components/FeaturesGrid.tsx

@@ -0,0 +1,22 @@
+import { getLocale } from "@/libs/locales";
+
+export default function FeaturesGrid() {
+  const { common } = getLocale('en');
+
+  return (
+    <section>
+      {/* TODO: Style this features grid when implementing in your project */}
+      <div>
+        <h2>{common.features.title}</h2>
+        <div>
+          {common.features.items.map((feature, index) => (
+            <div key={index}>
+              <h3>{feature.title}</h3>
+              <p>{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

apps/webapp/src/components/Footer.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { getLocale } from "@/libs/locales";
+
+export default function Footer() {
+  const { common } = getLocale('en');
+  
+  return (
+    <footer>
+      {/* TODO: Style this footer when implementing in your project */}
+      <div>
+        <div>
+          <div>
+            <h3>{common.footer.brand}</h3>
+            <p>{common.footer.description}</p>
+          </div>
+          <div>
+            <h4>{common.footer.legal.title}</h4>
+            <ul>
+              <li><Link href="/privacy-policy">{common.footer.legal.privacyPolicy}</Link></li>
+              <li><Link href="/tos">{common.footer.legal.termsOfService}</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4>{common.footer.company.title}</h4>
+            <ul>
+              <li><Link href="/blog">{common.footer.company.blog}</Link></li>
+              <li><Link href="/dashboard">{common.footer.company.dashboard}</Link></li>
+            </ul>
+          </div>
+        </div>
+        <div>
+          <p>{common.footer.copyright}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/webapp/src/components/Header.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { getLocale } from "@/libs/locales";
+
+export default function Header() {
+  const { common } = getLocale('en');
+
+  return (
+    <header>
+      {/* TODO: Style this header when implementing in your project */}
+      <div>
+        <div>
+          <div>
+            <Link href="/">{common.header.brand}</Link>
+          </div>
+          <nav>
+            <Link href="/">{common.header.nav.home}</Link>
+            <Link href="/dashboard">{common.header.nav.dashboard}</Link>
+            <Link href="/blog">{common.header.nav.blog}</Link>
+          </nav>
+          <div>
+            <Link href="/login">{common.header.actions.signIn}</Link>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

apps/webapp/src/components/Hero.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { getLocale } from "@/libs/locales";
+
+export default function Hero() {
+  const { common } = getLocale('en');
+  
+  return (
+    <section>
+      {/* TODO: Style this hero section when implementing in your project */}
+      <div>
+        <h1>{common.hero.title}</h1>
+        <p>{common.hero.description}</p>
+        <div>
+          <Link href="/dashboard">
+            <button>{common.hero.actions.getStarted}</button>
+          </Link>
+          <Link href="/blog">
+            <button>{common.hero.actions.learnMore}</button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/webapp/src/components/Pricing.tsx

@@ -0,0 +1,47 @@
+export default function Pricing() {
+  const plans = [
+    {
+      name: "Open Source",
+      price: "Free",
+      features: [
+        "All boilerplate code",
+        "Docker configurations",
+        "Basic ML setup",
+        "Community support"
+      ]
+    },
+    {
+      name: "Pro",
+      price: "$49/month",
+      features: [
+        "Everything in Open Source",
+        "Advanced configurations",
+        "Priority support",
+        "Custom integrations"
+      ]
+    }
+  ];
+
+  return (
+    <section>
+      {/* TODO: Style this pricing section when implementing in your project */}
+      <div>
+        <h2>Pricing</h2>
+        <div>
+          {plans.map((plan, index) => (
+            <div key={index}>
+              <h3>{plan.name}</h3>
+              <p>{plan.price}</p>
+              <ul>
+                {plan.features.map((feature, featureIndex) => (
+                  <li key={featureIndex}>{feature}</li>
+                ))}
+              </ul>
+              <button>Choose Plan</button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

apps/webapp/src/components/Testimonials1.tsx

@@ -0,0 +1,25 @@
+import { getLocale } from "@/libs/locales";
+
+export default function Testimonials1() {
+  const { common } = getLocale('en');
+
+  return (
+    <section>
+      {/* TODO: Style this testimonials section when implementing in your project */}
+      <div>
+        <h2>{common.testimonials.title}</h2>
+        <div>
+          {common.testimonials.items.map((testimonial, index) => (
+            <div key={index}>
+              <p>{`"${testimonial.content}"`}</p>
+              <div>
+                <p>{testimonial.name}</p>
+                <p>{testimonial.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}