2026-01-21 11:11:12 +00:00
13 changed files with 1504 additions and 66 deletions
--- a/package.json
+++ b/package.json
@@ -1,41 +1,20 @@
 {
-  "name": "webild-components-2",
-  "version": "0.1.0",
-  "private": true,
+  "name": "webild-components-2",  "version": "0.1.0",  "private": true,
  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
-    "start": "next start",
-    "lint": "eslint"
+    "dev": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"
  },
  "dependencies": {
-    "@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",
-    "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"
+    "@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"
  },
  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.7",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "@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"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",      "not dead",      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
+    ]
  }
-}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
--- a/public/manifest.json
+++ b/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"
+}
--- a/src/App.css
+++ b/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);
+  }
+}
--- a/src/App.tsx
+++ b/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;
--- a/src/components/Home.tsx
+++ b/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;
--- a/src/index.css
+++ b/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));
+}
--- a/src/index.tsx
+++ b/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();
--- a/src/reportWebVitals.ts
+++ b/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;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,42 +1,21 @@
 {
  "compilerOptions": {
-    "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+    "target": "es5",    "lib": [
+      "dom",      "dom.iterable",      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
-    "strict": false,
-    "noImplicitAny": false,
-    "noEmit": true,
    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
+    "noEmit": true,
+    "jsx": "react-jsx"
  },
  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
+    "src"
  ]
-}
+}