jamilvite 0.1.0

package/templates/template-js-local/src/pages/Home.jsx

@@ -0,0 +1,42 @@
+const Home = () => {
+  return (
+    <section className="space-y-6">
+      <div className="rounded-3xl bg-white p-8 shadow-sm">
+        <p className="text-sm uppercase tracking-wide text-slate-500">Welcome</p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+          Jamilvite React Starter
+        </h1>
+        <p className="mt-4 text-slate-600">
+          This project ships with React Router, Tailwind CSS, and W3.CSS
+          preconfigured so you can start building immediately.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <button className="w3-button w3-white w3-border w3-border-blue w3-round-large">
+            W3 Button
+          </button>
+          <span className="rounded-full bg-slate-900 px-4 py-2 text-sm text-white">
+            Tailwind Badge
+          </span>
+        </div>
+      </div>
+      <div className="grid gap-6 md:grid-cols-2">
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Router Ready</h2>
+          <p className="mt-2 text-slate-600">
+            Add new routes inside <code>src/routes/Router</code> and keep your
+            pages organized.
+          </p>
+        </article>
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Design System</h2>
+          <p className="mt-2 text-slate-600">
+            Combine Tailwind utility classes with W3 components to speed up
+            layout and styling.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default Home;

package/templates/template-js-local/src/pages/NotFound.jsx

@@ -0,0 +1,15 @@
+const NotFound = () => {
+  return (
+    <section className="text-center">
+      <p className="text-sm uppercase tracking-wide text-slate-500">404</p>
+      <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+        Page not found
+      </h1>
+      <p className="mt-3 text-slate-600">
+        The page you are looking for does not exist yet.
+      </p>
+    </section>
+  );
+};
+
+export default NotFound;

package/templates/template-js-local/src/routes/Router.jsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from 'react-router-dom';
+import Home from '../pages/Home.jsx';
+import About from '../pages/About.jsx';
+import NotFound from '../pages/NotFound.jsx';
+
+const Router = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default Router;

package/templates/template-js-local/src/styles/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}

package/templates/template-js-local/src/styles/w3.css

@@ -0,0 +1,42 @@
+.w3-bar {
+  display: flex;
+  align-items: center;
+}
+
+.w3-bar-item {
+  padding: 8px 16px;
+}
+
+.w3-blue {
+  background-color: #0d6efd;
+}
+
+.w3-white {
+  background-color: #ffffff;
+  color: #0f172a;
+}
+
+.w3-border {
+  border: 1px solid #cbd5f5;
+}
+
+.w3-border-blue {
+  border-color: #0d6efd;
+}
+
+.w3-round-large {
+  border-radius: 999px;
+}
+
+.w3-button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.w3-button:hover {
+  background-color: #e2e8f0;
+}

package/templates/template-js-local/tailwind.config.js

@@ -0,0 +1,10 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,jsx,ts,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

package/templates/template-js-local/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()]
+});

package/templates/template-ts-cdn/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jamilvite App</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
+  </head>
+  <body class="bg-slate-50 text-slate-900">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/template-ts-cdn/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jamilvite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8"
+  }
+}

package/templates/template-ts-cdn/postcss.config.js

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

package/templates/template-ts-cdn/src/App.tsx

