From 05cd5b51397c6f4e4a99ca6828431a8849951f70 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sat, 7 Feb 2026 00:31:26 +0300
Subject: [PATCH] main: enhance scroll styles and add CTA section

---
 src/app/page.module.css |  74 +++++++++
 src/app/page.tsx        | 354 ++++++++++++++++++++++++++--------------
 2 files changed, 306 insertions(+), 122 deletions(-)

diff --git a/src/app/page.module.css b/src/app/page.module.css
index 890c1d8..65ce51d 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -614,4 +614,78 @@
     width: 8px;
     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;
+  }
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 69b90b2..d48ad68 100644
--- a/src/app/page.tsx
+++ b/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,79 +166,99 @@ export default function Home() {
                 We offer comprehensive solutions to transform your digital
                 presence and drive business growth
               </Paragraph>
-            </div>
+            </motion.div>
 
-            <Row gutter={[32, 32]} className={styles.servicesGrid}>
-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <CodeOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    Web Development
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    Custom web applications built with modern technologies and
-                    best practices for optimal performance and user experience.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>Responsive Design</li>
-                    <li>SEO Optimization</li>
-                    <li>Performance Tuning</li>
-                    <li>Security Implementation</li>
-                  </ul>
-                </Card>
-              </Col>
+            <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 />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        Web Development
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        Custom web applications built with modern technologies
+                        and best practices for optimal performance and user
+                        experience.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>Responsive Design</li>
+                        <li>SEO Optimization</li>
+                        <li>Performance Tuning</li>
+                        <li>Security Implementation</li>
+                      </ul>
+                    </Card>
+                  </motion.div>
+                </Col>
 
-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <RocketOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    Mobile Development
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    Native and cross-platform mobile applications that deliver
-                    exceptional user experiences across all devices.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>iOS & Android Apps</li>
-                    <li>Cross-platform Solutions</li>
-                    <li>App Store Optimization</li>
-                    <li>Push Notifications</li>
-                  </ul>
-                </Card>
-              </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 />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        Mobile Development
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        Native and cross-platform mobile applications that
+                        deliver exceptional user experiences across all devices.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>iOS & Android Apps</li>
+                        <li>Cross-platform Solutions</li>
+                        <li>App Store Optimization</li>
+                        <li>Push Notifications</li>
+                      </ul>
+                    </Card>
+                  </motion.div>
+                </Col>
 
-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <BulbOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    UI/UX Design
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    User-centered design solutions that create intuitive,
-                    engaging, and conversion-focused digital experiences.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>User Research</li>
-                    <li>Wireframing & Prototyping</li>
-                    <li>Visual Design</li>
-                    <li>Usability Testing</li>
-                  </ul>
-                </Card>
-              </Col>
-            </Row>
+                <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
+                    <Card className={styles.serviceCard} hoverable>
+                      <div className={styles.serviceIcon}>
+                        <BulbOutlined />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        UI/UX Design
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        User-centered design solutions that create intuitive,
+                        engaging, and conversion-focused digital experiences.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>User Research</li>
+                        <li>Wireframing & Prototyping</li>
+                        <li>Visual Design</li>
+                        <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,66 +266,81 @@ export default function Home() {
                 Numbers that speak for themselves - our commitment to excellence
                 in every project
               </Paragraph>
-            </div>
+            </motion.div>
 
-            <Row gutter={[48, 32]} className={styles.statsGrid}>
-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <ProjectOutlined />
-                  </div>
-                  <Statistic
-                    title="Projects Completed"
-                    value={150}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+            <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 />
+                      </div>
+                      <Statistic
+                        title="Projects Completed"
+                        value={150}
+                        suffix="+"
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>
 
-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <TeamOutlined />
-                  </div>
-                  <Statistic
-                    title="Happy Clients"
-                    value={80}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <TeamOutlined />
+                      </div>
+                      <Statistic
+                        title="Happy Clients"
+                        value={80}
+                        suffix="+"
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>
 
-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <StarOutlined />
-                  </div>
-                  <Statistic
-                    title="Average Rating"
-                    value={4.9}
-                    suffix="/5"
-                    precision={1}
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <StarOutlined />
+                      </div>
+                      <Statistic
+                        title="Average Rating"
+                        value={4.9}
+                        suffix="/5"
+                        precision={1}
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>
 
-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <ClockCircleOutlined />
-                  </div>
-                  <Statistic
-                    title="Years Experience"
-                    value={8}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
-            </Row>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <ClockCircleOutlined />
+                      </div>
+                      <Statistic
+                        title="Years Experience"
+                        value={8}
+                        suffix="+"
+                        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 />