c1

app/about/page.js

@@ -0,0 +1,209 @@
+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>
+  );
+}

app/contact/page.js

@@ -0,0 +1,238 @@
+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 Contact() {
+  // Contact information from info.txt
+  const contactInfo = {
+    address: "Al Hashmi Street, Irbid City, 21110",
+    email: "contact@yznapps.com",
+    phone: "+962 (781) 881-280"
+  };
+
+  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/forex2.jpg" 
+                alt="Contact 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">Contact Us</h1>
+                </SlideInLeft>
+                <SlideInLeft delay={0.4}>
+                  <p className="text-lg md:text-xl mb-8">Get in touch with our team to discuss your IT needs</p>
+                </SlideInLeft>
+              </div>
+            </div>
+          </section>
+        </FadeIn>
+
+        {/* Contact 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="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                {/* Contact Form */}
+                <SlideInLeft delay={0.4}>
+                  <div className="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-md">
+                    <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Send Us a Message</h2>
+                    <form className="space-y-6">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
+                          <input 
+                            type="text" 
+                            id="name" 
+                            name="name" 
+                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
+                            placeholder="John Doe" 
+                            required 
+                          />
+                        </div>
+                        <div>
+                          <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label>
+                          <input 
+                            type="email" 
+                            id="email" 
+                            name="email" 
+                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
+                            placeholder="john@example.com" 
+                            required 
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
+                        <input 
+                          type="text" 
+                          id="subject" 
+                          name="subject" 
+                          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
+                          placeholder="How can we help you?" 
+                          required 
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
+                        <textarea 
+                          id="message" 
+                          name="message" 
+                          rows="5" 
+                          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
+                          placeholder="Tell us about your project..." 
+                          required
+                        ></textarea>
+                      </div>
+                      <div>
+                        <HoverScale>
+                          <button 
+                            type="submit" 
+                            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300"
+                          >
+                            Send Message
+                          </button>
+                        </HoverScale>
+                      </div>
+                    </form>
+                  </div>
+                </SlideInLeft>
+                
+                {/* Contact Information */}
+                <SlideInRight delay={0.4}>
+                  <div className="flex flex-col justify-between">
+                    <div>
+                      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h2>
+                      <p className="text-gray-600 dark:text-gray-300 mb-8">
+                        Have questions or need assistance? Our team is here to help. Reach out to us using any of the methods below.
+                      </p>
+                      
+                      <StaggerContainer className="space-y-6">
+                        <StaggerItem>
+                          <div className="flex items-start">
+                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                              </svg>
+                            </div>
+                            <div className="ml-4">
+                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Address</h3>
+                              <p className="mt-1 text-gray-600 dark:text-gray-300">{contactInfo.address}</p>
+                            </div>
+                          </div>
+                        </StaggerItem>
+                        
+                        <StaggerItem>
+                          <div className="flex items-start">
+                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                              </svg>
+                            </div>
+                            <div className="ml-4">
+                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Email</h3>
+                              <p className="mt-1 text-gray-600 dark:text-gray-300">
+                                <a href={`mailto:${contactInfo.email}`} className="hover:text-blue-600 dark:hover:text-blue-400">
+                                  {contactInfo.email}
+                                </a>
+                              </p>
+                            </div>
+                          </div>
+                        </StaggerItem>
+                        
+                        <StaggerItem>
+                          <div className="flex items-start">
+                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                              </svg>
+                            </div>
+                            <div className="ml-4">
+                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Phone</h3>
+                              <p className="mt-1 text-gray-600 dark:text-gray-300">
+                                <a href={`tel:${contactInfo.phone}`} className="hover:text-blue-600 dark:hover:text-blue-400">
+                                  {contactInfo.phone}
+                                </a>
+                              </p>
+                            </div>
+                          </div>
+                        </StaggerItem>
+                      </StaggerContainer>
+                    </div>
+                    
+                    {/* Map or Image */}
+                    <ScaleIn delay={0.6}>
+                      <div className="mt-12 h-64 relative rounded-lg overflow-hidden shadow-lg">
+                        <Image 
+                          src="/images/website.jpg" 
+                          alt="Office Location" 
+                          fill 
+                          style={{objectFit: 'cover'}} 
+                        />
+                        <div className="absolute inset-0 bg-blue-600 bg-opacity-20 flex items-center justify-center">
+                          <span className="text-white text-lg font-semibold px-4 py-2 bg-black bg-opacity-50 rounded-md">Our Office Location</span>
+                        </div>
+                      </div>
+                    </ScaleIn>
+                  </div>
+                </SlideInRight>
+              </div>
+            </div>
+          </section>
+        </FadeIn>
+
+        {/* FAQ Section */}
+        <FadeIn delay={0.5}>
+          <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">Frequently Asked Questions</h2>
+                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Find quick answers to common questions</p>
+              </div>
+              
+              <div className="max-w-3xl mx-auto space-y-6">
+                <StaggerContainer className="space-y-6">
+                  <StaggerItem>
+                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">What services do you offer?</h3>
+                      <p className="text-gray-600 dark:text-gray-300">We offer a comprehensive range of IT services including web development, mobile app development, web hosting, CMS solutions, and managed VPS services.</p>
+                    </div>
+                  </StaggerItem>
+                  <StaggerItem>
+                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How much does a typical project cost?</h3>
+                      <p className="text-gray-600 dark:text-gray-300">Project costs vary depending on requirements, complexity, and timeline. We provide detailed quotes after an initial consultation to understand your specific needs.</p>
+                    </div>
+                  </StaggerItem>
+                  <StaggerItem>
+                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How long does it take to complete a project?</h3>
+                      <p className="text-gray-600 dark:text-gray-300">Project timelines depend on scope and complexity. A simple website might take 2-4 weeks, while complex web applications or mobile apps can take several months. We'll provide a timeline estimate during our initial discussions.</p>
+                    </div>
+                  </StaggerItem>
+                  <StaggerItem>
+                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Do you provide ongoing support after project completion?</h3>
+                      <p className="text-gray-600 dark:text-gray-300">Yes, we offer ongoing support and maintenance packages after project completion. Our support includes bug fixes, security updates, performance optimization, and technical assistance to ensure your solution continues to run smoothly.</p>
+                    </div>
+                  </StaggerItem>
+                </StaggerContainer>
+              </div>
+            </div>
+          </section>
+        </FadeIn>
+      </div>
+    </PageTransition>
+  );
+}

