src/App.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
+import { ThemeProvider } from './components/ui/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 (
-    <div className="App">
-      <NavbarStyleApple />
-      <HeroBillboard />
-      <FeatureCardOne />
-    </div>
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <div className="App">
+        <NavbarStyleApple />
+        <HeroBillboard />
+        <FeatureCardOne />
+      </div>
+    </ThemeProvider>
   );
 }
 
-export default App;
+export default App;

src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx

@@ -1,69 +1,35 @@
 import React from 'react';
-import { Menu, X } from 'lucide-react';
-
-const NavbarStyleApple: React.FC = () => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
+const NavbarStyleApple = () => {
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-gray-800">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
-          <div className="flex-shrink-0">
-            <img
-              className="h-8 w-auto"
-              src="/images/logo-small-gradient.0ed287ce-1768922368007.svg"
-              alt="Logo"
-            />
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <div className="text-white font-bold text-xl">
+              Logo
+            </div>
           </div>
-          
           <div className="hidden md:block">
             <div className="ml-10 flex items-baseline space-x-8">
-              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
+              <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                 Home
               </a>
-              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
-                Products
+              <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
+                About
               </a>
-              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
+              <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                 Services
               </a>
-              <a href="#" className="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">
+              <a href="#" className="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
                 Contact
               </a>
             </div>
           </div>
-
-          <div className="md:hidden">
-            <button
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
-              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
-            >
-              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
-            </button>
-          </div>
         </div>
       </div>
-
-      {isMenuOpen && (
-        <div className="md:hidden">
-          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
-            <a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
-              Home
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
-              Products
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
-              Services
-            </a>
-            <a href="#" className="text-gray-900 hover:text-gray-600 block px-3 py-2 text-base font-medium">
-              Contact
-            </a>
-          </div>
-        </div>
-      )}
     </nav>
   );
 };
 
-export default NavbarStyleApple;
+export default NavbarStyleApple;

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,56 +1,46 @@
 import React from 'react';
-import { Zap, Shield, Rocket, Users } from 'lucide-react';
 
-const features = [
-  {
-    icon: <Zap className="h-8 w-8" />,
-    title: "Lightning Fast",    description: "Experience blazing fast performance with our optimized architecture and cutting-edge technology."
-  },
-  {
-    icon: <Shield className="h-8 w-8" />,
-    title: "Secure & Reliable",    description: "Your data is protected with enterprise-grade security measures and 99.9% uptime guarantee."
-  },
-  {
-    icon: <Rocket className="h-8 w-8" />,
-    title: "Scale with Ease",    description: "Grow your business without limits. Our platform scales automatically to meet your needs."
-  },
-  {
-    icon: <Users className="h-8 w-8" />,
-    title: "Team Collaboration",    description: "Work together seamlessly with real-time collaboration tools and shared workspaces."
-  }
-];
+const FeatureCardOne = () => {
+  const features = [
+    {
+      title: 'Lightning Fast',
+      description: 'Built with performance in mind, delivering exceptional speed and reliability.',
+      icon: '⚡',
+    },
+    {
+      title: 'Modern Design',
+      description: 'Clean, contemporary aesthetics that captivate and engage your audience.',
+      icon: '🎨',
+    },
+    {
+      title: 'Responsive',
+      description: 'Perfectly optimized for all devices, from mobile to desktop.',
+      icon: '📱',
+    },
+    {
+      title: 'Secure',
+      description: 'Enterprise-grade security measures to protect your data and users.',
+      icon: '🔒',
+    },
+  ];
 
-const FeatureCardOne: React.FC = () => {
   return (
-    <section className="py-24 bg-white">
+    <section className="py-20 bg-gray-900 text-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 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+            Why Choose Us
           </h2>
-          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
-            Discover the features that make us the preferred choice for thousands of businesses worldwide.
+          <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
+            Discover the features that make our platform stand out from the competition.
           </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="group">
-              <div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100 hover:border-blue-200">
-                <div className="flex items-center justify-center w-16 h-16 bg-blue-100 rounded-xl mb-6 group-hover:bg-blue-200 transition-colors duration-300">
-                  <div className="text-blue-600">
-                    {feature.icon}
-                  </div>
-                </div>
-                
-                <h3 className="text-xl font-semibold text-gray-900 mb-4">
-                  {feature.title}
-                </h3>
-                
-                <p className="text-gray-600 leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
+            <div key={index} className="bg-gray-800 p-6 rounded-lg hover:bg-gray-700 transition-colors">
+              <div className="text-4xl mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+              <p className="text-gray-400">{feature.description}</p>
             </div>
           ))}
         </div>
@@ -59,4 +49,4 @@ const FeatureCardOne: React.FC = () => {
   );
 };
 
-export default FeatureCardOne;
+export default FeatureCardOne;

src/components/sections/hero/HeroBillboard.tsx

@@ -1,42 +1,30 @@
 import React from 'react';
-import { ArrowRight, Play } from 'lucide-react';
 
-const HeroBillboard: React.FC = () => {
+const HeroBillboard = () => {
   return (
-    <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
-      <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
-      
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <div className="space-y-8">
-          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight">
-            Build the Future
-            <span className="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              Today
-            </span>
-          </h1>
-          
-          <p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-600 leading-relaxed">
-            Transform your ideas into reality with our cutting-edge technology solutions. 
-            Experience the power of innovation at your fingertips.
-          </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200 group">
-              Get Started
-              <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform duration-200" />
-            </button>
-            
-            <button className="inline-flex items-center px-8 py-4 bg-white text-gray-900 font-semibold rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors duration-200 group">
-              <Play className="mr-2 h-5 w-5" />
-              Watch Demo
-            </button>
-          </div>
+    <section className="relative min-h-screen flex items-center justify-center bg-black text-white overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-blue-900/20"></div>
+      <div className="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
+        <h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+          Welcome to the Future
+        </h1>
+        <p className="text-lg sm:text-xl lg:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
+          Experience cutting-edge design and technology that transforms your digital presence.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <button className="px-8 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-colors">
+            Get Started
+          </button>
+          <button className="px-8 py-3 border border-white text-white font-semibold rounded-lg hover:bg-white hover:text-black transition-colors">
+            Learn More
+          </button>
         </div>
       </div>
-      
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div>
+      <div className="absolute inset-0 opacity-10">
+        <div className="w-full h-full bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-500 animate-pulse"></div>
+      </div>
     </section>
   );
 };
 
-export default HeroBillboard;
+export default HeroBillboard;

src/components/ui/ThemeProvider.tsx

@@ -71,5 +71,3 @@ export const useTheme = () => {
 
   return context;
 };
-
-export default ThemeProvider;

src/index.css

@@ -3,15 +3,9 @@
 @tailwind utilities;
 
 * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -24,4 +18,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}

src/index.tsx

@@ -10,4 +10,4 @@ root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);

tailwind.config.js

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

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",    "lib": [
-      "dom",      "dom.iterable",      "esnext"
+      "dom",      "dom.iterable",      "es6"
     ],
     "allowJs": true,
     "skipLibCheck": true,
@@ -18,4 +18,4 @@
   "include": [
     "src"
   ]
-}
+}