main: enhance scroll styles and add CTA section

src/app/page.module.css

@@ -615,3 +615,77 @@
     height: 8px;
   }
 }
+
+/* CTA Section */
+.ctaSection {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #0F0525 0%, #2A0B45 100%);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  color: white;
+}
+
+.ctaSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots-cta" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(116, 0, 184, 0.3)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots-cta)"/></svg>');
+  opacity: 0.5;
+}
+
+.ctaContent {
+  position: relative;
+  z-index: 10;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.ctaTitle {
+  font-size: 3rem !important;
+  font-weight: 700 !important;
+  color: white !important;
+  margin-bottom: 24px !important;
+  line-height: 1.2 !important;
+}
+
+.ctaDescription {
+  font-size: 1.25rem !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+  margin-bottom: 40px !important;
+  line-height: 1.6 !important;
+}
+
+.ctaButton {
+  height: auto !important;
+  padding: 12px 40px !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  border-radius: 50px !important;
+  background: white !important;
+  color: #7400b8 !important;
+  border: none !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.ctaButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 768px) {
+  .ctaSection {
+    padding: 80px 16px;
+  }
+
+  .ctaTitle {
+    font-size: 2.2rem !important;
+  }
+
+  .ctaDescription {
+    font-size: 1.1rem !important;
+  }
+}

src/app/page.tsx

@@ -2,6 +2,7 @@
 "use client";
 
 import {
+  ArrowRightOutlined,
   BulbOutlined,
   ClockCircleOutlined,
   CodeOutlined,
@@ -10,7 +11,8 @@ import {
   StarOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
-import { Card, Col, Row, Statistic, Typography } from "antd";
+import { Button, Card, Col, Row, Statistic, Typography } from "antd";
+import { motion, useScroll, useSpring } from "framer-motion";
 import { useEffect, useState } from "react";
 import Footer from "./components/Footer/Footer";
 import HeroSection from "./components/Hero/HeroSection";
@@ -28,6 +30,13 @@ export default function Home() {
   const [showPreferences, setShowPreferences] = useState(true);
   const [loading, setLoading] = useState(true);
 
+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
   useEffect(() => {
     // Reading localStorage can only happen on the client; do it after mount.
     try {
@@ -58,6 +67,21 @@ export default function Home() {
     setShowPreferences(false);
   };
 
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 60 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
+  };
+
+  const staggerContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
   if (loading) {
     return (
       <div className={styles.loaderContainer}>
@@ -101,6 +125,21 @@ export default function Home() {
 
   return (
     <>
+      <motion.div
+        className="progress-bar"
+        style={{
+          scaleX,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "5px",
+          background: "linear-gradient(90deg, #7400b8, #56cfe1)",
+          transformOrigin: "0%",
+          zIndex: 1000,
+        }}
+      />
+
       {showPreferences && (
         <PreferencesSelector onComplete={handlePreferencesComplete} />
       )}
@@ -113,7 +152,13 @@ export default function Home() {
         {/* Services Section */}
         <section id="services" className={styles.servicesSection}>
           <div className={styles.container}>
-            <div className={styles.sectionHeader}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.sectionHeader}
+            >
               <Title level={2} className={styles.sectionTitle}>
                 Our Services
               </Title>
@@ -121,10 +166,17 @@ export default function Home() {
                 We offer comprehensive solutions to transform your digital
                 presence and drive business growth
               </Paragraph>
-            </div>
+            </motion.div>
 
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={staggerContainer}
+            >
               <Row gutter={[32, 32]} className={styles.servicesGrid}>
                 <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
                     <Card className={styles.serviceCard} hoverable>
                       <div className={styles.serviceIcon}>
                         <CodeOutlined />
@@ -133,8 +185,9 @@ export default function Home() {
                         Web Development
                       </Title>
                       <Paragraph className={styles.serviceDescription}>
-                    Custom web applications built with modern technologies and
+                        Custom web applications built with modern technologies
-                    best practices for optimal performance and user experience.
+                        and best practices for optimal performance and user
+                        experience.
                       </Paragraph>
                       <ul className={styles.serviceFeatures}>
                         <li>Responsive Design</li>
@@ -143,9 +196,11 @@ export default function Home() {
                         <li>Security Implementation</li>
                       </ul>
                     </Card>
+                  </motion.div>
                 </Col>
 
                 <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
                     <Card className={styles.serviceCard} hoverable>
                       <div className={styles.serviceIcon}>
                         <RocketOutlined />
@@ -154,8 +209,8 @@ export default function Home() {
                         Mobile Development
                       </Title>
                       <Paragraph className={styles.serviceDescription}>
-                    Native and cross-platform mobile applications that deliver
+                        Native and cross-platform mobile applications that
-                    exceptional user experiences across all devices.
+                        deliver exceptional user experiences across all devices.
                       </Paragraph>
                       <ul className={styles.serviceFeatures}>
                         <li>iOS & Android Apps</li>
@@ -164,9 +219,11 @@ export default function Home() {
                         <li>Push Notifications</li>
                       </ul>
                     </Card>
+                  </motion.div>
                 </Col>
 
                 <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
                     <Card className={styles.serviceCard} hoverable>
                       <div className={styles.serviceIcon}>
                         <BulbOutlined />
@@ -185,15 +242,23 @@ export default function Home() {
                         <li>Usability Testing</li>
                       </ul>
                     </Card>
+                  </motion.div>
                 </Col>
               </Row>
+            </motion.div>
           </div>
         </section>
 
         {/* Statistics Section */}
         <section id="statistics" className={styles.statisticsSection}>
           <div className={styles.container}>
-            <div className={styles.sectionHeader}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.sectionHeader}
+            >
               <Title level={2} className={styles.sectionTitle}>
                 Our Impact
               </Title>
@@ -201,10 +266,17 @@ export default function Home() {
                 Numbers that speak for themselves - our commitment to excellence
                 in every project
               </Paragraph>
-            </div>
+            </motion.div>
 
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={staggerContainer}
+            >
               <Row gutter={[48, 32]} className={styles.statsGrid}>
                 <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
                     <div className={styles.statCard}>
                       <div className={styles.statIcon}>
                         <ProjectOutlined />
@@ -216,9 +288,11 @@ export default function Home() {
                         className={styles.statistic}
                       />
                     </div>
+                  </motion.div>
                 </Col>
 
                 <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
                     <div className={styles.statCard}>
                       <div className={styles.statIcon}>
                         <TeamOutlined />
@@ -230,9 +304,11 @@ export default function Home() {
                         className={styles.statistic}
                       />
                     </div>
+                  </motion.div>
                 </Col>
 
                 <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
                     <div className={styles.statCard}>
                       <div className={styles.statIcon}>
                         <StarOutlined />
@@ -245,9 +321,11 @@ export default function Home() {
                         className={styles.statistic}
                       />
                     </div>
+                  </motion.div>
                 </Col>
 
                 <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
                     <div className={styles.statCard}>
                       <div className={styles.statIcon}>
                         <ClockCircleOutlined />
@@ -259,8 +337,10 @@ export default function Home() {
                         className={styles.statistic}
                       />
                     </div>
+                  </motion.div>
                 </Col>
               </Row>
+            </motion.div>
           </div>
         </section>
 
@@ -271,6 +351,36 @@ export default function Home() {
         <section id="testimonials">
           <TestimonialsSection />
         </section>
+
+        {/* CTA Section */}
+        <section className={styles.ctaSection}>
+          <div className={styles.container}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.ctaContent}
+            >
+              <Title className={styles.ctaTitle}>
+                Ready to Transform Your Digital Presence?
+              </Title>
+              <Paragraph className={styles.ctaDescription}>
+                Let&apos;s collaborate to build something amazing. Our team is
+                ready to turn your vision into reality.
+              </Paragraph>
+              <Button
+                type="primary"
+                size="large"
+                icon={<ArrowRightOutlined />}
+                className={styles.ctaButton}
+                href="#contact"
+              >
+                Start Your Journey
+              </Button>
+            </motion.div>
+          </div>
+        </section>
       </main>
 
       <Footer />