Merge version_1 into main

Merge version_1 into main

package.json

@@ -1,41 +1,20 @@
 {
-  "name": "webild-components-2",
+  "name": "webild-components-2",  "version": "0.1.0",  "private": true,
-  "version": "0.1.0",
-  "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"
-    "build": "next build --turbopack",
-    "start": "next start",
-    "lint": "eslint"
   },
   "dependencies": {
-    "@gsap/react": "^2.1.2",
+    "@gsap/react": "^2.1.2",    "@react-three/drei": "^10.7.7",    "@react-three/fiber": "^9.4.0",    "clsx": "^2.1.1",    "cobe": "^0.6.5",    "embla-carousel-auto-scroll": "^8.6.0",    "embla-carousel-react": "^8.6.0",    "gsap": "^3.13.0",    "lenis": "^1.3.15",    "lucide-react": "^0.555.0",    "motion-number": "^1.0.0",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-fast-marquee": "^1.6.5",    "react-scripts": "5.0.1",    "tailwind-merge": "^3.4.0",    "three": "^0.181.2",    "web-vitals": "^2.1.4"
-    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.4.0",
-    "clsx": "^2.1.1",
-    "cobe": "^0.6.5",
-    "embla-carousel-auto-scroll": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "gsap": "^3.13.0",
-    "lenis": "^1.3.15",
-    "lucide-react": "^0.555.0",
-    "motion-number": "^1.0.0",
-    "next": "16.0.7",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
-    "react-fast-marquee": "^1.6.5",
-    "tailwind-merge": "^3.4.0",
-    "three": "^0.181.2"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
+    "@types/node": "^16.18.11",    "@types/react": "^18.0.26",    "@types/react-dom": "^18.0.9",    "autoprefixer": "^10.4.13",    "postcss": "^8.4.21",    "tailwindcss": "^3.2.4",    "typescript": "^4.9.4"
-    "@tailwindcss/postcss": "^4",
+  },
-    "@types/node": "^20",
+  "browserslist": {
-    "@types/react": "^19",
+    "production": [
-    "@types/react-dom": "^19",
+      ">0.2%",      "not dead",      "not op_mini all"
-    "eslint": "^9",
+    ],
-    "eslint-config-next": "16.0.7",
+    "development": [
-    "tailwindcss": "^4",
+      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
-    "typescript": "^5"
+    ]
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/manifest.json

@@ -0,0 +1,14 @@
+{
+  "short_name": "Webild Components",  "name": "Webild Components App",  "icons": [
+    {
+      "src": "images/favicon-16x16.c832ad73-1768993680503.png",      "sizes": "16x16",      "type": "image/png"
+    },
+    {
+      "src": "images/favicon-32x32.0a29681d-1768993680536.png",      "sizes": "32x32",      "type": "image/png"
+    },
+    {
+      "src": "images/apple-touch-icon.50147714-1768993680489.png",      "sizes": "192x192",      "type": "image/png"
+    }
+  ],
+  "start_url": ".",  "display": "standalone",  "theme_color": "#000000",  "background_color": "#ffffff"
+}

src/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  padding: 20px;
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.css';
+import Home from './components/Home';
+
+function App() {
+  return (
+    <div className="App">
+      <Home />
+    </div>
+  );
+}
+
+export default App;

src/components/Home.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+type BackgroundType = 'solid' | 'glass' | 'transparent';
+type BorderRadiusType = 'none' | 'small' | 'rounded' | 'large';
+type CardStyleType = 'minimal' | 'glass' | 'glass-elevated' | 'solid';
+type ButtonStyleType = 'solid' | 'glass' | 'outline';
+type TextAnimationType = 'none' | 'entrance-slide' | 'entrance-fade' | 'typing';
+
+interface HomeProps {
+  defaultTextAnimation?: TextAnimationType;
+  borderRadius?: BorderRadiusType;
+  background?: BackgroundType;
+  cardStyle?: CardStyleType;
+  primaryButtonStyle?: ButtonStyleType;
+  secondaryButtonStyle?: ButtonStyleType;
+}
+
+const Home: React.FC<HomeProps> = ({
+  defaultTextAnimation = "entrance-slide",  borderRadius = "rounded",  background = "glass",  cardStyle = "glass-elevated",  primaryButtonStyle = "solid",  secondaryButtonStyle = "glass"
+}) => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      <div className="container mx-auto px-4 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-6xl font-bold text-white mb-6">
+            Welcome to Webild Components
+          </h1>
+          <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+            A modern component library built with React and Tailwind CSS
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">Modern Design</h3>
+            <p className="text-slate-300">
+              Beautiful, responsive components with glass morphism effects
+            </p>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">TypeScript</h3>
+            <p className="text-slate-300">
+              Fully typed components for better developer experience
+            </p>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">Customizable</h3>
+            <p className="text-slate-300">
+              Flexible theming system with multiple style variants
+            </p>
+          </div>
+        </div>
+        
+        <div className="text-center mt-16">
+          <button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
+            Get Started
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/index.css

@@ -0,0 +1,71 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222.2 84% 4.9%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 84% 4.9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -1,42 +1,21 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "es5",    "lib": [
-    "lib": [
+      "dom",      "dom.iterable",      "esnext"
-      "dom",
-      "dom.iterable",
-      "esnext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
-    "noImplicitAny": false,
-    "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "bundler",
+    "strict": true,
-    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "noEmit": true,
-    "incremental": true,
+    "jsx": "react-jsx"
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
   },
   "include": [
-    "next-env.d.ts",
+    "src"
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
   ]
 }