Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
47
package.json
47
package.json
@@ -1,41 +1,20 @@
|
|||||||
{
|
{
|
||||||
"name": "webild-components-2",
|
"name": "webild-components-2", "version": "0.1.0", "private": true,
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbopack",
|
"dev": "react-scripts start", "build": "react-scripts build", "start": "react-scripts start", "test": "react-scripts test", "eject": "react-scripts eject"
|
||||||
"build": "next build --turbopack",
|
|
||||||
"start": "next start",
|
|
||||||
"lint": "eslint"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gsap/react": "^2.1.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"
|
||||||
"@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"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3",
|
"@types/node": "^16.18.0", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "tailwindcss": "^3.4.0", "typescript": "^4.9.5"
|
||||||
"@tailwindcss/postcss": "^4",
|
},
|
||||||
"@types/node": "^20",
|
"browserslist": {
|
||||||
"@types/react": "^19",
|
"production": [
|
||||||
"@types/react-dom": "^19",
|
">0.2%", "not dead", "not op_mini all"
|
||||||
"eslint": "^9",
|
],
|
||||||
"eslint-config-next": "16.0.7",
|
"development": [
|
||||||
"tailwindcss": "^4",
|
"last 1 chrome version", "last 1 firefox version", "last 1 safari version"
|
||||||
"typescript": "^5"
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
0
public/images/placeholder.webp
Normal file
0
public/images/placeholder.webp
Normal file
1237
public/index.html
Normal file
1237
public/index.html
Normal file
File diff suppressed because it is too large
Load Diff
33
src/App.css
Normal file
33
src/App.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import './App.css';
|
||||||
|
import MainPage from './components/MainPage';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<MainPage />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
238
src/components/MainPage.tsx
Normal file
238
src/components/MainPage.tsx
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Star } from 'lucide-react';
|
||||||
|
|
||||||
|
interface TestimonialCardProps {
|
||||||
|
name?: string;
|
||||||
|
role?: string;
|
||||||
|
company?: string;
|
||||||
|
content?: string;
|
||||||
|
rating?: number;
|
||||||
|
avatar?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TestimonialCardTwelve: React.FC<TestimonialCardProps> = ({
|
||||||
|
name = "John Doe", role = "Developer", company = "Tech Corp", content = "Great service and excellent support!", rating = 5,
|
||||||
|
avatar = "/images/placeholder.webp"
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-white p-6 rounded-lg shadow-lg">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<img src={avatar} alt={name} className="w-12 h-12 rounded-full mr-4" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">{name}</h3>
|
||||||
|
<p className="text-gray-600">{role} at {company}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex mb-4">
|
||||||
|
{Array.from({ length: rating }).map((_, i) => (
|
||||||
|
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-700">{content}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MainPage: React.FC = () => {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
name: "Sarah Johnson", role: "Product Manager", company: "TechStart", content: "Outstanding quality and professional service. Highly recommended!", rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Mike Chen", role: "CTO", company: "InnovateCorp", content: "Exceeded our expectations in every way. Great team to work with.", rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Emily Davis", role: "Designer", company: "Creative Agency", content: "Fantastic results and smooth collaboration throughout the project.", rating: 5
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const companies = [
|
||||||
|
{ name: "Sanofi", logo: "/images/sanofi.b18c1526-1768995250449.png" },
|
||||||
|
{ name: "Adidas", logo: "/images/adidas.718f26f2-1768995250458.svg" },
|
||||||
|
{ name: "Mercedes", logo: "/images/mercedes.ee8047a9-1768995250815.png" },
|
||||||
|
{ name: "GitLab", logo: "/images/gitlab.4f9d2995-1768995250825.png" },
|
||||||
|
{ name: "Decathlon", logo: "/images/decathlon.1f3c4744-1768995250828.png" },
|
||||||
|
{ name: "Roche", logo: "/images/roche-logo.979d9061-1768995250830.png" },
|
||||||
|
{ name: "Autodesk", logo: "/images/autodesk.a7f2b58e-1768995250846.png" },
|
||||||
|
{ name: "Capgemini", logo: "/images/capgemini.a1d43b77-1768995250853.svg" },
|
||||||
|
{ name: "Red Hat", logo: "/images/red-hat.c5e6e64a-1768995250854.svg" },
|
||||||
|
{ name: "IBM", logo: "/images/ibm.b8c76e06-1768995250854.svg" },
|
||||||
|
{ name: "BMW", logo: "/images/bmw.0ce4c05c-1768995250854.svg" },
|
||||||
|
{ name: "TotalEnergies", logo: "/images/totalenergies.5a993082-1768995250856.svg" }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white shadow-sm">
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<img
|
||||||
|
src="/images/logo-small-gradient.76616405-1768995250058.svg"
|
||||||
|
alt="Logo"
|
||||||
|
className="h-8"
|
||||||
|
/>
|
||||||
|
<nav className="hidden md:flex space-x-8">
|
||||||
|
<a href="#home" className="text-gray-700 hover:text-blue-600">Home</a>
|
||||||
|
<a href="#about" className="text-gray-700 hover:text-blue-600">About</a>
|
||||||
|
<a href="#services" className="text-gray-700 hover:text-blue-600">Services</a>
|
||||||
|
<a href="#testimonials" className="text-gray-700 hover:text-blue-600">Testimonials</a>
|
||||||
|
<a href="#contact" className="text-gray-700 hover:text-blue-600">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section id="home" data-section="home" className="py-20 bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-5xl font-bold text-gray-900 mb-6">
|
||||||
|
Build Amazing Digital Experiences
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||||
|
We create innovative solutions that help businesses thrive in the digital world.
|
||||||
|
</p>
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors">
|
||||||
|
Get Started
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Companies Section */}
|
||||||
|
<section className="py-16 bg-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-center text-gray-600 mb-12">Trusted by industry leaders</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
|
||||||
|
{companies.map((company, index) => (
|
||||||
|
<div key={index} className="flex justify-center">
|
||||||
|
<img
|
||||||
|
src={company.logo}
|
||||||
|
alt={company.name}
|
||||||
|
className="h-8 opacity-60 hover:opacity-100 transition-opacity"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Section */}
|
||||||
|
<section id="services" data-section="services" className="py-20 bg-gray-50">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold text-gray-900 mb-6">Our Services</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||||
|
We offer comprehensive digital solutions to help your business succeed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
|
||||||
|
<img src="/images/conversation.2689303c-1768995250934.svg" alt="Consulting" className="h-16 mb-6" />
|
||||||
|
<h3 className="text-2xl font-semibold mb-4">Digital Consulting</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Strategic guidance to help you navigate the digital landscape and make informed decisions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
|
||||||
|
<img src="/images/big-data.88454030-1768995251151.svg" alt="Development" className="h-16 mb-6" />
|
||||||
|
<h3 className="text-2xl font-semibold mb-4">Web Development</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Custom web applications built with modern technologies and best practices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-8 rounded-lg shadow-sm hover:shadow-lg transition-shadow">
|
||||||
|
<img src="/images/protect.5939735a-1768995251847.svg" alt="Security" className="h-16 mb-6" />
|
||||||
|
<h3 className="text-2xl font-semibold mb-4">Digital Security</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Comprehensive security solutions to protect your digital assets and data.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Testimonials Section */}
|
||||||
|
<section id="testimonials" data-section="testimonials" className="py-20 bg-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold text-gray-900 mb-6">What Our Clients Say</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Don't just take our word for it - hear from our satisfied customers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{testimonials.map((testimonial, index) => (
|
||||||
|
<TestimonialCardTwelve key={index} {...testimonial} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section id="contact" data-section="contact" className="py-20 bg-gray-900 text-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold mb-6">Get In Touch</h2>
|
||||||
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
|
Ready to start your next project? Let's discuss how we can help you achieve your goals.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-md mx-auto">
|
||||||
|
<form className="space-y-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Your Name"
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Your Email"
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
placeholder="Your Message"
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition-colors"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-black text-white py-12">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<img
|
||||||
|
src="/images/logo-small-gradient.76616405-1768995250058.svg"
|
||||||
|
alt="Logo"
|
||||||
|
className="h-8 mx-auto mb-6"
|
||||||
|
/>
|
||||||
|
<p className="text-gray-400 mb-6">
|
||||||
|
Building the future of digital experiences, one project at a time.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center space-x-6">
|
||||||
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||||
|
Privacy Policy
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||||
|
Terms of Service
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainPage;
|
||||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user