tech-masters/about-us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main: enhance scroll styles and add CTA section

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-02-07 00:31:26 +03:00
parent 8f05d06fb9
commit 05cd5b5139
2 changed files with 306 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/page.module.css
View File

@@ -614,4 +614,78 @@
width: 8px; width: 8px;
height: 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;
}
} }

354
src/app/page.tsx
View File

@@ -2,6 +2,7 @@
"use client"; "use client";
import { import {
ArrowRightOutlined,
BulbOutlined, BulbOutlined,
ClockCircleOutlined, ClockCircleOutlined,
CodeOutlined, CodeOutlined,
@@ -10,7 +11,8 @@ import {
StarOutlined, StarOutlined,
TeamOutlined, TeamOutlined,
} from "@ant-design/icons"; } 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 { useEffect, useState } from "react";
import Footer from "./components/Footer/Footer"; import Footer from "./components/Footer/Footer";
import HeroSection from "./components/Hero/HeroSection"; import HeroSection from "./components/Hero/HeroSection";
@@ -28,6 +30,13 @@ export default function Home() {
const [showPreferences, setShowPreferences] = useState(true); const [showPreferences, setShowPreferences] = useState(true);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
useEffect(() => { useEffect(() => {
// Reading localStorage can only happen on the client; do it after mount. // Reading localStorage can only happen on the client; do it after mount.
try { try {
@@ -58,6 +67,21 @@ export default function Home() {
setShowPreferences(false); 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) { if (loading) {
return ( return (
<div className={styles.loaderContainer}> <div className={styles.loaderContainer}>
@@ -101,6 +125,21 @@ export default function Home() {
return ( 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 && ( {showPreferences && (
<PreferencesSelector onComplete={handlePreferencesComplete} /> <PreferencesSelector onComplete={handlePreferencesComplete} />
)} )}
@@ -113,7 +152,13 @@ export default function Home() {
{/* Services Section */} {/* Services Section */}
<section id="services" className={styles.servicesSection}> <section id="services" className={styles.servicesSection}>
<div className={styles.container}> <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}> <Title level={2} className={styles.sectionTitle}>
Our Services Our Services
</Title> </Title>
@@ -121,79 +166,99 @@ export default function Home() {
We offer comprehensive solutions to transform your digital We offer comprehensive solutions to transform your digital
presence and drive business growth presence and drive business growth
</Paragraph> </Paragraph>
</div> </motion.div>
<Row gutter={[32, 32]} className={styles.servicesGrid}> <motion.div
<Col xs={24} sm={12} lg={8}> initial="hidden"
<Card className={styles.serviceCard} hoverable> whileInView="visible"
<div className={styles.serviceIcon}> viewport={{ once: true }}
<CodeOutlined /> variants={staggerContainer}
</div> >
<Title level={4} className={styles.serviceTitle}> <Row gutter={[32, 32]} className={styles.servicesGrid}>
Web Development <Col xs={24} sm={12} lg={8}>
</Title> <motion.div variants={fadeInUp} style={{ height: "100%" }}>
<Paragraph className={styles.serviceDescription}> <Card className={styles.serviceCard} hoverable>
Custom web applications built with modern technologies and <div className={styles.serviceIcon}>
best practices for optimal performance and user experience. <CodeOutlined />
</Paragraph> </div>
<ul className={styles.serviceFeatures}> <Title level={4} className={styles.serviceTitle}>
<li>Responsive Design</li> Web Development
<li>SEO Optimization</li> </Title>
<li>Performance Tuning</li> <Paragraph className={styles.serviceDescription}>
<li>Security Implementation</li> Custom web applications built with modern technologies
</ul> and best practices for optimal performance and user
</Card> experience.
</Col> </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}> <Col xs={24} sm={12} lg={8}>
<Card className={styles.serviceCard} hoverable> <motion.div variants={fadeInUp} style={{ height: "100%" }}>
<div className={styles.serviceIcon}> <Card className={styles.serviceCard} hoverable>
<RocketOutlined /> <div className={styles.serviceIcon}>
</div> <RocketOutlined />
<Title level={4} className={styles.serviceTitle}> </div>
Mobile Development <Title level={4} className={styles.serviceTitle}>
</Title> Mobile Development
<Paragraph className={styles.serviceDescription}> </Title>
Native and cross-platform mobile applications that deliver <Paragraph className={styles.serviceDescription}>
exceptional user experiences across all devices. Native and cross-platform mobile applications that
</Paragraph> deliver exceptional user experiences across all devices.
<ul className={styles.serviceFeatures}> </Paragraph>
<li>iOS & Android Apps</li> <ul className={styles.serviceFeatures}>
<li>Cross-platform Solutions</li> <li>iOS & Android Apps</li>
<li>App Store Optimization</li> <li>Cross-platform Solutions</li>
<li>Push Notifications</li> <li>App Store Optimization</li>
</ul> <li>Push Notifications</li>
</Card> </ul>
</Col> </Card>
</motion.div>
</Col>
<Col xs={24} sm={12} lg={8}> <Col xs={24} sm={12} lg={8}>
<Card className={styles.serviceCard} hoverable> <motion.div variants={fadeInUp} style={{ height: "100%" }}>
<div className={styles.serviceIcon}> <Card className={styles.serviceCard} hoverable>
<BulbOutlined /> <div className={styles.serviceIcon}>
</div> <BulbOutlined />
<Title level={4} className={styles.serviceTitle}> </div>
UI/UX Design <Title level={4} className={styles.serviceTitle}>
</Title> UI/UX Design
<Paragraph className={styles.serviceDescription}> </Title>
User-centered design solutions that create intuitive, <Paragraph className={styles.serviceDescription}>
engaging, and conversion-focused digital experiences. User-centered design solutions that create intuitive,
</Paragraph> engaging, and conversion-focused digital experiences.
<ul className={styles.serviceFeatures}> </Paragraph>
<li>User Research</li> <ul className={styles.serviceFeatures}>
<li>Wireframing & Prototyping</li> <li>User Research</li>
<li>Visual Design</li> <li>Wireframing & Prototyping</li>
<li>Usability Testing</li> <li>Visual Design</li>
</ul> <li>Usability Testing</li>
</Card> </ul>
</Col> </Card>
</Row> </motion.div>
</Col>
</Row>
</motion.div>
</div> </div>
</section> </section>
{/* Statistics Section */} {/* Statistics Section */}
<section id="statistics" className={styles.statisticsSection}> <section id="statistics" className={styles.statisticsSection}>
<div className={styles.container}> <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}> <Title level={2} className={styles.sectionTitle}>
Our Impact Our Impact
</Title> </Title>
@@ -201,66 +266,81 @@ export default function Home() {
Numbers that speak for themselves - our commitment to excellence Numbers that speak for themselves - our commitment to excellence
in every project in every project
</Paragraph> </Paragraph>
</div> </motion.div>
<Row gutter={[48, 32]} className={styles.statsGrid}> <motion.div
<Col xs={12} sm={6}> initial="hidden"
<div className={styles.statCard}> whileInView="visible"
<div className={styles.statIcon}> viewport={{ once: true }}
<ProjectOutlined /> variants={staggerContainer}
</div> >
<Statistic <Row gutter={[48, 32]} className={styles.statsGrid}>
title="Projects Completed" <Col xs={12} sm={6}>
value={150} <motion.div variants={fadeInUp}>
suffix="+" <div className={styles.statCard}>
className={styles.statistic} <div className={styles.statIcon}>
/> <ProjectOutlined />
</div> </div>
</Col> <Statistic
title="Projects Completed"
value={150}
suffix="+"
className={styles.statistic}
/>
</div>
</motion.div>
</Col>
<Col xs={12} sm={6}> <Col xs={12} sm={6}>
<div className={styles.statCard}> <motion.div variants={fadeInUp}>
<div className={styles.statIcon}> <div className={styles.statCard}>
<TeamOutlined /> <div className={styles.statIcon}>
</div> <TeamOutlined />
<Statistic </div>
title="Happy Clients" <Statistic
value={80} title="Happy Clients"
suffix="+" value={80}
className={styles.statistic} suffix="+"
/> className={styles.statistic}
</div> />
</Col> </div>
</motion.div>
</Col>
<Col xs={12} sm={6}> <Col xs={12} sm={6}>
<div className={styles.statCard}> <motion.div variants={fadeInUp}>
<div className={styles.statIcon}> <div className={styles.statCard}>
<StarOutlined /> <div className={styles.statIcon}>
</div> <StarOutlined />
<Statistic </div>
title="Average Rating" <Statistic
value={4.9} title="Average Rating"
suffix="/5" value={4.9}
precision={1} suffix="/5"
className={styles.statistic} precision={1}
/> className={styles.statistic}
</div> />
</Col> </div>
</motion.div>
</Col>
<Col xs={12} sm={6}> <Col xs={12} sm={6}>
<div className={styles.statCard}> <motion.div variants={fadeInUp}>
<div className={styles.statIcon}> <div className={styles.statCard}>
<ClockCircleOutlined /> <div className={styles.statIcon}>
</div> <ClockCircleOutlined />
<Statistic </div>
title="Years Experience" <Statistic
value={8} title="Years Experience"
suffix="+" value={8}
className={styles.statistic} suffix="+"
/> className={styles.statistic}
</div> />
</Col> </div>
</Row> </motion.div>
</Col>
</Row>
</motion.div>
</div> </div>
</section> </section>
@@ -271,6 +351,36 @@ export default function Home() {
<section id="testimonials"> <section id="testimonials">
<TestimonialsSection /> <TestimonialsSection />
</section> </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> </main>
<Footer /> <Footer />