package.json

@@ -1,41 +1,25 @@
 {
-  "name": "webild-components-2",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
-    "start": "next start",
-    "lint": "eslint"
-  },
+  "name": "webild-components-2",  "version": "0.1.0",  "private": true,
   "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"
+    "@testing-library/jest-dom": "^5.17.0",    "@testing-library/react": "^13.4.0",    "@testing-library/user-event": "^13.5.0",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-scripts": "5.0.1",    "web-vitals": "^2.1.4",    "lucide-react": "^0.263.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",      "not dead",      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
+    ]
   },
   "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/react": "^18.2.15",    "@types/react-dom": "^18.2.7",    "typescript": "^4.9.5",    "tailwindcss": "^3.3.3",    "autoprefixer": "^10.4.14",    "postcss": "^8.4.27"
   }
-}
+}

postcss.config.js

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

src/App.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ThemeProvider from './components/theme/ThemeProvider';
+import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboard from './components/sections/hero/HeroBillboard';
+import FeatureCardOne from './components/sections/feature/FeatureCardOne';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div className="App">
+        <NavbarStyleApple />
+        <HeroBillboard />
+        <FeatureCardOne />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/components/navbar/NavbarStyleApple/NavbarStyleApple.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Menu, X } from 'lucide-react';
+
+function NavbarStyleApple() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <img
+              className="h-8 w-8"
+              src="/images/logo-small-gradient.0ed287ce-1768917245367.svg"
+              alt="Logo"
+            />
+            <span className="ml-2 text-xl font-semibold text-gray-900">Brand</span>
+          </div>
+          
+          <div className="hidden md:flex items-center space-x-8">
+            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              Home
+            </a>
+            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              Features
+            </a>
+            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              About
+            </a>
+            <a href="#" className="text-gray-900 hover:text-gray-700 px-3 py-2 text-sm font-medium">
+              Contact
+            </a>
+          </div>
+
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="text-gray-900 hover:text-gray-700"
+            >
+              {isOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="md:hidden">
+          <div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t border-gray-200">
+            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+              Home
+            </a>
+            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+              Features
+            </a>
+            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+              About
+            </a>
+            <a href="#" className="block px-3 py-2 text-base font-medium text-gray-900 hover:text-gray-700">
+              Contact
+            </a>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
+
+export default NavbarStyleApple;

src/components/sections/feature/FeatureCardOne.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Rocket, Zap, Shield, Users } from 'lucide-react';
+
+function FeatureCardOne() {
+  const features = [
+    {
+      icon: <Rocket size={32} />,
+      title: "Fast Performance",      description: "Lightning-fast loading times with optimized components and modern build tools.",      image: "/images/rocket.518dadfa-1768917245450.svg"
+    },
+    {
+      icon: <Zap size={32} />,
+      title: "Easy to Use",      description: "Simple APIs and intuitive design make development a breeze for teams of all sizes.",      image: "/images/magic-wand.ff01fe1d-1768917245455.svg"
+    },
+    {
+      icon: <Shield size={32} />,
+      title: "Type Safe",      description: "Built with TypeScript for better developer experience and fewer runtime errors.",      image: "/images/type-safety.34453790-1768917245458.svg"
+    },
+    {
+      icon: <Users size={32} />,
+      title: "Team Friendly",      description: "Collaborative tools and documentation to help your team work together effectively.",      image: "/images/quality.d1d04ce8-1768917245456.svg"
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Why Choose Our Platform?
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            We've built everything you need to create amazing web experiences, 
+            from the ground up with modern best practices.
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
+              <div className="text-blue-600 mb-4">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default FeatureCardOne;

src/components/sections/hero/HeroBillboard.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArrowRight } from 'lucide-react';
+
+function HeroBillboard() {
+  return (
+    <div className="relative bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center">
+      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+      
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+            Build Amazing
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600"> Web Experiences</span>
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
+            Create stunning, responsive websites with our modern component library. 
+            Fast, accessible, and beautifully designed.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center gap-2">
+              Get Started
+              <ArrowRight size={20} />
+            </button>
+            
+            <button className="border-2 border-gray-300 hover:border-gray-400 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg transition-colors">
+              View Demo
+            </button>
+          </div>
+          
+          <div className="mt-12">
+            <img
+              src="/images/header.e5c9eff6-1768917245945.webp"
+              alt="Hero Banner"
+              className="w-full max-w-4xl mx-auto rounded-lg shadow-2xl"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeroBillboard;

src/components/theme/ThemeProvider.js

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      <div className={theme}>
+        {children}
+      </div>
+    </ThemeContext.Provider>
+  );
+}
+
+export default ThemeProvider;

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.js

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

tailwind.config.js

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