@seip/blue-bird 0.3.8 → 0.4.0

package/frontend/resources/js/pages/Home.jsx

@@ -1,8 +1,11 @@
 import React, { useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import Card from '../blue-bird/components/Card';
+import Header from '../components/Header';
+import { useLanguage } from '../blue-bird/contexts/LanguageContext';
+import Typography from '../blue-bird/components/Typography';
 
 export default function Home() {
+  const { t } = useLanguage();
   useEffect(() => {
     // Example API call to the backend
     fetch("http://localhost:3000/login", {
@@ -24,68 +27,54 @@ export default function Home() {
     <div
       className="bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 min-h-screen"
     >
-      <nav
-        className='bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
-      >
-        <div className='font-bold text-xl text-blue-600 dark:text-blue-400'>
-          Blue Bird
-        </div>
-        <div className='flex justify-between items-center gap-4'>
-          <Link to="/" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>Home</Link>
-          <Link to="/about" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>About</Link>
-        </div>
-      </nav>
+      <Header />
       <main className='max-w-7xl mx-auto'>
         <div className='text-center p-4'>
-          <header className='mb-4'>
-            <h1 className='text-3xl font-bold bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-500 bg-clip-text text-transparent mb-4'>
-              Welcome to Blue Bird
-            </h1>
-            <p className='text-gray-500 dark:text-gray-400 max-w-600px mx-auto'>
-              The elegant, fast, and weightless framework for modern web development.
-            </p>
+          <header className='mb-8 mt-8'>
+            <Typography variant='h1' className='text-4xl font-extrabold tracking-tight lg:text-5xl text-slate-900 dark:text-slate-100 mb-4'>
+              {t("home_page.title")}
+            </Typography>
+            <Typography className='text-xl text-slate-500 dark:text-slate-400 max-w-[600px] mx-auto'>
+              {t("home_page.description")}
+            </Typography>
           </header>
 
-          <Card title={" Documentation (Eng)"} className='mt-8 border-none shadow-none'>
-            <div className='flex gap-4 justify-center mb-8'>
-              <a
-                href="https://seip25.github.io/Blue-bird/en.html"
-                target="_blank"
-                rel="noopener noreferrer"
-                className='bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-500 dark:hover:bg-blue-700'
-              >
-                Documentation(Eng)
-
-              </a>
-              <a
-                href="https://seip25.github.io/Blue-bird/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className='bg-blue-50 dark:bg-slate-800 text-blue-500 dark:text-blue-400 px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-100 dark:hover:bg-slate-700'
-              >
-                Documentación (Esp)
-
-              </a>
-            </div>
-          </Card>
-
-          <Card className='mt-4 border-none shadow-none'>
-            <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-1000px mx-auto'>
-              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
-                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>Lightweight</h3>
-                <p className="dark:text-slate-300">Built with performance and simplicity in mind.</p>
-              </div>
-              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
-                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>React Powered</h3>
-                <p className="dark:text-slate-300">Full React + Vite integration .</p>
-              </div>
-              <div className='p-4 rounded-lg bg-gray-50 dark:bg-slate-800 shadow-sm'>
-                <h3 className='text-blue-500 dark:text-blue-400 font-semibold text-xl mb-4'>Express Backend</h3>
-                <p className="dark:text-slate-300">Robust and scalable backend architecture.</p>
-              </div>
-            </div>
-          </Card>
+          <div className='flex gap-4 justify-center mb-12'>
+            <a
+              href="https://seip25.github.io/Blue-bird/en.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className='inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-slate-900 dark:bg-slate-100 text-slate-50 dark:text-slate-900 hover:bg-slate-900/90 dark:hover:bg-slate-100/90 h-10 px-4 py-2'
+            >
+              Documentation (Eng)
+            </a>
+            <a
+              href="https://seip25.github.io/Blue-bird/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className='inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800 h-10 px-4 py-2'
+            >
+              Documentación (Esp)
+            </a>
+          </div>
 
+          <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-[1000px] mx-auto text-left'>
+            <Card title={t("home_page.lightweight")}>
+              <Typography className="text-sm text-slate-500 dark:text-slate-400">
+                {t("home_page.lightweightDescription")}
+              </Typography>
+            </Card>
+            <Card title={t("home_page.reactPowered")}>
+              <Typography className="text-sm text-slate-500 dark:text-slate-400">
+                {t("home_page.reactPoweredDescription")}
+              </Typography>
+            </Card>
+            <Card title={t("home_page.expressBackend")}>
+              <Typography className="text-sm text-slate-500 dark:text-slate-400">
+                {t("home_page.expressBackendDescription")}
+              </Typography>
+            </Card>
+          </div>
         </div>
       </main>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seip/blue-bird",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Express + React opinionated framework with SPA or API architecture and built-in JWT auth",
   "type": "module",
   "bin": {
@@ -36,6 +36,7 @@
     "vite:build": "vite build"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
     "chalk": "^5.6.2",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.6",
@@ -47,6 +48,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "7.13.1",
+    "tailwindcss": "^4.2.2",
     "xss": "^1.0.15"
   },
   "devDependencies": {

package/vite.config.js

@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  plugins: [react()],
-  root: path.resolve(__dirname, 'frontend/resources/js'), 
+  plugins: [react(), tailwindcss()],
+  root: path.resolve(__dirname, 'frontend/resources/js'),
   base: '/build/',
   build: {
     outDir: path.resolve(__dirname, 'frontend/public/build'),