app/globals.css

@@ -20,6 +20,10 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+.my-image {
+  image-resolution: from-image 300dpi;
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

app/layout.js

@@ -1,5 +1,8 @@
 import localFont from "next/font/local";
 import "./globals.css";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import MotionProvider from "../components/MotionProvider";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -13,17 +16,21 @@ const geistMono = localFont({
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "YznApps - Professional IT Solutions",
+  description: "YznApps provides professional IT solutions including web development, mobile apps, hosting, and VPS services.",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}>
+        <Navbar />
+        <main className="flex-grow pt-16">
+          <MotionProvider>
             {children}
+          </MotionProvider>
+        </main>
+        <Footer />
       </body>
     </html>
   );

app/page.js

@@ -1,101 +1,272 @@
 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 (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+    <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 
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
+                src="/images/herosectionimage.jpg" 
+                alt="IT Solutions Background" 
+                fill 
+                style={{objectFit: 'cover'}} 
                 priority 
               />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+            </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>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+        {/* 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>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+              <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>
   );
 }

app/services/page.js

@@ -0,0 +1,169 @@
+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 Services() {
+  // Service categories data from info.txt
+  const serviceCategories = [
+    {
+      title: "Web Hosting & CMS Solutions",
+      description: "Professional hosting and content management system implementations",
+      services: [
+        "WordPress - Industry-leading CMS for blogs and business websites",
+        "Joomla - Flexible CMS for complex content structures",
+        "Drupal - Enterprise-grade CMS for large organizations",
+        "Moodle - Specialized learning management system",
+        "Custom hosting solutions with expert support"
+      ],
+      technologies: "WordPress • Joomla • Drupal • Moodle",
+      image: "/images/webhosting2.jpg"
+    },
+    {
+      title: "Custom Web Development",
+      description: "Modern web applications built with cutting-edge frameworks",
+      services: [
+        "Laravel - PHP framework for robust web applications",
+        ".NET - Enterprise solutions with Microsoft technology",
+        "Node.js/Express - Fast and scalable JavaScript backend",
+        "Next.js & React - Modern frontend development",
+        "Django & Flask - Python-based web solutions"
+      ],
+      technologies: "Laravel • .NET • Node.js • Next.js • Django • Flask",
+      image: "/images/customsystems.jpg"
+    },
+    {
+      title: "Mobile App Development",
+      description: "Cross-platform and native mobile applications",
+      services: [
+        "React Native - Cross-platform apps with native performance",
+        "Flutter - Beautiful and fast mobile applications",
+        "Native iOS and Android development",
+        "Progressive Web Apps (PWA)",
+        "Mobile app maintenance and updates"
+      ],
+      technologies: "React Native • Flutter • iOS • Android • PWA",
+      image: "/images/mobiledev.jpg"
+    },
+    {
+      title: "Managed VPS Services",
+      description: "Professional server management and hosting solutions",
+      services: [
+        "Linux VPS - Ubuntu, CentOS, and Debian servers",
+        "Windows Server VPS - Professional Windows hosting",
+        "Forex VPS - Low-latency trading solutions",
+        "Cloud VPS - Scalable cloud hosting",
+        "Managed security and backups"
+      ],
+      technologies: "Linux • Windows Server • Cloud • DevOps",
+      image: "/images/forex1.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/website.jpg" 
+                alt="IT Services 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">Our Services</h1>
+                </SlideInLeft>
+                <SlideInLeft delay={0.4}>
+                  <p className="text-lg md:text-xl mb-8">Comprehensive IT solutions tailored to your business needs</p>
+                </SlideInLeft>
+              </div>
+            </div>
+          </section>
+        </FadeIn>
+
+        {/* Services Categories */}
+        <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">What We Offer</h2>
+                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Explore our range of professional IT services</p>
+              </div>
+              
+              <div className="space-y-16">
+                {serviceCategories.map((category, index) => (
+                  <FadeIn key={index} delay={0.2 * index}>
+                    <div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 items-center`}>
+                      <div className="w-full md:w-1/2 h-64 md:h-96 relative rounded-lg overflow-hidden shadow-lg">
+                        <Image 
+                          src={category.image} 
+                          alt={category.title} 
+                          fill 
+                          style={{objectFit: 'cover'}} 
+                        />
+                      </div>
+                      <div className="w-full md:w-1/2 space-y-4">
+                        <SlideInLeft delay={0.3 + (0.1 * index)}>
+                          <h3 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{category.title}</h3>
+                          <p className="text-lg text-gray-600 dark:text-gray-300">{category.description}</p>
+                        </SlideInLeft>
+                        
+                        <ScaleIn delay={0.4 + (0.1 * index)}>
+                          <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
+                            <h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Services Include:</h4>
+                            <StaggerContainer>
+                              <ul className="space-y-2">
+                                {category.services.map((service, i) => (
+                                  <StaggerItem key={i}>
+                                    <li className="flex items-start">
+                                      <svg className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                                      </svg>
+                                      <span className="text-gray-700 dark:text-gray-300">{service}</span>
+                                    </li>
+                                  </StaggerItem>
+                                ))}
+                              </ul>
+                            </StaggerContainer>
+                          </div>
+                        </ScaleIn>
+                        
+                        <SlideInLeft delay={0.5 + (0.1 * index)}>
+                          <div className="pt-4">
+                            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Technologies:</p>
+                            <p className="text-gray-700 dark:text-gray-300">{category.technologies}</p>
+                          </div>
+                        </SlideInLeft>
+                      </div>
+                    </div>
+                  </FadeIn>
+                ))}
+              </div>
+            </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 Get Started?</h2>
+              <p className="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss your project requirements</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">
+                  Contact Us
+                </Link>
+              </HoverScale>
+            </div>
+          </section>
+        </FadeIn>
+      </div>
+    </PageTransition>
+  );
+}

components/Footer.js

@@ -0,0 +1,135 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-100 dark:bg-gray-900 pt-12 pb-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Company Info */}
+          <div className="col-span-1">
+            <div className="flex items-center mb-4">
+              <Image
+                src="/images/logo.png"
+                alt="YznApps Logo"
+                width={40}
+                height={40}
+                className="h-10 w-auto"
+              />
+              <span className="ml-2 text-xl font-bold text-gray-800 dark:text-white"></span>
+            </div>
+            <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
+              Professional IT solutions for businesses of all sizes. We deliver innovative technology services to help your business grow.
+            </p>
+            <div className="flex space-x-4">
+              <a href="#" className="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400">
+                <span className="sr-only">Facebook</span>
+                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
+                </svg>
+              </a>
+              <a href="#" className="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400">
+                <span className="sr-only">Twitter</span>
+                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                </svg>
+              </a>
+              <a href="#" className="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400">
+                <span className="sr-only">LinkedIn</span>
+                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          
+          {/* Quick Links */}
+          <div className="col-span-1">
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-4">Quick Links</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link href="/services" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Services
+                </Link>
+              </li>
+              <li>
+                <Link href="/about" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/contact" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Contact
+                </Link>
+              </li>
+            </ul>
+          </div>
+          
+          {/* Services */}
+          <div className="col-span-1">
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-4">Services</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/services" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Web Hosting & CMS
+                </Link>
+              </li>
+              <li>
+                <Link href="/services" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Custom Web Development
+                </Link>
+              </li>
+              <li>
+                <Link href="/services" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Mobile App Development
+                </Link>
+              </li>
+              <li>
+                <Link href="/services" className="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 text-sm">
+                  Managed VPS Services
+                </Link>
+              </li>
+            </ul>
+          </div>
+          
+          {/* Contact Info */}
+          <div className="col-span-1">
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-4">Contact Us</h3>
+            <ul className="space-y-2">
+              <li className="flex items-start">
+                <svg className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                <span className="text-gray-600 dark:text-gray-400 text-sm">Al Hashmi Street, Irbid City, 21110</span>
+              </li>
+              <li className="flex items-start">
+                <svg className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                <span className="text-gray-600 dark:text-gray-400 text-sm">contact@yznapps.com</span>
+              </li>
+              <li className="flex items-start">
+                <svg className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                </svg>
+                <span className="text-gray-600 dark:text-gray-400 text-sm">+962 (781) 881-280</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        
+        <div className="mt-12 border-t border-gray-200 dark:border-gray-800 pt-8">
+          <p className="text-gray-500 dark:text-gray-400 text-sm text-center">
+            &copy; {new Date().getFullYear()} YznApps. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Motion.js

@@ -0,0 +1,121 @@
+"use client";
+
+import { motion } from 'framer-motion';
+
+// Fade in animation for sections and components
+export function FadeIn({ children, delay = 0, duration = 0.5, className = "" }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration, delay }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Slide in animation from left
+export function SlideInLeft({ children, delay = 0, duration = 0.5, className = "" }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: -50 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration, delay }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Slide in animation from right
+export function SlideInRight({ children, delay = 0, duration = 0.5, className = "" }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: 50 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration, delay }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Scale animation for cards and buttons
+export function ScaleIn({ children, delay = 0, duration = 0.5, className = "" }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration, delay }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Stagger children animations
+export function StaggerContainer({ children, staggerDelay = 0.1, className = "" }) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: staggerDelay
+          }
+        }
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Stagger child item
+export function StaggerItem({ children, duration = 0.5, className = "" }) {
+  return (
+    <motion.div
+      variants={{
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0, transition: { duration } }
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Page transition component
+export function PageTransition({ children }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Hover animation for interactive elements
+export function HoverScale({ children, scale = 1.05, className = "" }) {
+  return (
+    <motion.div
+      whileHover={{ scale }}
+      transition={{ type: "spring", stiffness: 400, damping: 10 }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}

components/MotionProvider.js

@@ -0,0 +1,11 @@
+"use client";
+
+import { AnimatePresence } from 'framer-motion';
+
+export default function MotionProvider({ children }) {
+  return (
+    <AnimatePresence mode="wait">
+      {children}
+    </AnimatePresence>
+  );
+}

components/Navbar.js

@@ -0,0 +1,90 @@
+"use client";
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { useState } from 'react';
+
+export default function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <nav className="bg-white shadow-md dark:bg-gray-900 fixed w-full z-20 top-0 left-0">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <Link href="/" className="flex-shrink-0 flex items-center">
+              <Image
+                src="/images/logo.png"
+                alt="YznApps Logo"
+                width={40}
+                height={40}
+                className="h-11 w-auto my-image"
+              />
+              <span className="ml-2 text-xl font-bold text-gray-800 dark:text-white"></span>
+            </Link>
+          </div>
+          
+          {/* Desktop menu */}
+          <div className="hidden md:flex items-center space-x-4">
+            <Link href="/" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
+              Home
+            </Link>
+            <Link href="/services" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
+              Services
+            </Link>
+            <Link href="/about" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
+              About Us
+            </Link>
+            <Link href="/contact" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
+              Contact
+            </Link>
+          </div>
+          
+          {/* Mobile menu button */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={toggleMenu}
+              type="button"
+              className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
+              aria-controls="mobile-menu"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+              {!isMenuOpen ? (
+                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              ) : (
+                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu, show/hide based on menu state */}
+      <div className={`md:hidden ${isMenuOpen ? 'block' : 'hidden'}`} id="mobile-menu">
+        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white dark:bg-gray-900 shadow-lg">
+          <Link href="/" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium">
+            Home
+          </Link>
+          <Link href="/services" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium">
+            Services
+          </Link>
+          <Link href="/about" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium">
+            About Us
+          </Link>
+          <Link href="/contact" className="text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium">
+            Contact
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}

package-lock.json

@@ -8,6 +8,7 @@
       "name": "website",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.4.7",
         "next": "14.2.23",
         "react": "^18",
         "react-dom": "^18"
@@ -603,6 +604,32 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
+      "dependencies": {
+        "motion-dom": "^12.4.5",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -857,6 +884,19 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^12.4.7",
+    "next": "14.2.23",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.23"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "postcss": "^8",