273 lines
12 KiB
JavaScript
273 lines
12 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { FadeIn, SlideInLeft, SlideInRight, ScaleIn, StaggerContainer, StaggerItem, HoverScale, PageTransition } from "../components/Motion";
|
|
|
|
export default function Home() {
|
|
// Statistics data
|
|
const stats = [
|
|
{ value: "100+", label: "Projects Completed" },
|
|
{ value: "5+", label: "Expert Team Members" },
|
|
{ value: "15+", label: "Years Experience" },
|
|
{ value: "99%", label: "Client Satisfaction" },
|
|
];
|
|
|
|
// Services overview
|
|
const services = [
|
|
{
|
|
title: "Web Hosting and CMS",
|
|
description: "Professional web hosting and ready CMS solutions for your business",
|
|
icon: "/images/webhosting2.jpg",
|
|
link: "/services"
|
|
},
|
|
{
|
|
title: "Custom Web Development",
|
|
description: "Modern web applications with cutting-edge technologies",
|
|
icon: "/images/webapps.jpg",
|
|
link: "/services"
|
|
},
|
|
{
|
|
title: "Mobile App Development",
|
|
description: "Cross-platform and native mobile applications",
|
|
icon: "/images/mobiledev.jpg",
|
|
link: "/services"
|
|
},
|
|
{
|
|
title: "Managed VPS Services",
|
|
description: "Professional server management and hosting solutions",
|
|
icon: "/images/forex1.jpg",
|
|
link: "/services"
|
|
},
|
|
];
|
|
|
|
// Features
|
|
const features = [
|
|
{
|
|
title: "Cutting-Edge Tech",
|
|
description: "We use the latest technologies to deliver modern, scalable solutions.",
|
|
icon: "/images/tech.jpg"
|
|
},
|
|
{
|
|
title: "Expert Team",
|
|
description: "Our team of professionals brings years of leading industry experience.",
|
|
icon: "/images/dev.jpg"
|
|
},
|
|
{
|
|
title: "24/7 Support",
|
|
description: "Round-the-clock technical support to ensure your systems run smoothly.",
|
|
icon: "/images/support.jpg"
|
|
},
|
|
{
|
|
title: "Tailored Solutions",
|
|
description: "Custom solutions designed specifically for your business needs.",
|
|
icon: "/images/coding.jpg"
|
|
},
|
|
];
|
|
|
|
// Testimonials
|
|
const testimonials = [
|
|
{
|
|
quote: "YznApps transformed our online presence with a beautiful, functional website that perfectly represents our brand.",
|
|
author: "Sarah Johnson",
|
|
company: "TechStart Inc."
|
|
},
|
|
{
|
|
quote: "The mobile app developed by YznApps helped us increase customer engagement by 200%. Highly recommended!",
|
|
author: "Michael Chen",
|
|
company: "GrowthBox"
|
|
},
|
|
{
|
|
quote: "Their VPS hosting service is reliable, fast, and their support team is always available when we need them.",
|
|
author: "David Williams",
|
|
company: "DataFlow Systems"
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div className="flex flex-col w-full">
|
|
{/* Hero Section */}
|
|
<FadeIn>
|
|
<section className="relative bg-gray-900 text-white py-20 md:py-28">
|
|
<div className="absolute inset-0 z-0 opacity-30">
|
|
<Image
|
|
src="/images/herosectionimage.jpg"
|
|
alt="IT Solutions Background"
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="max-w-3xl">
|
|
<SlideInLeft delay={0.2}>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Professional IT Solutions for Your Business</h1>
|
|
</SlideInLeft>
|
|
<SlideInLeft delay={0.4}>
|
|
<p className="text-xl md:text-2xl mb-8">Web development, mobile apps, hosting, and VPS services tailored to your needs</p>
|
|
</SlideInLeft>
|
|
<SlideInLeft delay={0.6}>
|
|
<div className="flex flex-wrap gap-4">
|
|
<HoverScale>
|
|
<Link href="/services" className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300">
|
|
Our Services
|
|
</Link>
|
|
</HoverScale>
|
|
<HoverScale>
|
|
<Link href="/contact" className="bg-transparent hover:bg-white/10 text-white font-semibold py-3 px-6 rounded-md border border-white transition duration-300">
|
|
Contact Us
|
|
</Link>
|
|
</HoverScale>
|
|
</div>
|
|
</SlideInLeft>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Statistics Section */}
|
|
<FadeIn delay={0.2}>
|
|
<section className="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Our Impact in Numbers</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">We've helped businesses of all sizes achieve their technology goals</p>
|
|
</div>
|
|
<StaggerContainer className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
{stats.map((stat, index) => (
|
|
<StaggerItem key={index}>
|
|
<ScaleIn delay={index * 0.1}>
|
|
<div className="text-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300">
|
|
<div className="text-3xl md:text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">{stat.value}</div>
|
|
<div className="text-gray-600 dark:text-gray-300">{stat.label}</div>
|
|
</div>
|
|
</ScaleIn>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Services Section */}
|
|
<FadeIn delay={0.3}>
|
|
<section className="py-16 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Our Services</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Comprehensive IT solutions to help your business thrive</p>
|
|
</div>
|
|
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{services.map((service, index) => (
|
|
<StaggerItem key={index}>
|
|
<HoverScale>
|
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 h-full">
|
|
<div className="h-48 relative">
|
|
<Image
|
|
src={service.icon}
|
|
alt={service.title}
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{service.title}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4">{service.description}</p>
|
|
<Link href={service.link} className="text-blue-600 dark:text-blue-400 font-medium hover:underline">
|
|
Learn more →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</HoverScale>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
<div className="text-center mt-10">
|
|
<HoverScale>
|
|
<Link href="/services" className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300">
|
|
View All Services
|
|
</Link>
|
|
</HoverScale>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Features Section */}
|
|
<FadeIn delay={0.4}>
|
|
<section className="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Why Choose Us</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">What sets us apart from the competition</p>
|
|
</div>
|
|
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{features.map((feature, index) => (
|
|
<StaggerItem key={index}>
|
|
<ScaleIn delay={index * 0.1}>
|
|
<div className="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 h-full">
|
|
<div className="h-40 relative">
|
|
<Image
|
|
src={feature.icon}
|
|
alt={feature.title}
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{feature.title}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
</ScaleIn>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Testimonials Section */}
|
|
<FadeIn delay={0.5}>
|
|
<section className="py-16 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">What Our Clients Say</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Don't just take our word for it</p>
|
|
</div>
|
|
<StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{testimonials.map((testimonial, index) => (
|
|
<StaggerItem key={index}>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<svg className="h-8 w-8 text-blue-600 dark:text-blue-400 mb-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
|
</svg>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 italic">{testimonial.quote}</p>
|
|
<div className="font-medium text-gray-900 dark:text-white">{testimonial.author}</div>
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">{testimonial.company}</div>
|
|
</div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Call to Action */}
|
|
<FadeIn delay={0.6}>
|
|
<section className="py-16 bg-blue-600 text-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss how our IT solutions can help you achieve your goals</p>
|
|
<HoverScale>
|
|
<Link href="/contact" className="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-8 rounded-md transition duration-300 inline-block">
|
|
Get Started
|
|
</Link>
|
|
</HoverScale>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
}
|