Initial commit: Modern services website with React + Vite
Features: - Responsive hero section with animated gradients - Services grid with 6 service cards (Web Dev, UI/UX, Marketing, Mobile, Cloud, Security) - About section with company highlights and stats - Contact form and contact information - Modern dark theme with gradient accents - Fully responsive design - Optimized for Coolify static deployment Tech Stack: - React 18 - TypeScript - Vite - Lucide React icons - CSS custom properties and gradients
This commit is contained in:
Agent Zero
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Our Services - Professional Solutions</title>
|
||||
<meta name="description" content="Professional services tailored to your needs. We deliver excellence in every project." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
23
package.json
Normal file
23
package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "services-site",
|
||||
"version": "1.0.0",
|
||||
"description": "Modern services website",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"lucide-react": "^0.294.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8"
|
||||
}
|
||||
}
|
||||
20
src/App.tsx
Normal file
20
src/App.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import './styles/App.css'
|
||||
import Hero from './components/Hero'
|
||||
import Services from './components/Services'
|
||||
import About from './components/About'
|
||||
import Contact from './components/Contact'
|
||||
import Footer from './components/Footer'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Hero />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
65
src/components/About.tsx
Normal file
65
src/components/About.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { CheckCircle2, Users, Award, Clock } from 'lucide-react'
|
||||
|
||||
const highlights = [
|
||||
'Expert team with diverse skill sets',
|
||||
'Agile development methodology',
|
||||
'24/7 support and maintenance',
|
||||
'Transparent communication',
|
||||
'Results-driven approach',
|
||||
'Long-term partnerships'
|
||||
]
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section id="about" className="about">
|
||||
<div className="container">
|
||||
<div className="about-grid">
|
||||
<div className="about-content">
|
||||
<span className="section-tag">About Us</span>
|
||||
<h2 className="section-title">
|
||||
We Are Passionate About Your Success
|
||||
</h2>
|
||||
<p className="about-text">
|
||||
With over a decade of experience, we have helped businesses of all sizes
|
||||
transform their digital presence. Our team combines technical expertise
|
||||
with creative thinking to deliver solutions that exceed expectations.
|
||||
</p>
|
||||
<p className="about-text">
|
||||
We believe in building lasting relationships with our clients, understanding
|
||||
their unique challenges, and crafting solutions that drive real results.
|
||||
</p>
|
||||
<ul className="about-list">
|
||||
{highlights.map((item, index) => (
|
||||
<li key={index} className="about-item">
|
||||
<CheckCircle2 size={20} className="check-icon" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="about-visual">
|
||||
<div className="feature-cards">
|
||||
<div className="feature-card">
|
||||
<Users size={32} />
|
||||
<span className="feature-number">50+</span>
|
||||
<span className="feature-label">Team Members</span>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<Award size={32} />
|
||||
<span className="feature-number">25</span>
|
||||
<span className="feature-label">Industry Awards</span>
|
||||
</div>
|
||||
<div className="feature-card">
|
||||
<Clock size={32} />
|
||||
<span className="feature-number">24/7</span>
|
||||
<span className="feature-label">Support Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
71
src/components/Contact.tsx
Normal file
71
src/components/Contact.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { Mail, Phone, MapPin, Send } from 'lucide-react'
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<section id="contact" className="contact">
|
||||
<div className="container">
|
||||
<div className="contact-grid">
|
||||
<div className="contact-info">
|
||||
<span className="section-tag">Get In Touch</span>
|
||||
<h2 className="section-title">Ready to Start Your Project?</h2>
|
||||
<p className="contact-description">
|
||||
Let's discuss how we can help bring your ideas to life. Reach out
|
||||
and we'll get back to you within 24 hours.
|
||||
</p>
|
||||
<div className="contact-methods">
|
||||
<div className="contact-method">
|
||||
<Mail size={24} />
|
||||
<div>
|
||||
<span className="method-label">Email</span>
|
||||
<span className="method-value">hello@yourservices.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-method">
|
||||
<Phone size={24} />
|
||||
<div>
|
||||
<span className="method-label">Phone</span>
|
||||
<span className="method-value">+1 (555) 123-4567</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-method">
|
||||
<MapPin size={24} />
|
||||
<div>
|
||||
<span className="method-label">Location</span>
|
||||
<span className="method-value">123 Innovation Street, Tech City</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-wrapper">
|
||||
<form className="contact-form">
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" id="name" placeholder="Your name" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input type="email" id="email" placeholder="your@email.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="subject">Subject</label>
|
||||
<input type="text" id="subject" placeholder="Project inquiry" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="message">Message</label>
|
||||
<textarea id="message" rows={5} placeholder="Tell us about your project..."></textarea>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary btn-full">
|
||||
<Send size={18} />
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
56
src/components/Footer.tsx
Normal file
56
src/components/Footer.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Github, Twitter, Linkedin, Instagram } from 'lucide-react'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<div className="footer-grid">
|
||||
<div className="footer-brand">
|
||||
<h3 className="footer-logo">YourServices</h3>
|
||||
<p className="footer-tagline">
|
||||
Transforming ideas into digital reality since 2014.
|
||||
</p>
|
||||
<div className="social-links">
|
||||
<a href="#" aria-label="Twitter"><Twitter size={20} /></a>
|
||||
<a href="#" aria-label="LinkedIn"><Linkedin size={20} /></a>
|
||||
<a href="#" aria-label="GitHub"><Github size={20} /></a>
|
||||
<a href="#" aria-label="Instagram"><Instagram size={20} /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<h4>Services</h4>
|
||||
<ul>
|
||||
<li><a href="#">Web Development</a></li>
|
||||
<li><a href="#">UI/UX Design</a></li>
|
||||
<li><a href="#">Mobile Apps</a></li>
|
||||
<li><a href="#">Cloud Solutions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#about">About Us</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<h4>Legal</h4>
|
||||
<ul>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
<li><a href="#">Terms of Service</a></li>
|
||||
<li><a href="#">Cookie Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© 2026 YourServices. All rights reserved.</p>
|
||||
<p>Built with ❤️ for Coolify deployment</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
53
src/components/Hero.tsx
Normal file
53
src/components/Hero.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { ArrowRight, Sparkles } from 'lucide-react'
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className="hero">
|
||||
<div className="hero-background">
|
||||
<div className="gradient-orb orb-1"></div>
|
||||
<div className="gradient-orb orb-2"></div>
|
||||
<div className="gradient-orb orb-3"></div>
|
||||
</div>
|
||||
<div className="hero-content">
|
||||
<div className="badge">
|
||||
<Sparkles size={16} />
|
||||
<span>Excellence in Every Project</span>
|
||||
</div>
|
||||
<h1 className="hero-title">
|
||||
We Build <span className="gradient-text">Digital Solutions</span>
|
||||
<br />That Drive Results
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
Transform your vision into reality with our expert team. We deliver
|
||||
cutting-edge solutions tailored to your unique business needs.
|
||||
</p>
|
||||
<div className="hero-buttons">
|
||||
<a href="#contact" className="btn btn-primary">
|
||||
Get Started <ArrowRight size={18} />
|
||||
</a>
|
||||
<a href="#services" className="btn btn-secondary">
|
||||
Explore Services
|
||||
</a>
|
||||
</div>
|
||||
<div className="hero-stats">
|
||||
<div className="stat">
|
||||
<span className="stat-number">150+</span>
|
||||
<span className="stat-label">Projects Completed</span>
|
||||
</div>
|
||||
<div className="stat-divider"></div>
|
||||
<div className="stat">
|
||||
<span className="stat-number">98%</span>
|
||||
<span className="stat-label">Client Satisfaction</span>
|
||||
</div>
|
||||
<div className="stat-divider"></div>
|
||||
<div className="stat">
|
||||
<span className="stat-number">10+</span>
|
||||
<span className="stat-label">Years Experience</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero
|
||||
80
src/components/Services.tsx
Normal file
80
src/components/Services.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import {
|
||||
Code2,
|
||||
Palette,
|
||||
Rocket,
|
||||
Smartphone,
|
||||
Database,
|
||||
Shield,
|
||||
ArrowUpRight
|
||||
} from 'lucide-react'
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Code2,
|
||||
title: 'Web Development',
|
||||
description: 'Custom websites and web applications built with modern technologies for optimal performance.',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: 'UI/UX Design',
|
||||
description: 'Beautiful, intuitive interfaces that delight users and drive engagement with your brand.',
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
icon: Rocket,
|
||||
title: 'Digital Marketing',
|
||||
description: 'Strategic campaigns that increase visibility and convert visitors into loyal customers.',
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: 'Mobile Apps',
|
||||
description: 'Native and cross-platform mobile applications for iOS and Android devices.',
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: 'Cloud Solutions',
|
||||
description: 'Scalable cloud infrastructure and database solutions for growing businesses.',
|
||||
color: 'cyan'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Cybersecurity',
|
||||
description: 'Comprehensive security audits and solutions to protect your digital assets.',
|
||||
color: 'red'
|
||||
}
|
||||
]
|
||||
|
||||
const Services = () => {
|
||||
return (
|
||||
<section id="services" className="services">
|
||||
<div className="container">
|
||||
<div className="section-header">
|
||||
<span className="section-tag">Our Services</span>
|
||||
<h2 className="section-title">Solutions for Every Need</h2>
|
||||
<p className="section-subtitle">
|
||||
We offer a comprehensive suite of digital services to help your business thrive in the modern landscape.
|
||||
</p>
|
||||
</div>
|
||||
<div className="services-grid">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className={`service-card ${service.color}`}>
|
||||
<div className="service-icon">
|
||||
<service.icon size={28} />
|
||||
</div>
|
||||
<h3 className="service-title">{service.title}</h3>
|
||||
<p className="service-description">{service.description}</p>
|
||||
<a href="#contact" className="service-link">
|
||||
Learn More <ArrowUpRight size={16} />
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Services
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './styles/index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
561
src/styles/App.css
Normal file
561
src/styles/App.css
Normal file
@@ -0,0 +1,561 @@
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gradient-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: var(--color-primary);
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--color-secondary);
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
animation: float 12s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.orb-3 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: var(--color-accent);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0.3;
|
||||
animation: float 15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 100px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: var(--section-padding) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 32px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--service-color);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-4px);
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--service-color);
|
||||
}
|
||||
|
||||
.service-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--service-color) 0%, transparent 100%);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: white;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-description {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--service-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: gap var(--transition-fast);
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
padding: var(--section-padding) 0;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.about-list {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 32px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: scale(1.05);
|
||||
background: var(--bg-card-hover);
|
||||
}
|
||||
|
||||
.feature-card:first-child {
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.feature-card svg {
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-card:first-child svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card:first-child .feature-number,
|
||||
.feature-card:first-child .feature-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: var(--section-padding) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 40px;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.contact-methods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contact-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contact-method svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.method-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.method-value {
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.contact-form-wrapper {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
padding: 14px 16px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
padding: 80px 0 40px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
background: var(--gradient-primary);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-links h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.footer-links ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.about-grid,
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.feature-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
179
src/styles/index.css
Normal file
179
src/styles/index.css
Normal file
@@ -0,0 +1,179 @@
|
||||
/* Global Styles & Design System */
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #6366f1;
|
||||
--color-primary-dark: #4f46e5;
|
||||
--color-secondary: #8b5cf6;
|
||||
--color-accent: #06b6d4;
|
||||
|
||||
/* Gradients */
|
||||
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
|
||||
--gradient-hero: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(6, 182, 212, 0.1) 100%);
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-primary: #0a0a0f;
|
||||
--bg-secondary: #12121a;
|
||||
--bg-card: rgba(255, 255, 255, 0.03);
|
||||
--bg-card-hover: rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* Text */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-muted: #71717a;
|
||||
|
||||
/* Borders */
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--border-radius-sm: 8px;
|
||||
--border-radius-md: 12px;
|
||||
--border-radius-lg: 16px;
|
||||
--border-radius-xl: 24px;
|
||||
|
||||
/* Spacing */
|
||||
--container-max: 1200px;
|
||||
--section-padding: 120px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
}
|
||||
|
||||
/* Reset & Base */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.section-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 24px;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 60px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Service Card Colors */
|
||||
.service-card.blue { --service-color: #3b82f6; }
|
||||
.service-card.purple { --service-color: #8b5cf6; }
|
||||
.service-card.orange { --service-color: #f97316; }
|
||||
.service-card.green { --service-color: #22c55e; }
|
||||
.service-card.cyan { --service-color: #06b6d4; }
|
||||
.service-card.red { --service-color: #ef4444; }
|
||||
|
||||
/* Animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
sourcemap: true
|
||||
},
|
||||
base: './'
|
||||
})
|
||||
Reference in New Issue
Block a user