@@ -0,0 +1,15 @@
+import Router from './routes/Router';
+import Nav from './components/Nav';
+
+const App = () => {
+  return (
+    <div className="min-h-screen">
+      <Nav />
+      <main className="mx-auto w-full max-w-5xl px-6 py-10">
+        <Router />
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/templates/template-ts-cdn/src/components/Nav.tsx

@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `px-4 py-2 rounded-full text-sm font-medium transition ${
+    isActive
+      ? 'bg-white text-slate-900 shadow'
+      : 'text-slate-100 hover:bg-slate-700'
+  }`;
+
+const Nav = () => {
+  return (
+    <header className="w3-bar w3-blue px-6 py-3 shadow">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+        <span className="text-lg font-semibold text-white">Jamilvite</span>
+        <nav className="flex items-center gap-2">
+          <NavLink to="/" className={navLinkClass}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={navLinkClass}>
+            About
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Nav;

package/templates/template-ts-cdn/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/template-ts-cdn/src/pages/About.tsx

@@ -0,0 +1,23 @@
+const About = () => {
+  return (
+    <section className="space-y-4">
+      <h1 className="text-2xl font-semibold text-slate-900">About this stack</h1>
+      <p className="text-slate-600">
+        Jamilvite pairs Vite with React Router, Tailwind CSS, and W3.CSS so you
+        can prototype fast and scale into production-friendly structure.
+      </p>
+      <div className="rounded-2xl bg-slate-900 p-6 text-slate-100">
+        <p className="text-sm uppercase tracking-wide text-slate-300">
+          Quick tips
+        </p>
+        <ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
+          <li>Start building pages inside <code>src/pages</code>.</li>
+          <li>Update navigation in <code>src/components/Nav</code>.</li>
+          <li>Tailwind utilities live in <code>src/styles/index.css</code>.</li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export default About;

package/templates/template-ts-cdn/src/pages/Home.tsx

@@ -0,0 +1,42 @@
+const Home = () => {
+  return (
+    <section className="space-y-6">
+      <div className="rounded-3xl bg-white p-8 shadow-sm">
+        <p className="text-sm uppercase tracking-wide text-slate-500">Welcome</p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+          Jamilvite React Starter
+        </h1>
+        <p className="mt-4 text-slate-600">
+          This project ships with React Router, Tailwind CSS, and W3.CSS
+          preconfigured so you can start building immediately.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <button className="w3-button w3-white w3-border w3-border-blue w3-round-large">
+            W3 Button
+          </button>
+          <span className="rounded-full bg-slate-900 px-4 py-2 text-sm text-white">
+            Tailwind Badge
+          </span>
+        </div>
+      </div>
+      <div className="grid gap-6 md:grid-cols-2">
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Router Ready</h2>
+          <p className="mt-2 text-slate-600">
+            Add new routes inside <code>src/routes/Router</code> and keep your
+            pages organized.
+          </p>
+        </article>
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Design System</h2>
+          <p className="mt-2 text-slate-600">
+            Combine Tailwind utility classes with W3 components to speed up
+            layout and styling.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default Home;

package/templates/template-ts-cdn/src/pages/NotFound.tsx

@@ -0,0 +1,15 @@
+const NotFound = () => {
+  return (
+    <section className="text-center">
+      <p className="text-sm uppercase tracking-wide text-slate-500">404</p>
+      <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+        Page not found
+      </h1>
+      <p className="mt-3 text-slate-600">
+        The page you are looking for does not exist yet.
+      </p>
+    </section>
+  );
+};
+
+export default NotFound;

package/templates/template-ts-cdn/src/routes/Router.tsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from 'react-router-dom';
+import Home from '../pages/Home';
+import About from '../pages/About';
+import NotFound from '../pages/NotFound';
+
+const Router = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default Router;

package/templates/template-ts-cdn/src/styles/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}

package/templates/template-ts-cdn/tailwind.config.js

@@ -0,0 +1,10 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,jsx,ts,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

package/templates/template-ts-cdn/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/templates/template-ts-cdn/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()]
+});

package/templates/template-ts-local/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jamilvite App</title>
+  </head>
+  <body class="bg-slate-50 text-slate-900">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/template-ts-local/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jamilvite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8"
+  }
+}

package/templates/template-ts-local/postcss.config.js

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

package/templates/template-ts-local/src/App.tsx

@@ -0,0 +1,15 @@
+import Router from './routes/Router';
+import Nav from './components/Nav';
+
+const App = () => {
+  return (
+    <div className="min-h-screen">
+      <Nav />
+      <main className="mx-auto w-full max-w-5xl px-6 py-10">
+        <Router />
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/templates/template-ts-local/src/components/Nav.tsx

@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `px-4 py-2 rounded-full text-sm font-medium transition ${
+    isActive
+      ? 'bg-white text-slate-900 shadow'
+      : 'text-slate-100 hover:bg-slate-700'
+  }`;
+
+const Nav = () => {
+  return (
+    <header className="w3-bar w3-blue px-6 py-3 shadow">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+        <span className="text-lg font-semibold text-white">Jamilvite</span>
+        <nav className="flex items-center gap-2">
+          <NavLink to="/" className={navLinkClass}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={navLinkClass}>
+            About
+          </NavLink>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Nav;

package/templates/template-ts-local/src/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/index.css';
+import './styles/w3.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/template-ts-local/src/pages/About.tsx

@@ -0,0 +1,23 @@
+const About = () => {
+  return (
+    <section className="space-y-4">
+      <h1 className="text-2xl font-semibold text-slate-900">About this stack</h1>
+      <p className="text-slate-600">
+        Jamilvite pairs Vite with React Router, Tailwind CSS, and W3.CSS so you
+        can prototype fast and scale into production-friendly structure.
+      </p>
+      <div className="rounded-2xl bg-slate-900 p-6 text-slate-100">
+        <p className="text-sm uppercase tracking-wide text-slate-300">
+          Quick tips
+        </p>
+        <ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
+          <li>Start building pages inside <code>src/pages</code>.</li>
+          <li>Update navigation in <code>src/components/Nav</code>.</li>
+          <li>Tailwind utilities live in <code>src/styles/index.css</code>.</li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export default About;

package/templates/template-ts-local/src/pages/Home.tsx

@@ -0,0 +1,42 @@
+const Home = () => {
+  return (
+    <section className="space-y-6">
+      <div className="rounded-3xl bg-white p-8 shadow-sm">
+        <p className="text-sm uppercase tracking-wide text-slate-500">Welcome</p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+          Jamilvite React Starter
+        </h1>
+        <p className="mt-4 text-slate-600">
+          This project ships with React Router, Tailwind CSS, and W3.CSS
+          preconfigured so you can start building immediately.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <button className="w3-button w3-white w3-border w3-border-blue w3-round-large">
+            W3 Button
+          </button>
+          <span className="rounded-full bg-slate-900 px-4 py-2 text-sm text-white">
+            Tailwind Badge
+          </span>
+        </div>
+      </div>
+      <div className="grid gap-6 md:grid-cols-2">
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Router Ready</h2>
+          <p className="mt-2 text-slate-600">
+            Add new routes inside <code>src/routes/Router</code> and keep your
+            pages organized.
+          </p>
+        </article>
+        <article className="rounded-2xl border border-slate-200 bg-white p-6">
+          <h2 className="text-lg font-semibold text-slate-900">Design System</h2>
+          <p className="mt-2 text-slate-600">
+            Combine Tailwind utility classes with W3 components to speed up
+            layout and styling.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default Home;

package/templates/template-ts-local/src/pages/NotFound.tsx

@@ -0,0 +1,15 @@
+const NotFound = () => {
+  return (
+    <section className="text-center">
+      <p className="text-sm uppercase tracking-wide text-slate-500">404</p>
+      <h1 className="mt-2 text-3xl font-semibold text-slate-900">
+        Page not found
+      </h1>
+      <p className="mt-3 text-slate-600">
+        The page you are looking for does not exist yet.
+      </p>
+    </section>
+  );
+};
+
+export default NotFound;

package/templates/template-ts-local/src/routes/Router.tsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from 'react-router-dom';
+import Home from '../pages/Home';
+import About from '../pages/About';
+import NotFound from '../pages/NotFound';
+
+const Router = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default Router;

package/templates/template-ts-local/src/styles/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}