Initial commit
This commit is contained in:
vitalijmulika
45
src/App.js
Normal file
45
src/App.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React, { useState } from 'react';
|
||||
import Header from './components/Header';
|
||||
import Hero from './components/Hero';
|
||||
import Stats from './components/Stats';
|
||||
import Services from './components/Services';
|
||||
import CaseStudies from './components/CaseStudies';
|
||||
import Testimonials from './components/Testimonials';
|
||||
import Team from './components/Team';
|
||||
import Contact from './components/Contact';
|
||||
import Footer from './components/Footer';
|
||||
import CookieBanner from './components/CookieBanner';
|
||||
import MobileMenu from './components/MobileMenu';
|
||||
|
||||
function App() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [showCookieBanner, setShowCookieBanner] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Header
|
||||
isMobileMenuOpen={isMobileMenuOpen}
|
||||
setIsMobileMenuOpen={setIsMobileMenuOpen}
|
||||
/>
|
||||
<MobileMenu
|
||||
isOpen={isMobileMenuOpen}
|
||||
onClose={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
<main>
|
||||
<Hero />
|
||||
<Stats />
|
||||
<Services />
|
||||
<CaseStudies />
|
||||
<Testimonials />
|
||||
<Team />
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
{showCookieBanner && (
|
||||
<CookieBanner onClose={() => setShowCookieBanner(false)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
119
src/components/CaseStudies.js
Normal file
119
src/components/CaseStudies.js
Normal file
@@ -0,0 +1,119 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const CaseStudies = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Case Studies
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="case-study-card max-w-4xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold mb-4">Dios</h3>
|
||||
<p className="text-blue-100 mb-6">
|
||||
A comprehensive platform for managing digital assets and workflows with advanced AI integration.
|
||||
</p>
|
||||
<div className="flex items-center space-x-6 mb-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">$2,500</div>
|
||||
<div className="text-blue-200 text-sm">Budget</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">12w</div>
|
||||
<div className="text-blue-200 text-sm">Timeline</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="flex items-center space-x-2 text-white hover:text-blue-100 transition-colors">
|
||||
<span>View Case Study</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white/10 rounded-lg p-6 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-lg p-4">
|
||||
<div className="h-32 bg-gradient-to-br from-gray-100 to-gray-200 rounded mb-4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-white"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Case Studies
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="case-study-card max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold mb-4">Dios</h3>
|
||||
<p className="text-blue-100 mb-6">
|
||||
A comprehensive platform for managing digital assets and workflows with advanced AI integration.
|
||||
</p>
|
||||
<div className="flex items-center space-x-6 mb-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">$2,500</div>
|
||||
<div className="text-blue-200 text-sm">Budget</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">12w</div>
|
||||
<div className="text-blue-200 text-sm">Timeline</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="flex items-center space-x-2 text-white hover:text-blue-100 transition-colors">
|
||||
<span>View Case Study</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white/10 rounded-lg p-6 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-lg p-4">
|
||||
<div className="h-32 bg-gradient-to-br from-gray-100 to-gray-200 rounded mb-4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseStudies;
|
||||
76
src/components/Contact.js
Normal file
76
src/components/Contact.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { MessageCircle } from 'lucide-react';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Contact = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-gray-50">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<MessageCircle className="w-16 h-16 text-primary-600 mx-auto mb-6" />
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
How can we help? Let's talk
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 text-lg">
|
||||
Ready to start your next project? Get in touch with our team and let's discuss how we can bring your ideas to life.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="btn-primary">
|
||||
Schedule a Call
|
||||
</button>
|
||||
<button className="btn-secondary">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-gray-50"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<MessageCircle className="w-16 h-16 text-primary-600 mx-auto mb-6" />
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
How can we help? Let's talk
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 text-lg">
|
||||
Ready to start your next project? Get in touch with our team and let's discuss how we can bring your ideas to life.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="btn-primary">
|
||||
Schedule a Call
|
||||
</button>
|
||||
<button className="btn-secondary">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
42
src/components/CookieBanner.js
Normal file
42
src/components/CookieBanner.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
const CookieBanner = ({ onClose }) => {
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 right-4 z-50 max-w-md mx-auto">
|
||||
<div className="cookie-banner rounded-xl p-6 shadow-lg border border-gray-200">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900">This site uses cookies</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
We and selected third parties use cookies (or similar technologies) for technical purposes, to enhance and analyze site usage, to support our marketing efforts, and for other purposes described below.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
By clicking "Accept all", you agree to the storing of cookies on your device for these purposes.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
|
||||
>
|
||||
Deny
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors text-sm font-medium"
|
||||
>
|
||||
Accept all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CookieBanner;
|
||||
78
src/components/Footer.js
Normal file
78
src/components/Footer.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import { Github, Linkedin, MessageCircle, Mail } from 'lucide-react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white">
|
||||
<div className="container-custom py-12">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Logo & Description */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">S</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold">Sargas</span>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6 max-w-md">
|
||||
AI-powered web and mobile development solutions delivered in 12 weeks. We help businesses transform their ideas into reality.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-400">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
<span>Feel free to drop us a note:</span>
|
||||
<a href="mailto:contact@sargas.io" className="text-white hover:text-blue-400 transition-colors">
|
||||
contact@sargas.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Services</h3>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#" className="hover:text-white transition-colors">Web Development</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Mobile Development</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Support and Maintenance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Company</h3>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#" className="hover:text-white transition-colors">Case Studies</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Contacts</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">About Us</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex items-center justify-between pt-8 mt-8 border-t border-gray-800">
|
||||
<div className="flex items-center space-x-4">
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Linkedin className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Mail className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-6 text-sm text-gray-400">
|
||||
<a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="#" className="hover:text-white transition-colors">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
72
src/components/Header.js
Normal file
72
src/components/Header.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import { Menu, ChevronDown, Star } from 'lucide-react';
|
||||
|
||||
const Header = ({ isMobileMenuOpen, setIsMobileMenuOpen }) => {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100">
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">S</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-gray-900">Sargas</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center space-x-8">
|
||||
<div className="relative group">
|
||||
<button className="flex items-center space-x-1 text-gray-700 hover:text-gray-900 transition-colors">
|
||||
<span>Services</span>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<a href="#portfolio" className="text-gray-700 hover:text-gray-900 transition-colors">
|
||||
Portfolio
|
||||
</a>
|
||||
<a href="#about" className="text-gray-700 hover:text-gray-900 transition-colors">
|
||||
About
|
||||
</a>
|
||||
<a href="#contacts" className="text-gray-700 hover:text-gray-900 transition-colors">
|
||||
Contacts
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Clutch Rating & CTA */}
|
||||
<div className="hidden lg:flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 bg-gray-50 px-3 py-2 rounded-lg">
|
||||
<div className="w-6 h-6 bg-gray-800 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">C</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<span className="text-sm font-semibold">4.9</span>
|
||||
<div className="flex">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-3 h-3 fill-red-500 text-red-500" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">Based on 6 Clutch reviews</span>
|
||||
</div>
|
||||
<button className="btn-secondary">
|
||||
Book a Call
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="lg:hidden p-2"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
<Menu className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
145
src/components/Hero.js
Normal file
145
src/components/Hero.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Package } from 'lucide-react';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Hero = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="hero-gradient pt-24 pb-16 lg:pt-32 lg:pb-24">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6">
|
||||
<span className="text-primary-600">AI-powered</span><br />
|
||||
web and mobile<br />
|
||||
<span className="text-primary-600">in 12 weeks</span>
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center space-x-2 mb-8">
|
||||
<span className="text-gray-600">Powered by</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-red-300 rounded-full"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">n8n</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12">
|
||||
<button className="btn-primary">
|
||||
Start Discovery
|
||||
</button>
|
||||
<button className="btn-secondary flex items-center space-x-2">
|
||||
<Package className="w-5 h-5" />
|
||||
<span>Portfolio Showcase</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{[
|
||||
{ name: 'React', color: 'bg-blue-100 text-blue-700' },
|
||||
{ name: 'Node.js', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'NestJS', color: 'bg-red-100 text-red-700' },
|
||||
{ name: 'MySQL', color: 'bg-orange-100 text-orange-700' },
|
||||
{ name: 'MongoDB', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'Nginx', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'Redis', color: 'bg-red-100 text-red-700' },
|
||||
{ name: 'TypeScript', color: 'bg-blue-100 text-blue-700' }
|
||||
].map((tech, index) => (
|
||||
<span key={tech.name} className={`tech-badge ${tech.color}`}>
|
||||
#{tech.name.toLowerCase()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="hero-gradient pt-24 pb-16 lg:pt-32 lg:pb-24"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl">
|
||||
<motion.h1
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6"
|
||||
>
|
||||
<span className="text-primary-600">AI-powered</span><br />
|
||||
web and mobile<br />
|
||||
<span className="text-primary-600">in 12 weeks</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="flex items-center space-x-2 mb-8"
|
||||
>
|
||||
<span className="text-gray-600">Powered by</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-red-300 rounded-full"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">n8n</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.4, 0.8)}
|
||||
className="flex flex-col sm:flex-row gap-4 mb-12"
|
||||
>
|
||||
<button className="btn-primary">
|
||||
Start Discovery
|
||||
</button>
|
||||
<button className="btn-secondary flex items-center space-x-2">
|
||||
<Package className="w-5 h-5" />
|
||||
<span>Portfolio Showcase</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.5, 0.8)}
|
||||
className="flex flex-wrap gap-3"
|
||||
>
|
||||
{[
|
||||
{ name: 'React', color: 'bg-blue-100 text-blue-700' },
|
||||
{ name: 'Node.js', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'NestJS', color: 'bg-red-100 text-red-700' },
|
||||
{ name: 'MySQL', color: 'bg-orange-100 text-orange-700' },
|
||||
{ name: 'MongoDB', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'Nginx', color: 'bg-green-100 text-green-700' },
|
||||
{ name: 'Redis', color: 'bg-red-100 text-red-700' },
|
||||
{ name: 'TypeScript', color: 'bg-blue-100 text-blue-700' }
|
||||
].map((tech, index) => (
|
||||
<motion.span
|
||||
key={tech.name}
|
||||
{...fadeUpPreset(0.6 + index * 0.05, 0.6)}
|
||||
className={`tech-badge ${tech.color}`}
|
||||
>
|
||||
#{tech.name.toLowerCase()}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
97
src/components/MobileMenu.js
Normal file
97
src/components/MobileMenu.js
Normal file
@@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, ChevronDown, MessageCircle, Github, Linkedin, Mail } from 'lucide-react';
|
||||
|
||||
const MobileMenu = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 lg:hidden"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/20" onClick={onClose} />
|
||||
<motion.div
|
||||
initial={{ x: '100%' }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '100%' }}
|
||||
transition={{ type: 'tween', duration: 0.3 }}
|
||||
className="fixed right-0 top-0 h-full w-80 mobile-menu shadow-xl"
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<span className="text-xl font-bold text-gray-900">Menu</span>
|
||||
<button onClick={onClose} className="p-2">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
{/* Menu */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Menu</h3>
|
||||
<ul className="space-y-3 text-gray-600">
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Case Studies</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Contacts</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">About Us</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Services</h3>
|
||||
<ul className="space-y-3 text-gray-600">
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Web Development</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Mobile Development</a></li>
|
||||
<li><a href="#" className="hover:text-gray-900 transition-colors">Support and Maintenance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200">
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-600 mb-4">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
<span>Feel free to drop us a note:</span>
|
||||
</div>
|
||||
<a href="mailto:contact@sargas.io" className="text-gray-900 font-medium">
|
||||
contact@sargas.io
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex items-center space-x-4 mt-6">
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<Linkedin className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<Mail className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 border-t border-gray-200">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<a href="#" className="hover:text-gray-700 transition-colors">Privacy Policy</a>
|
||||
<a href="#" className="hover:text-gray-700 transition-colors">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileMenu;
|
||||
145
src/components/Services.js
Normal file
145
src/components/Services.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Globe, Package } from 'lucide-react';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Services = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-gray-50">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Explore our services
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Web Development */}
|
||||
<div className="service-card">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900">Web Development</h3>
|
||||
<Globe className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Custom web applications built with modern technologies and best practices.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-primary-600">
|
||||
<span className="text-sm font-medium">Learn more</span>
|
||||
<div className="w-4 h-0.5 bg-primary-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Development */}
|
||||
<div className="service-card">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900">Mobile Development</h3>
|
||||
<Package className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Native and cross-platform mobile applications for iOS and Android.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-primary-600">
|
||||
<span className="text-sm font-medium">Learn more</span>
|
||||
<div className="w-4 h-0.5 bg-primary-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">
|
||||
Get the same high-quality service for a smaller task
|
||||
</h3>
|
||||
<button className="btn-primary mt-6">
|
||||
Start Your Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-gray-50"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Explore our services
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Web Development */}
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="service-card"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900">Web Development</h3>
|
||||
<Globe className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Custom web applications built with modern technologies and best practices.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-primary-600">
|
||||
<span className="text-sm font-medium">Learn more</span>
|
||||
<div className="w-4 h-0.5 bg-primary-600"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Mobile Development */}
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.4, 0.8)}
|
||||
className="service-card"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900">Mobile Development</h3>
|
||||
<Package className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Native and cross-platform mobile applications for iOS and Android.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-primary-600">
|
||||
<span className="text-sm font-medium">Learn more</span>
|
||||
<div className="w-4 h-0.5 bg-primary-600"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.5, 0.8)}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">
|
||||
Get the same high-quality service for a smaller task
|
||||
</h3>
|
||||
<button className="btn-primary mt-6">
|
||||
Start Your Project
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
69
src/components/Stats.js
Normal file
69
src/components/Stats.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Stats = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const stats = [
|
||||
{ value: '92%', label: 'Client satisfaction rate' },
|
||||
{ value: '50+', label: 'Completed projects' },
|
||||
{ value: '30k+', label: 'Lines of code written' },
|
||||
{ value: '100%', label: 'On-time delivery' }
|
||||
];
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="stats-card text-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm lg:text-base">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-white"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
{...fadeUpPreset(0.2 + index * 0.1, 0.8)}
|
||||
className="stats-card text-center"
|
||||
>
|
||||
<div className="text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm lg:text-base">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Stats;
|
||||
80
src/components/Team.js
Normal file
80
src/components/Team.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Team = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Sargas Team
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gray-50 rounded-2xl p-8 lg:p-12">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-6"></div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">Meet Our Team</h3>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Our experienced team of developers, designers, and project managers are dedicated to delivering exceptional results.
|
||||
</p>
|
||||
<button className="btn-primary">
|
||||
Get to Know Us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-white"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Sargas Team
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="bg-gray-50 rounded-2xl p-8 lg:p-12">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-6"></div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">Meet Our Team</h3>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Our experienced team of developers, designers, and project managers are dedicated to delivering exceptional results.
|
||||
</p>
|
||||
<button className="btn-primary">
|
||||
Get to Know Us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
95
src/components/Testimonials.js
Normal file
95
src/components/Testimonials.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Star } from 'lucide-react';
|
||||
|
||||
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
||||
initial: { opacity: 0, y: 20 },
|
||||
whileInView: { opacity: 1, y: 0 },
|
||||
viewport: { once: true, amount: 0.2 },
|
||||
transition: { delay, duration, ease: "easeOut" }
|
||||
});
|
||||
|
||||
const Testimonials = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="section-padding bg-gray-50">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Testimonials
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="flex">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<blockquote className="text-xl lg:text-2xl text-gray-900 mb-8">
|
||||
"Working with Sargas was an exceptional experience. They delivered our project on time and exceeded our expectations with their attention to detail and technical expertise."
|
||||
</blockquote>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-gray-200 rounded-full mr-4"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Sarah Johnson</div>
|
||||
<div className="text-gray-600">CEO, TechStart Inc.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="section-padding bg-gray-50"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||
Testimonials
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="flex">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<blockquote className="text-xl lg:text-2xl text-gray-900 mb-8">
|
||||
"Working with Sargas was an exceptional experience. They delivered our project on time and exceeded our expectations with their attention to detail and technical expertise."
|
||||
</blockquote>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-gray-200 rounded-full mr-4"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Sarah Johnson</div>
|
||||
<div className="text-gray-600">CEO, TechStart Inc.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
65
src/index.css
Normal file
65
src/index.css
Normal file
@@ -0,0 +1,65 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900 font-sans;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
@apply py-16 lg:py-24;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.tech-badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
@apply bg-white rounded-xl p-6 shadow-sm border border-gray-100;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
@apply bg-white rounded-xl p-8 shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.case-study-card {
|
||||
@apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-8 text-white;
|
||||
}
|
||||
13
src/index.js
Normal file
13
src/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user