Initial commit
This commit is contained in:
26
src/App.js
Normal file
26
src/App.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import Header from './components/Header';
|
||||
import Hero from './components/Hero';
|
||||
import Features from './components/Features';
|
||||
import TeamAugmentation from './components/TeamAugmentation';
|
||||
import Companies from './components/Companies';
|
||||
import Services from './components/Services';
|
||||
import CTA from './components/CTA';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Hero />
|
||||
<Features />
|
||||
<TeamAugmentation />
|
||||
<Companies />
|
||||
<Services />
|
||||
<CTA />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
61
src/components/CTA.js
Normal file
61
src/components/CTA.js
Normal file
@@ -0,0 +1,61 @@
|
||||
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 CTA = () => {
|
||||
const shouldReduce = useReducedMotion();
|
||||
|
||||
if (shouldReduce) {
|
||||
return (
|
||||
<section className="section-padding bg-gray-900">
|
||||
<div className="container-custom text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Explore enterprise services today.
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||
Let's achieve your most ambitious goals - together.
|
||||
</p>
|
||||
<button className="btn-primary">
|
||||
Contact us
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 1.0)}
|
||||
className="section-padding bg-gray-900"
|
||||
>
|
||||
<div className="container-custom text-center">
|
||||
<motion.h2
|
||||
{...fadeUpPreset(0.2, 1.0)}
|
||||
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
||||
>
|
||||
Explore enterprise services today.
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
{...fadeUpPreset(0.3, 1.0)}
|
||||
className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"
|
||||
>
|
||||
Let's achieve your most ambitious goals - together.
|
||||
</motion.p>
|
||||
<motion.button
|
||||
{...fadeUpPreset(0.4, 1.0)}
|
||||
className="btn-primary"
|
||||
>
|
||||
Contact us
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CTA;
|
||||
108
src/components/Companies.js
Normal file
108
src/components/Companies.js
Normal file
@@ -0,0 +1,108 @@
|
||||
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 Companies = () => {
|
||||
const shouldReduce = useReducedMotion();
|
||||
|
||||
const companies = [
|
||||
{ name: 'Sanofi', logo: 'https://enterprise.nestjs.com/assets/logos/sanofi.svg' },
|
||||
{ name: 'Adidas', logo: 'https://enterprise.nestjs.com/assets/logos/adidas.svg' },
|
||||
{ name: 'Autodesk', logo: 'https://enterprise.nestjs.com/assets/logos/autodesk.svg' },
|
||||
{ name: 'Mercedes-Benz', logo: 'https://enterprise.nestjs.com/assets/logos/mercedes.svg' },
|
||||
{ name: 'GitLab', logo: 'https://enterprise.nestjs.com/assets/logos/gitlab.svg' },
|
||||
{ name: 'Red Hat', logo: 'https://enterprise.nestjs.com/assets/logos/redhat.svg' },
|
||||
{ name: 'Roche', logo: 'https://enterprise.nestjs.com/assets/logos/roche.svg' },
|
||||
{ name: 'IBM', logo: 'https://enterprise.nestjs.com/assets/logos/ibm.svg' },
|
||||
{ name: 'Decathlon', logo: 'https://enterprise.nestjs.com/assets/logos/decathlon.svg' },
|
||||
{ name: 'Societe Generale', logo: 'https://enterprise.nestjs.com/assets/logos/sg.svg' },
|
||||
{ name: 'Swissquote', logo: 'https://enterprise.nestjs.com/assets/logos/swissquote.svg' },
|
||||
{ name: 'Capgemini', logo: 'https://enterprise.nestjs.com/assets/logos/capgemini.svg' },
|
||||
{ name: 'REWE', logo: 'https://enterprise.nestjs.com/assets/logos/rewe.svg' }
|
||||
];
|
||||
|
||||
if (shouldReduce) {
|
||||
return (
|
||||
<section className="section-padding bg-white">
|
||||
<div className="container-custom text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Who is using Nest?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-12">
|
||||
Nest is proudly powering a large ecosystem of enterprises and products out there.
|
||||
</p>
|
||||
<p className="text-gray-500 mb-12">
|
||||
Wanna see your logo here? <a href="#" className="text-brand-red hover:underline">Find out more!</a>
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-items-center">
|
||||
{companies.map((company, index) => (
|
||||
<div key={index} className="flex items-center justify-center h-16 w-32 grayscale hover:grayscale-0 transition-all duration-300">
|
||||
<img
|
||||
src={company.logo}
|
||||
alt={company.name}
|
||||
className="max-h-12 max-w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 1.0)}
|
||||
className="section-padding bg-white"
|
||||
>
|
||||
<div className="container-custom text-center">
|
||||
<motion.h2
|
||||
{...fadeUpPreset(0.2, 1.0)}
|
||||
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
||||
>
|
||||
Who is using Nest?
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
{...fadeUpPreset(0.3, 1.0)}
|
||||
className="text-xl text-gray-600 mb-12"
|
||||
>
|
||||
Nest is proudly powering a large ecosystem of enterprises and products out there.
|
||||
</motion.p>
|
||||
<motion.p
|
||||
{...fadeUpPreset(0.4, 1.0)}
|
||||
className="text-gray-500 mb-12"
|
||||
>
|
||||
Wanna see your logo here? <a href="#" className="text-brand-red hover:underline">Find out more!</a>
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.5, 1.0)}
|
||||
className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-items-center"
|
||||
>
|
||||
{companies.map((company, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
{...fadeUpPreset(0.6 + index * 0.05, 0.8)}
|
||||
className="flex items-center justify-center h-16 w-32 grayscale hover:grayscale-0 transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
src={company.logo}
|
||||
alt={company.name}
|
||||
className="max-h-12 max-w-full object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Companies;
|
||||
96
src/components/Features.js
Normal file
96
src/components/Features.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Check } 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 Features = () => {
|
||||
const shouldReduce = useReducedMotion();
|
||||
|
||||
const features = [
|
||||
"Providing technical guidance & architectural reviews",
|
||||
"Mentoring team members",
|
||||
"Advising best practices",
|
||||
"Addressing security & performance concerns",
|
||||
"Performing in-depth code reviews",
|
||||
"Long-term support LTS & upgrade assistance"
|
||||
];
|
||||
|
||||
if (shouldReduce) {
|
||||
return (
|
||||
<section className="section-padding bg-gray-50">
|
||||
<div className="container-custom">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
Accelerate your development
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
We work alongside you to meet your deadlines while avoiding costly tech debt. Challenging issue? We've got you covered.
|
||||
</p>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Our Nest core team got you covered! Nest core team members will help you define best practices and choose the right strategy for your goals.
|
||||
</p>
|
||||
<a href="#" className="text-brand-red font-medium hover:underline">
|
||||
Contact us to learn more
|
||||
</a>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start space-x-3">
|
||||
<Check className="w-5 h-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 1.0)}
|
||||
className="section-padding bg-gray-50"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<motion.div {...fadeUpPreset(0.2, 1.0)}>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
Accelerate your development
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
We work alongside you to meet your deadlines while avoiding costly tech debt. Challenging issue? We've got you covered.
|
||||
</p>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Our Nest core team got you covered! Nest core team members will help you define best practices and choose the right strategy for your goals.
|
||||
</p>
|
||||
<a href="#" className="text-brand-red font-medium hover:underline">
|
||||
Contact us to learn more
|
||||
</a>
|
||||
</motion.div>
|
||||
<motion.div {...fadeUpPreset(0.3, 1.0)} className="space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
{...fadeUpPreset(0.4 + index * 0.1, 0.8)}
|
||||
className="flex items-start space-x-3"
|
||||
>
|
||||
<Check className="w-5 h-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
84
src/components/Footer.js
Normal file
84
src/components/Footer.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Github, X, Send } from 'lucide-react';
|
||||
|
||||
const Footer = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log('Newsletter signup:', email);
|
||||
setEmail('');
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-100 py-12">
|
||||
<div className="container-custom">
|
||||
{/* Newsletter Section */}
|
||||
<div className="bg-white rounded-2xl p-8 mb-12">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Join our Newsletter
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Stay up to date with the latest NestJS features, tutorials, and news.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-brand-red text-white px-6 py-3 rounded-lg hover:bg-brand-red-dark transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Content */}
|
||||
<div className="text-center space-y-4">
|
||||
{/* Social Links */}
|
||||
<div className="flex justify-center space-x-6">
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<Github className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<X className="w-6 h-6" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Company Info */}
|
||||
<div className="space-y-2 text-sm text-gray-500">
|
||||
<p>
|
||||
Official NestJS Consulting{' '}
|
||||
<a href="#" className="text-brand-red hover:underline">
|
||||
Trilon.io
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Copyright © 2017- 2024{' '}
|
||||
<a href="#" className="text-brand-red hover:underline">
|
||||
Kamil Myśliwiec
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Designed by{' '}
|
||||
<a href="#" className="text-brand-red hover:underline">
|
||||
Jakub Staron
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
87
src/components/Header.js
Normal file
87
src/components/Header.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Menu, X, ChevronDown, Github } from 'lucide-react';
|
||||
|
||||
const Header = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isResourcesOpen, setIsResourcesOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-gray-900/95 backdrop-blur-sm border-b border-gray-800">
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 bg-brand-red rounded-lg flex items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white fill-current">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
OUR WEBSITE
|
||||
</a>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
COURSES
|
||||
</a>
|
||||
<div className="relative">
|
||||
<button
|
||||
className="flex items-center text-white hover:text-brand-red transition-colors"
|
||||
onClick={() => setIsResourcesOpen(!isResourcesOpen)}
|
||||
>
|
||||
<span className="bg-brand-red text-white text-xs px-2 py-1 rounded mr-2">
|
||||
NEW
|
||||
</span>
|
||||
RESOURCES
|
||||
<ChevronDown className="ml-1 w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden text-white"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden py-4 border-t border-gray-800">
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
OUR WEBSITE
|
||||
</a>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
COURSES
|
||||
</a>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
RESOURCES
|
||||
</a>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" className="text-white hover:text-brand-red transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
95
src/components/Hero.js
Normal file
95
src/components/Hero.js
Normal file
@@ -0,0 +1,95 @@
|
||||
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 shouldReduce = useReducedMotion();
|
||||
|
||||
if (shouldReduce) {
|
||||
return (
|
||||
<section className="relative min-h-screen bg-gray-900 flex items-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/90 to-transparent z-10"></div>
|
||||
<div className="absolute inset-0 bg-hero-pattern"></div>
|
||||
<div className="absolute right-0 top-0 w-1/2 h-full">
|
||||
<img
|
||||
src="https://enterprise.nestjs.com/assets/hero-cat.jpg"
|
||||
alt="Cat looking focused"
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-20">
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
Official support
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
|
||||
Our Experts become your development partner to eliminate project risk, tackling the most ambitious projects - right by your side.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="btn-primary">
|
||||
Get in touch
|
||||
</button>
|
||||
<button className="btn-secondary">
|
||||
Read more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 0.8)}
|
||||
className="relative min-h-screen bg-gray-900 flex items-center overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/90 to-transparent z-10"></div>
|
||||
<div className="absolute inset-0 bg-hero-pattern"></div>
|
||||
<div className="absolute right-0 top-0 w-1/2 h-full">
|
||||
<img
|
||||
src="https://enterprise.nestjs.com/assets/hero-cat.jpg"
|
||||
alt="Cat looking focused"
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-20">
|
||||
<div className="max-w-2xl">
|
||||
<motion.h1
|
||||
{...fadeUpPreset(0.2, 0.8)}
|
||||
className="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight"
|
||||
>
|
||||
Official support
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
{...fadeUpPreset(0.3, 0.8)}
|
||||
className="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed"
|
||||
>
|
||||
Our Experts become your development partner to eliminate project risk, tackling the most ambitious projects - right by your side.
|
||||
</motion.p>
|
||||
<motion.div
|
||||
{...fadeUpPreset(0.4, 0.8)}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<button className="btn-primary">
|
||||
Get in touch
|
||||
</button>
|
||||
<button className="btn-secondary">
|
||||
Read more
|
||||
</button>
|
||||
</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';
|
||||
import { Users, Settings, Zap, Search, Target, Award } 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 shouldReduce = useReducedMotion();
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "DEVELOPMENT",
|
||||
description: "Achieve your goals faster with Nest experts on your side. Challenging issues right by your side."
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
title: "TECHNICAL GUIDANCE",
|
||||
description: "Enable your team to get the most out of the technology. Ensure your solutions are secure and reliable."
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "MIGRATION ASSISTANCE",
|
||||
description: "We provide a comprehensive migration assistance, ensuring you are using the latest and greatest."
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "IN-DEPTH CODE REVIEWS",
|
||||
description: "Frequent code reviews can eliminate potentially hazardous bugs and issues at an early stage while enhancing best practices."
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "LONG-TERM SUPPORT (LTS)",
|
||||
description: "The peace of mind with Nest long-term support (LTS), priority fixes, upgrade assistance, and live troubleshooting."
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "TEAM TRAININGS",
|
||||
description: "Level up your team by having expert-led Nest trainings or workshops. Get everyone up to speed quickly."
|
||||
}
|
||||
];
|
||||
|
||||
if (shouldReduce) {
|
||||
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-6">
|
||||
How can we help you be successful?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Nest Enterprise Consulting includes a broad range of services to empower your team. We help you grow your business even long after our commitment is done.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{services.map((service, index) => {
|
||||
const IconComponent = service.icon;
|
||||
return (
|
||||
<div key={index} className="text-center p-6">
|
||||
<div className="w-16 h-16 bg-brand-red rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<IconComponent className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 1.0)}
|
||||
className="section-padding bg-gray-50"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<motion.div {...fadeUpPreset(0.2, 1.0)} className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
How can we help you be successful?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Nest Enterprise Consulting includes a broad range of services to empower your team. We help you grow your business even long after our commitment is done.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{services.map((service, index) => {
|
||||
const IconComponent = service.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
{...fadeUpPreset(0.3 + index * 0.1, 0.8)}
|
||||
className="text-center p-6"
|
||||
>
|
||||
<div className="w-16 h-16 bg-brand-red rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<IconComponent className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
78
src/components/TeamAugmentation.js
Normal file
78
src/components/TeamAugmentation.js
Normal file
@@ -0,0 +1,78 @@
|
||||
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 TeamAugmentation = () => {
|
||||
const shouldReduce = useReducedMotion();
|
||||
|
||||
if (shouldReduce) {
|
||||
return (
|
||||
<section className="section-padding bg-brand-red">
|
||||
<div className="container-custom">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="relative">
|
||||
<div className="bg-white rounded-3xl p-8 max-w-sm mx-auto">
|
||||
<img
|
||||
src="https://enterprise.nestjs.com/assets/team-cat.jpg"
|
||||
alt="Cat in modern chair"
|
||||
className="w-full h-64 object-cover rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-white">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Team augmentation. By your side at every step
|
||||
</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Nest core team members can work directly with your team on a daily basis to help take your project to the next level. Let us partner with you and your team to develop the most ambitious projects.
|
||||
</p>
|
||||
<button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
|
||||
Connect us to learn more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.section
|
||||
{...fadeUpPreset(0.1, 1.0)}
|
||||
className="section-padding bg-brand-red"
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<motion.div {...fadeUpPreset(0.2, 1.0)} className="relative">
|
||||
<div className="bg-white rounded-3xl p-8 max-w-sm mx-auto">
|
||||
<img
|
||||
src="https://enterprise.nestjs.com/assets/team-cat.jpg"
|
||||
alt="Cat in modern chair"
|
||||
className="w-full h-64 object-cover rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div {...fadeUpPreset(0.3, 1.0)} className="text-white">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Team augmentation. By your side at every step
|
||||
</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Nest core team members can work directly with your team on a daily basis to help take your project to the next level. Let us partner with you and your team to develop the most ambitious projects.
|
||||
</p>
|
||||
<button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
|
||||
Connect us to learn more
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamAugmentation;
|
||||
37
src/index.css
Normal file
37
src/index.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply font-sans antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-brand-red text-white px-8 py-3 rounded-full font-medium hover:bg-brand-red-dark transition-colors duration-200;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-gray-900 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;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
@apply bg-gradient-to-r from-brand-red to-pink-500 bg-clip-text text-transparent;
|
||||
}
|
||||
}
|
||||
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