Merge version_1 into main

Merge version_1 into main

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",    "start": "react-scripts start"
   },
   "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.0",    "@types/react": "^18.2.0",    "@types/react-dom": "^18.2.0",    "autoprefixer": "^10.4.14",    "postcss": "^8.4.24",    "tailwindcss": "^3.3.0",    "typescript": "^4.9.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",      "not dead",      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
+    ]
   }
-}
+}

src/App.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboard from './components/sections/hero/HeroBillboard';
+import FeatureCardOne from './components/sections/feature/FeatureCardOne';
+import { Testimonial1 } from './components/sections/testimonial/Testimonial1';
+import CtaOne from './components/sections/cta/CtaOne';
+import FooterOne from './components/footer/FooterOne';
+
+function App() {
+  return (
+    <div className="App">
+      <NavbarStyleApple />
+      <HeroBillboard />
+      <FeatureCardOne />
+      <Testimonial1 />
+      <CtaOne />
+      <FooterOne />
+    </div>
+  );
+}
+
+export default App;

src/components/ui/theme-provider.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+        .matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

src/index.css

@@ -0,0 +1,17 @@
+@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;
+}

src/index.tsx

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