development/91b18844-c148-4ae0-9a69-cc57582d450b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
development
2026-01-20 15:24:00 +00:00
parent 98b1ee2c74 c5b0240e76
commit 8f6fb6ed32
9 changed files with 82 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.tsx
View File

@@ -1,15 +1,18 @@
import React from 'react'; import React from 'react';
import { ThemeProvider } from './components/ui/ThemeProvider';
import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple'; import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from './components/sections/hero/HeroBillboard'; import HeroBillboard from './components/sections/hero/HeroBillboard';
import FeatureCardOne from './components/sections/feature/FeatureCardOne'; import FeatureCardOne from './components/sections/feature/FeatureCardOne';
function App() { function App() {
return ( return (
<div className="App"> <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<NavbarStyleApple /> <div className="App">
<HeroBillboard /> <NavbarStyleApple />
<FeatureCardOne /> <HeroBillboard />
</div> <FeatureCardOne />
</div>
</ThemeProvider>
); );
} }

58
src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx
View File

@@ -1,67 +1,33 @@
import React from 'react'; import React from 'react';
import { Menu, X } from 'lucide-react';
const NavbarStyleApple: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const NavbarStyleApple = () => {
return ( 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="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 items-center justify-between h-16">
<div className="flex-shrink-0"> <div className="flex items-center">
<img <div className="text-white font-bold text-xl">
className="h-8 w-auto" Logo
src="/images/logo-small-gradient.0ed287ce-1768922368007.svg" </div>
alt="Logo"
/>
</div> </div>
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-8"> <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 Home
</a> </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">
Products About
</a> </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 Services
</a> </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 Contact
</a> </a>
</div> </div>
</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>
</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> </nav>
); );
}; };

74
src/components/sections/feature/FeatureCardOne.tsx
View File

@@ -1,56 +1,46 @@
import React from 'react'; import React from 'react';
import { Zap, Shield, Rocket, Users } from 'lucide-react';
const features = [ const FeatureCardOne = () => {
{ 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." title: 'Lightning Fast',
}, description: 'Built with performance in mind, delivering exceptional speed and reliability.',
{ icon: '⚡',
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." {
}, title: 'Modern Design',
{ description: 'Clean, contemporary aesthetics that captivate and engage your audience.',
icon: <Rocket className="h-8 w-8" />, icon: '🎨',
title: "Scale with Ease", description: "Grow your business without limits. Our platform scales automatically to meet your needs." },
}, {
{ title: 'Responsive',
icon: <Users className="h-8 w-8" />, description: 'Perfectly optimized for all devices, from mobile to desktop.',
title: "Team Collaboration", description: "Work together seamlessly with real-time collaboration tools and shared workspaces." icon: '📱',
} },
]; {
title: 'Secure',
description: 'Enterprise-grade security measures to protect your data and users.',
icon: '🔒',
},
];
const FeatureCardOne: React.FC = () => {
return ( 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
Why Choose Our Platform? Why Choose Us
</h2> </h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto"> <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
Discover the features that make us the preferred choice for thousands of businesses worldwide. Discover the features that make our platform stand out from the competition.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => ( {features.map((feature, index) => (
<div key={index} className="group"> <div key={index} className="bg-gray-800 p-6 rounded-lg hover:bg-gray-700 transition-colors">
<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="text-4xl mb-4">{feature.icon}</div>
<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"> <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
<div className="text-blue-600"> <p className="text-gray-400">{feature.description}</p>
{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> </div>
))} ))}
</div> </div>

52
src/components/sections/hero/HeroBillboard.tsx
View File

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

2
src/components/ui/ThemeProvider.tsx
View File

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

6
src/index.css
View File

@@ -3,15 +3,9 @@
@tailwind utilities; @tailwind utilities;
* { * {
margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html {
scroll-behavior: smooth;
}
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

3
tailwind.config.js
View File

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

2
tsconfig.json
View File

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