209 lines
9.1 KiB
JavaScript
209 lines
9.1 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 About() {
|
|
// Features data from info.txt
|
|
const features = [
|
|
{
|
|
title: "Innovation",
|
|
description: "We stay ahead of the curve with cutting-edge technologies and modern development practices.",
|
|
icon: "/images/innovation2.jpg"
|
|
},
|
|
{
|
|
title: "Experience",
|
|
description: "Our team brings years of expertise in web, mobile, and cloud development solutions.",
|
|
icon: "/images/dev.jpg"
|
|
},
|
|
{
|
|
title: "Quality",
|
|
description: "We deliver robust, scalable, and high-performance solutions that exceed expectations.",
|
|
icon: "/images/innovation.jpg"
|
|
},
|
|
{
|
|
title: "Support",
|
|
description: "24/7 technical support and maintenance to ensure your systems run smoothly.",
|
|
icon: "/images/support.jpg"
|
|
}
|
|
];
|
|
|
|
// Team members data from info.txt
|
|
const team = [
|
|
{
|
|
name: "John Doe",
|
|
role: "CEO & Founder",
|
|
bio: "15+ years of experience in tech leadership and innovation.",
|
|
image: "/images/webapps.jpg"
|
|
},
|
|
{
|
|
name: "Jane Smith",
|
|
role: "Lead Developer",
|
|
bio: "Expert in full-stack development and cloud architecture.",
|
|
image: "/images/websiedesign.jpg"
|
|
},
|
|
{
|
|
name: "Mike Johnson",
|
|
role: "Design Director",
|
|
bio: "Award-winning UI/UX designer with a passion for user-centric design.",
|
|
image: "/images/coding3.jpg"
|
|
},
|
|
{
|
|
name: "Sarah Wilson",
|
|
role: "Project Manager",
|
|
bio: "Certified PMP with extensive experience in agile methodologies.",
|
|
image: "/images/hosting.jpg"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div className="flex flex-col w-full">
|
|
{/* Hero Section */}
|
|
<FadeIn>
|
|
<section className="relative bg-gray-900 text-white py-16 md:py-24">
|
|
<div className="absolute inset-0 z-0 opacity-30">
|
|
<Image
|
|
src="/images/coding3.jpg"
|
|
alt="About Us 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-3xl md:text-4xl lg:text-5xl font-bold mb-6">About YznApps</h1>
|
|
</SlideInLeft>
|
|
<SlideInLeft delay={0.4}>
|
|
<p className="text-lg md:text-xl mb-8">We're a team of passionate IT professionals dedicated to delivering exceptional technology solutions</p>
|
|
</SlideInLeft>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Company Overview */}
|
|
<FadeIn delay={0.2}>
|
|
<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="flex flex-col md:flex-row gap-12 items-center">
|
|
<div className="w-full md:w-1/2 h-64 md:h-96 relative rounded-lg overflow-hidden shadow-lg">
|
|
<Image
|
|
src="/images/webdevelopment.jpg"
|
|
alt="YznApps Team"
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-1/2 space-y-6">
|
|
<SlideInRight delay={0.3}>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">Our Story</h2>
|
|
</SlideInRight>
|
|
<SlideInRight delay={0.4}>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300">
|
|
YznApps was founded with a simple mission: to provide businesses with innovative, reliable, and scalable IT solutions.
|
|
Over the years, we've grown from a small team of developers to a comprehensive IT service provider, helping businesses
|
|
of all sizes transform their digital presence and operations.
|
|
</p>
|
|
</SlideInRight>
|
|
<SlideInRight delay={0.5}>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300">
|
|
We believe in building long-term relationships with our clients, understanding their unique challenges, and delivering
|
|
solutions that drive real business value. Our team combines technical expertise with industry knowledge to ensure that
|
|
every project we undertake exceeds expectations.
|
|
</p>
|
|
</SlideInRight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Core Values/Features */}
|
|
<FadeIn delay={0.3}>
|
|
<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 Core Values</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">The principles that guide everything we do</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">
|
|
<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>
|
|
|
|
{/* Team Section */}
|
|
<FadeIn delay={0.4}>
|
|
<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">Meet Our Team</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">The experts behind our success</p>
|
|
</div>
|
|
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{team.map((member, 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">
|
|
<div className="h-64 relative">
|
|
<Image
|
|
src={member.image}
|
|
alt={member.name}
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">{member.name}</h3>
|
|
<p className="text-blue-600 dark:text-blue-400 font-medium mb-3">{member.role}</p>
|
|
<p className="text-gray-600 dark:text-gray-300">{member.bio}</p>
|
|
</div>
|
|
</div>
|
|
</HoverScale>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Call to Action */}
|
|
<FadeIn delay={0.5}>
|
|
<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 Work With Us?</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto">Contact our team today to discuss how we can help with your IT needs</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 in Touch
|
|
</Link>
|
|
</HoverScale>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
} |