Initial commit
This commit is contained in:
vitalijmulika
32
src/App.js
Normal file
32
src/App.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React 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 CookieConsent from './components/CookieConsent';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<Stats />
|
||||
<Services />
|
||||
<CaseStudies />
|
||||
<Testimonials />
|
||||
<Team />
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
<CookieConsent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
116
src/components/CaseStudies.js
Normal file
116
src/components/CaseStudies.js
Normal file
@@ -0,0 +1,116 @@
|
||||
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 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-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Case Studies
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-3xl p-8 md:p-12 text-white">
|
||||
<div className="grid md: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 that revolutionized how businesses
|
||||
manage their digital presence and customer relationships.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-6">
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">React</span>
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">Node.js</span>
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">MongoDB</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<div className="text-2xl font-bold">$2,500</div>
|
||||
<div className="text-blue-100 text-sm">Project value</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold">12w</div>
|
||||
<div className="text-blue-100 text-sm">Timeline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 rounded-2xl p-6 backdrop-blur-sm">
|
||||
<div className="w-full h-48 bg-white/20 rounded-lg flex items-center justify-center">
|
||||
<div className="text-4xl">📊</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.6)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Case Studies
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-3xl p-8 md:p-12 text-white"
|
||||
>
|
||||
<div className="grid md: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 that revolutionized how businesses
|
||||
manage their digital presence and customer relationships.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 mb-6">
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">React</span>
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">Node.js</span>
|
||||
<span className="bg-white/20 px-3 py-1 rounded-full text-sm">MongoDB</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<div className="text-2xl font-bold">$2,500</div>
|
||||
<div className="text-blue-100 text-sm">Project value</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold">12w</div>
|
||||
<div className="text-blue-100 text-sm">Timeline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 rounded-2xl p-6 backdrop-blur-sm">
|
||||
<div className="w-full h-48 bg-white/20 rounded-lg flex items-center justify-center">
|
||||
<div className="text-4xl">📊</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseStudies;
|
||||
130
src/components/Contact.js
Normal file
130
src/components/Contact.js
Normal file
@@ -0,0 +1,130 @@
|
||||
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 Contact = () => {
|
||||
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-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
How can we help? Let's talk
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Tell us about your project..."
|
||||
></textarea>
|
||||
</div>
|
||||
<button type="submit" className="btn-primary w-full">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</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.6)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
How can we help? Let's talk
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="max-w-2xl mx-auto"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Tell us about your project..."
|
||||
></textarea>
|
||||
</div>
|
||||
<button type="submit" className="btn-primary w-full">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
49
src/components/CookieConsent.js
Normal file
49
src/components/CookieConsent.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import React, { useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
const CookieConsent = () => {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 right-4 md:left-8 md:right-auto md:max-w-md bg-white rounded-2xl shadow-2xl border border-gray-200 p-6 z-50">
|
||||
<button
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<h3 className="font-semibold text-gray-900 mb-3">This site uses cookies</h3>
|
||||
|
||||
<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 space-x-3">
|
||||
<button
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Deny
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="flex-1 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Accept all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
75
src/components/Footer.js
Normal file
75
src/components/Footer.js
Normal file
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { Github, Linkedin, Mail } from 'lucide-react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white py-12">
|
||||
<div className="container-custom">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{/* Logo and Description */}
|
||||
<div className="md: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-purple-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">
|
||||
AI-powered web and mobile development solutions.
|
||||
We help businesses transform their digital presence with cutting-edge technology.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-400">
|
||||
<span>Feel free to drop us a note:</span>
|
||||
<a href="mailto:contact@sargas.io" className="text-blue-400 hover:text-blue-300">
|
||||
contact@sargas.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu */}
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Menu</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#case-studies" className="hover:text-white transition-colors">Case Studies</a></li>
|
||||
<li><a href="#blog" className="hover:text-white transition-colors">Blog</a></li>
|
||||
<li><a href="#contacts" className="hover:text-white transition-colors">Contacts</a></li>
|
||||
<li><a href="#about" className="hover:text-white transition-colors">About Us</a></li>
|
||||
<li><a href="#faq" className="hover:text-white transition-colors">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Services</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#web-dev" className="hover:text-white transition-colors">Web Development</a></li>
|
||||
<li><a href="#mobile-dev" className="hover:text-white transition-colors">Mobile Development</a></li>
|
||||
<li><a href="#support" className="hover:text-white transition-colors">Support and Maintenance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex justify-center space-x-6 mt-8 pt-8 border-t border-gray-800">
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Github className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Linkedin className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="mailto:contact@sargas.io" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Mail className="w-6 h-6" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Bottom Links */}
|
||||
<div className="flex justify-center space-x-8 mt-8 text-sm text-gray-400">
|
||||
<a href="#privacy" className="hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="#terms" className="hover:text-white transition-colors">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
95
src/components/Header.js
Normal file
95
src/components/Header.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Menu, X, ChevronDown } from 'lucide-react';
|
||||
|
||||
const Header = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isServicesOpen, setIsServicesOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-100 z-50">
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-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>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<div className="relative">
|
||||
<button
|
||||
className="flex items-center space-x-1 text-gray-700 hover:text-blue-600 transition-colors"
|
||||
onMouseEnter={() => setIsServicesOpen(true)}
|
||||
onMouseLeave={() => setIsServicesOpen(false)}
|
||||
>
|
||||
<span>Services</span>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
{isServicesOpen && (
|
||||
<div
|
||||
className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-100 py-2"
|
||||
onMouseEnter={() => setIsServicesOpen(true)}
|
||||
onMouseLeave={() => setIsServicesOpen(false)}
|
||||
>
|
||||
<a href="#web-dev" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Web Development</a>
|
||||
<a href="#mobile-dev" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Mobile Development</a>
|
||||
<a href="#support" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Support and Maintenance</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<a href="#portfolio" className="text-gray-700 hover:text-blue-600 transition-colors">Portfolio</a>
|
||||
<a href="#about" className="text-gray-700 hover:text-blue-600 transition-colors">About</a>
|
||||
<a href="#contacts" className="text-gray-700 hover:text-blue-600 transition-colors">Contacts</a>
|
||||
</nav>
|
||||
|
||||
{/* Clutch Rating */}
|
||||
<div className="hidden md:flex items-center space-x-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xs">C</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<span className="font-semibold text-gray-900">4.9</span>
|
||||
<div className="flex text-orange-400">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-xs">★</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600">Based on 6 Clutch reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn-secondary">Book a Call</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden p-2"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-100 py-4">
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<a href="#services" className="text-gray-700 hover:text-blue-600 transition-colors">Services</a>
|
||||
<a href="#portfolio" className="text-gray-700 hover:text-blue-600 transition-colors">Portfolio</a>
|
||||
<a href="#about" className="text-gray-700 hover:text-blue-600 transition-colors">About</a>
|
||||
<a href="#contacts" className="text-gray-700 hover:text-blue-600 transition-colors">Contacts</a>
|
||||
<button className="btn-secondary w-full mt-4">Book a Call</button>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
166
src/components/Hero.js
Normal file
166
src/components/Hero.js
Normal file
@@ -0,0 +1,166 @@
|
||||
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 Hero = () => {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return (
|
||||
<section className="pt-24 pb-16 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8">
|
||||
<span className="text-blue-600">AI-powered</span>
|
||||
<br />
|
||||
web and mobile
|
||||
<br />
|
||||
<span className="text-blue-600">in 12 weeks</span>
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center justify-center space-x-2 mb-8">
|
||||
<span className="text-gray-600">Powered by</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-6 h-6 bg-red-500 rounded-full"></div>
|
||||
<div className="w-6 h-6 bg-red-400 rounded-full"></div>
|
||||
<span className="font-semibold text-gray-900">n8n</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<button className="btn-primary">Start Discovery</button>
|
||||
<button className="btn-secondary flex items-center space-x-2">
|
||||
<span>📁</span>
|
||||
<span>Portfolio Showcase</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<p className="text-gray-600 mb-6">We use only modern technologies</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded"></div>
|
||||
<span className="text-gray-700">#react</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-red-500 rounded"></div>
|
||||
<span className="text-gray-700">#nestjs</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-400 rounded"></div>
|
||||
<span className="text-gray-700">#mysql</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-green-600 rounded"></div>
|
||||
<span className="text-gray-700">#mongodb</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-green-500 rounded"></div>
|
||||
<span className="text-gray-700">#nginx</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-red-600 rounded"></div>
|
||||
<span className="text-gray-700">#redis</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-700 rounded"></div>
|
||||
<span className="text-gray-700">#typescript</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="pt-24 pb-16 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.h1
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-5xl md:text-7xl font-bold text-gray-900 mb-8"
|
||||
>
|
||||
<span className="text-blue-600">AI-powered</span>
|
||||
<br />
|
||||
web and mobile
|
||||
<br />
|
||||
<span className="text-blue-600">in 12 weeks</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.3, 0.6)}
|
||||
className="flex items-center justify-center space-x-2 mb-8"
|
||||
>
|
||||
<span className="text-gray-600">Powered by</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-6 h-6 bg-red-500 rounded-full"></div>
|
||||
<div className="w-6 h-6 bg-red-400 rounded-full"></div>
|
||||
<span className="font-semibold text-gray-900">n8n</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.4, 0.6)}
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center mb-16"
|
||||
>
|
||||
<button className="btn-primary">Start Discovery</button>
|
||||
<button className="btn-secondary flex items-center space-x-2">
|
||||
<span>📁</span>
|
||||
<span>Portfolio Showcase</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.5, 0.8)}
|
||||
className="bg-white rounded-2xl p-8 shadow-lg"
|
||||
>
|
||||
<p className="text-gray-600 mb-6">We use only modern technologies</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded"></div>
|
||||
<span className="text-gray-700">#react</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-red-500 rounded"></div>
|
||||
<span className="text-gray-700">#nestjs</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-400 rounded"></div>
|
||||
<span className="text-gray-700">#mysql</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-green-600 rounded"></div>
|
||||
<span className="text-gray-700">#mongodb</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-green-500 rounded"></div>
|
||||
<span className="text-gray-700">#nginx</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-red-600 rounded"></div>
|
||||
<span className="text-gray-700">#redis</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-700 rounded"></div>
|
||||
<span className="text-gray-700">#typescript</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
126
src/components/Services.js
Normal file
126
src/components/Services.js
Normal file
@@ -0,0 +1,126 @@
|
||||
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 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-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Explore our services
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||||
{/* Web Development */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Web Development</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Modern, responsive websites built with cutting-edge technologies.
|
||||
From simple landing pages to complex web applications.
|
||||
</p>
|
||||
<div className="w-full h-64 bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl flex items-center justify-center">
|
||||
<div className="text-6xl">🌐</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Development */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Mobile Development</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Native and cross-platform mobile applications that deliver
|
||||
exceptional user experiences on iOS and Android.
|
||||
</p>
|
||||
<div className="w-full h-64 bg-gradient-to-br from-green-100 to-blue-100 rounded-2xl flex items-center justify-center">
|
||||
<div className="text-6xl">📱</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 text-center">
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg max-w-2xl mx-auto">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
||||
Get the same high-quality service for a smaller task
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Whether you need a quick fix or a complete overhaul,
|
||||
we bring the same level of expertise to every project.
|
||||
</p>
|
||||
</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.6)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Explore our services
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||||
{/* Web Development */}
|
||||
<motion.div {...fadeUpPreset(0.3, 0.8)}>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Web Development</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Modern, responsive websites built with cutting-edge technologies.
|
||||
From simple landing pages to complex web applications.
|
||||
</p>
|
||||
<div className="w-full h-64 bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl flex items-center justify-center">
|
||||
<div className="text-6xl">🌐</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Mobile Development */}
|
||||
<motion.div {...fadeUpPreset(0.4, 0.8)}>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Mobile Development</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Native and cross-platform mobile applications that deliver
|
||||
exceptional user experiences on iOS and Android.
|
||||
</p>
|
||||
<div className="w-full h-64 bg-gradient-to-br from-green-100 to-blue-100 rounded-2xl flex items-center justify-center">
|
||||
<div className="text-6xl">📱</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.5, 0.8)}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg max-w-2xl mx-auto">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
||||
Get the same high-quality service for a smaller task
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Whether you need a quick fix or a complete overhaul,
|
||||
we bring the same level of expertise to every project.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
65
src/components/Stats.js
Normal file
65
src/components/Stats.js
Normal file
@@ -0,0 +1,65 @@
|
||||
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 md:grid-cols-4 gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-4xl md:text-5xl font-bold text-gray-900 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<p className="text-gray-600">{stat.label}</p>
|
||||
</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 md:grid-cols-4 gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
{...fadeUpPreset(index * 0.1, 0.6)}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl md:text-5xl font-bold text-gray-900 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<p className="text-gray-600">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Stats;
|
||||
94
src/components/Team.js
Normal file
94
src/components/Team.js
Normal file
@@ -0,0 +1,94 @@
|
||||
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-4xl md:text-5xl 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">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Alex Johnson</h4>
|
||||
<p className="text-gray-600">Lead Developer</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Sarah Wilson</h4>
|
||||
<p className="text-gray-600">UI/UX Designer</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Mike Chen</h4>
|
||||
<p className="text-gray-600">Project Manager</p>
|
||||
</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.6)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl 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">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Alex Johnson</h4>
|
||||
<p className="text-gray-600">Lead Developer</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Sarah Wilson</h4>
|
||||
<p className="text-gray-600">UI/UX Designer</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 bg-gray-300 rounded-full mx-auto mb-4"></div>
|
||||
<h4 className="font-semibold text-gray-900">Mike Chen</h4>
|
||||
<p className="text-gray-600">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
94
src/components/Testimonials.js
Normal file
94
src/components/Testimonials.js
Normal file
@@ -0,0 +1,94 @@
|
||||
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 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-4xl md:text-5xl 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 shadow-lg">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<div className="w-12 h-12 bg-gray-300 rounded-full"></div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">John Smith</h4>
|
||||
<p className="text-gray-600">CEO, TechCorp</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 text-lg leading-relaxed">
|
||||
"Working with Sargas was an exceptional experience. They delivered
|
||||
our project on time and exceeded our expectations in every way.
|
||||
The AI-powered approach really made a difference."
|
||||
</p>
|
||||
<div className="flex text-yellow-400 mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-xl">★</span>
|
||||
))}
|
||||
</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.6)}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl 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 shadow-lg">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<div className="w-12 h-12 bg-gray-300 rounded-full"></div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">John Smith</h4>
|
||||
<p className="text-gray-600">CEO, TechCorp</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 text-lg leading-relaxed">
|
||||
"Working with Sargas was an exceptional experience. They delivered
|
||||
our project on time and exceeded our expectations in every way.
|
||||
The AI-powered approach really made a difference."
|
||||
</p>
|
||||
<div className="flex text-yellow-400 mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-xl">★</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
27
src/index.css
Normal file
27
src/index.css
Normal file
@@ -0,0 +1,27 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply font-sans antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-blue-600 hover:bg-blue-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 md:py-24;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
}
|
||||
8
src/index.js
Normal file
8
src/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
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(<App />);
|
||||
Reference in New Issue
Block a user