main: enhance scroll styles and add CTA section
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
128
src/app/page.tsx
128
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
|
||||
best practices for optimal performance and user experience.
|
||||
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>
|
||||
@@ -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
|
||||
exceptional user experiences across all devices.
|
||||
Native and cross-platform mobile applications that
|
||||
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'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 />
|
||||
|
||||
Reference in New Issue
Block a user