From 38575e810d7abca07c8ef3089ef58a9f104f3e2d Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Thu, 26 Feb 2026 16:15:49 +0530
Subject: [PATCH] pricing section, spacing updated

---
 src/app/globals.css                           | 128 ++++++++++++------
 src/app/page.tsx                              |   4 +-
 src/assets/data.ts                            |  48 ++++++-
 src/components/sections/Home1/CaseStudies.tsx |   2 +-
 src/components/sections/Home1/Pricing.tsx     | 101 ++++++++++++++
 src/components/sections/Home1/Testimonial.tsx |   2 +-
 src/components/sections/Home1/Work.tsx        |   2 +-
 src/types/index.ts                            |   9 ++
 8 files changed, 253 insertions(+), 43 deletions(-)
 create mode 100644 src/components/sections/Home1/Pricing.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index f978b84..ed66ead 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1132,39 +1132,39 @@ img {
 
 /* File: src/assets/scss/theme/_spacing.scss */
 .sp1 {
-  padding: 100px 0 100px;
+  padding: 80px 0 80px;
 }
 
 @media (max-width: 767px) {
   .sp1 {
-    padding: 50px 0 50px;
+    padding: 60px 0 60px;
   }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .sp1 {
-    padding: 50px 0 50px;
+    padding: 60px 0 60px;
   }
 }
 
 .sp2 {
-  padding: 100px 0 100px;
+  padding: 80px 0 80px;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .sp2 {
-    padding: 50px 0 20px;
+    padding: 60px 0 60px !important;
   }
 }
 
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+/* @media only screen and (min-width: 768px) and (max-width: 991px) {
   .sp2 {
-    padding: 50px 0 20px;
+    padding: 60px 0 60px;
   }
-}
+} */
 
 .sp3 {
-  padding: 100px 0 50px;
+  padding: 80px 0 50px;
 }
 
 .sp4 {
@@ -1173,29 +1173,29 @@ img {
 
 @media (max-width: 767px) {
   .sp4 {
-    padding: 40px 0 40px;
+    padding: 60px 0 60px;
   }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .sp4 {
-    padding: 40px 0 40px;
+    padding: 60px 0 60px;
   }
 }
 
 .sp5 {
-  padding: 60px 0 60px;
+  padding: 80px 0 80px;
 }
 
 @media (max-width: 767px) {
   .sp5 {
-    padding: 30px 0 30px;
+    padding: 60px 0 60px;
   }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .sp5 {
-    padding: 30px 0 30px;
+    padding: 60px 0 60px;
   }
 }
 
@@ -1232,7 +1232,7 @@ img {
 }
 
 .sp8 {
-  padding: 100px 0 0;
+  padding: 80px 0 0;
 }
 
 @media (max-width: 767px) {
@@ -1264,7 +1264,7 @@ img {
 }
 
 .sp10 {
-  padding: 0 0 100px;
+  padding: 0 0 80px;
 }
 
 @media (max-width: 767px) {
@@ -11473,6 +11473,31 @@ only screen and (min-width: 768px) and (max-width: 991px),
 }
 
 /*============= PRICING CSS AREA STARTS ===============*/
+.pricing-single-boxarea {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pricing-single-boxarea:hover {
+  transform: translateY(-15px);
+}
+
+.pricing-single-boxarea.box2:hover {
+  box-shadow: 0 40px 80px rgba(55, 121, 185, 0.3) !important;
+}
+
+.pricing-single-boxarea .vl-btn1 {
+  border: none;
+}
+
+.pricing-single-boxarea .vl-btn1:hover {
+  opacity: 0.9;
+  transform: scale(1.02);
+}
+
+.pricing-features li i {
+  font-size: 18px;
+}
+
 /*============= PRICING CSS AREA ENDS ===============*/
 /*============= CHOOSE CSS AREA STARTS ===============*/
 /*============= CHOOSE CSS AREA ENDS ===============*/
@@ -12412,15 +12437,15 @@ only screen and (min-width: 768px) and (max-width: 991px),
 
 @media (max-width: 767px) {
   .cta1-section-area {
-    padding: 50px 0 0 !important;
+    padding: 60px 0 !important;
   }
 }
 
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+/* @media only screen and (min-width: 768px) and (max-width: 991px) {
   .cta1-section-area {
-    padding: 50px 0 0 !important;
+    padding: 80px 0 !important;
   }
-}
+} */
 
 .cta1-section-area .cta-header {
   position: relative;
@@ -15083,7 +15108,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
 .work-others-section {
   position: relative;
   z-index: 1;
-  padding: 100px 0 280px;
+  padding: 80px 0 360px;
 }
 
 .work-others-section .elements16 {
@@ -15806,7 +15831,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
 /* File: src/assets/scss/layout/pages/_about.scss */
 /* ============= BANNERBOTTOM SECTION ============= */
 .bannerbottom-section.website-service-strip {
-  padding: 100px 0;
+  padding: 80px 0;
   background: #ffffff;
   overflow: hidden;
 }
@@ -16195,7 +16220,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
    KEY FEATURES SLIDER SECTION
    ============================================================ */
 .kf-section {
-  padding: 100px 0;
+  padding: 80px 0;
   position: relative;
   background-color: #1a1f2b;
   overflow: hidden;
@@ -16744,7 +16769,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
 
 @media (max-width: 768px) {
   .kf-section {
-    padding: 50px 0;
+    padding: 60px 0;
   }
 
   .kf-container {
@@ -16829,9 +16854,9 @@ only screen and (min-width: 768px) and (max-width: 991px),
 }
 
 @media (max-width: 375px) {
-  .kf-section {
+  /* .kf-section {
     padding: 40px 0;
-  }
+  } */
 
   .kf-container {
     padding: 0 0.85rem;
@@ -18163,10 +18188,10 @@ only screen and (min-width: 768px) and (max-width: 991px),
     height: 4px;
   }
 
-  .case-studies-section {
+  /* .case-studies-section {
     padding-top: 50px !important;
     padding-bottom: 50px !important;
-  }
+  } */
 }
 
 .case-study-content {
@@ -18273,6 +18298,20 @@ only screen and (min-width: 768px) and (max-width: 991px),
   margin-bottom: 40px !important;
 }
 
+/* Base utility classes for section separation */
+.mb-100,
+.mb-80 {
+  margin-bottom: 80px !important;
+}
+
+@media (max-width: 768px) {
+
+  .mb-100,
+  .mb-80 {
+    margin-bottom: 60px !important;
+  }
+}
+
 /* ================================================================
    GLOBAL RESPONSIVE MASTER OVERRIDE
    Covers: 1920 | 1600 | 1540 | 1440 | 1360 | 1200 | 1024 | 992 | 768 | 500 | 475 | 320
@@ -18536,6 +18575,12 @@ img {
   }
 }
 
+@media (max-width: 991px) {
+  .work-others-section {
+    padding: 80px 0 !important;
+  }
+}
+
 @media (max-width: 768px) {
   .work-others-section {
     padding: 60px 0 !important;
@@ -18643,9 +18688,9 @@ img {
     padding: 60px 0 !important;
   }
 
-  .case-works-section-area {
+  /* .case-works-section-area {
     padding: 30px 20px !important;
-  }
+  } */
 
   .card-boxarea a {
     font-size: 14px !important;
@@ -18682,6 +18727,7 @@ img {
     left: 25px !important;
     animation-delay: 2s;
   }
+
   .bannerbottom-section .floating-item.item-2 {
     top: 55px !important;
     animation-delay: 2s;
@@ -18921,12 +18967,12 @@ img {
    General Section Spacing — prevent sections merging
    --------------------------------------------------------------- */
 .sp1 {
-  padding: 100px 0;
+  padding: 80px 0;
 }
 
 @media (max-width: 1200px) {
   .sp1 {
-    padding: 100px 0;
+    padding: 80px 0;
   }
 }
 
@@ -18938,7 +18984,7 @@ img {
 
 @media (max-width: 992px) {
   .sp1 {
-    padding: 70px 0;
+    padding: 80px 0;
   }
 }
 
@@ -18950,13 +18996,13 @@ img {
 
 @media (max-width: 500px) {
   .sp1 {
-    padding: 50px 0;
+    padding: 60px 0;
   }
 }
 
 @media (max-width: 320px) {
   .sp1 {
-    padding: 40px 0;
+    padding: 60px 0;
   }
 }
 
@@ -19036,7 +19082,7 @@ img {
 }
 
 .brand-slider-area.sp2 {
-  padding: 100px 0 100px 0;
+  padding: 80px 0 80px 0;
   background-color: #fff;
 }
 
@@ -19132,11 +19178,17 @@ img {
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
-  padding: 120px 0;
+  padding: 80px 0;
   z-index: 1;
   overflow: hidden;
 }
 
+@media (max-width: 768px) {
+  .bannerbottom-section {
+    padding: 60px 0 !important;
+  }
+}
+
 .bannerbottom-section::before {
   content: "";
   position: absolute;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2e0b7de..d7862de 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import KeyFeatures from "@/components/sections/Home1/KeyFeatures";
 import Work from "@/components/sections/Home1/Work";
 import WorkProcess from "@/components/sections/Home1/WorkProcess";
 import CaseStudies from "@/components/sections/Home1/CaseStudies";
+import Pricing from "@/components/sections/Home1/Pricing";
 import Testimonial from "@/components/sections/Home1/Testimonial";
 import FAQ from "@/components/sections/Home1/FAQ";
 
@@ -16,7 +17,7 @@ export default function Home() {
     return (
         <MainLayout>
             <Hero />
-             <BrandSlider />
+            <BrandSlider />
             <BannerBottom />
             <About />
             <Service />
@@ -24,6 +25,7 @@ export default function Home() {
             <Work />
             <WorkProcess />
             <CaseStudies />
+            <Pricing />
             <Testimonial />
             <FAQ />
         </MainLayout>
diff --git a/src/assets/data.ts b/src/assets/data.ts
index 2776137..ea459cf 100644
--- a/src/assets/data.ts
+++ b/src/assets/data.ts
@@ -1,4 +1,4 @@
-import type { BlogType, CaseStudyType, ServiceType, TeamMemberType, TestimonialType } from "@/types";
+import type { BlogType, CaseStudyType, PricingType, ServiceType, TeamMemberType, TestimonialType } from "@/types";
 
 export const services: ServiceType[] = [
     {
@@ -365,4 +365,50 @@ export const testimonials: TestimonialType[] = [
         role: 'Mostow Co.',
         message: '"MetatronCube has completely transformed the way we operate as a business. Their custom IT solutions have streamlined our processes, enabling us collaborate effectively across teams, regardless.”',
     },
+];
+
+export const pricingPlans: PricingType[] = [
+    {
+        id: 1,
+        plan: 'Basic Plan',
+        price: '49',
+        period: 'month',
+        features: [
+            'Basic App Features',
+            'Standard UI Design',
+            'Single Platform (Android or iOS)',
+            'Standard Support',
+            '1 Month Maintenance'
+        ],
+        link: '#'
+    },
+    {
+        id: 2,
+        plan: 'Standard Plan',
+        price: '99',
+        period: 'month',
+        isPopular: true,
+        features: [
+            'Advanced App Features',
+            'Premium UI/UX Design',
+            'Cross-Platform (Android & iOS)',
+            'Priority Support',
+            '3 Months Maintenance'
+        ],
+        link: '#'
+    },
+    {
+        id: 3,
+        plan: 'Premium Plan',
+        price: '149',
+        period: 'month',
+        features: [
+            'All Advanced Features',
+            'Custom Complex Logic',
+            'Multi-Platform Support',
+            '24/7 Dedicated Support',
+            '6 Months Maintenance'
+        ],
+        link: '#'
+    }
 ];
\ No newline at end of file
diff --git a/src/components/sections/Home1/CaseStudies.tsx b/src/components/sections/Home1/CaseStudies.tsx
index ea36ed3..8f1f81e 100644
--- a/src/components/sections/Home1/CaseStudies.tsx
+++ b/src/components/sections/Home1/CaseStudies.tsx
@@ -62,7 +62,7 @@ const CaseStudies = () => {
     };
 
     return (
-        <section className="case-studies-section sp1 mb-100 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
+        <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
 
             <img src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
             <img src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
diff --git a/src/components/sections/Home1/Pricing.tsx b/src/components/sections/Home1/Pricing.tsx
new file mode 100644
index 0000000..3f4e2db
--- /dev/null
+++ b/src/components/sections/Home1/Pricing.tsx
@@ -0,0 +1,101 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import GsapReveal from '@/components/common/GsapReveal';
+import { pricingPlans } from '@/assets/data';
+
+const Pricing = () => {
+    return (
+        <section className="pricing-section sp1 pt-0" id="pricing">
+            <div className="container">
+                <div className="row justify-content-center">
+                    <div className="col-lg-8 text-center">
+                        <div className="consen-section-title upper text-center pb-60 heading2">
+                            <GsapReveal y={20}>
+                                <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
+                                    <span><img src="/assets/img/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
+                                    Pricing Plans
+                                </h5>
+                            </GsapReveal>
+                            <div className="space24"></div>
+                            <GsapReveal y={20} delay={0.2}>
+                                <h2 className="text-anime-style-3 space-margin60">
+                                    Flexible Pricing for Your <br />
+                                    <span>Business Needs</span>
+                                </h2>
+                            </GsapReveal>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="row g-4 justify-content-center">
+                    {pricingPlans.map((plan, index) => (
+                        <div key={plan.id} className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay={index * 100}>
+                            <div className={`pricing-single-boxarea ${plan.isPopular ? 'box2' : ''}`} style={{
+                                padding: '50px 40px',
+                                borderRadius: '24px',
+                                background: plan.isPopular ? '#1a1f2b' : '#fff',
+                                transition: 'all 0.4s',
+                                border: plan.isPopular ? 'none' : '1px solid #e3eaf4',
+                                boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
+                                position: 'relative',
+                                height: '100%',
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }}>
+                                {plan.isPopular && (
+                                    <div className="popular-badge" style={{
+                                        position: 'absolute',
+                                        top: '20px',
+                                        right: '20px',
+                                        background: '#3779b9',
+                                        color: '#fff',
+                                        padding: '5px 15px',
+                                        borderRadius: '50px',
+                                        fontSize: '12px',
+                                        fontWeight: 700,
+                                        textTransform: 'uppercase'
+                                    }}>
+                                        Popular
+                                    </div>
+                                )}
+                                <div className="pricing-header mb-4">
+                                    <h4 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '15px' }}>{plan.plan}</h4>
+                                    <div className="price d-flex align-items-baseline">
+                                        <h2 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '48px', fontWeight: 800, margin: 0 }}>${plan.price}</h2>
+                                        <span style={{ color: plan.isPopular ? 'rgba(255,255,255,0.7)' : '#4a5568', marginLeft: '5px', fontSize: '16px' }}>/{plan.period}</span>
+                                    </div>
+                                </div>
+
+                                <ul className="pricing-features list-unstyled mb-5" style={{ flexGrow: 1 }}>
+                                    {plan.features.map((feature, i) => (
+                                        <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
+                                            <i className="fa-solid fa-check-circle" style={{ color: '#3779b9', marginRight: '10px' }}></i>
+                                            {feature}
+                                        </li>
+                                    ))}
+                                </ul>
+
+                                <div className="pricing-btn">
+                                    <Link href={plan.link} className={`vl-btn1 w-100 text-center ${plan.isPopular ? '' : 'btn-dark'}`} style={{
+                                        display: 'block',
+                                        padding: '15px',
+                                        borderRadius: '12px',
+                                        fontWeight: 700,
+                                        background: plan.isPopular ? '#3779b9' : '#1a1f2b',
+                                        color: '#fff',
+                                        transition: 'all 0.3s'
+                                    }}>
+                                        Choose Plan <i className="fa-solid fa-arrow-right ms-2"></i>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Pricing;
diff --git a/src/components/sections/Home1/Testimonial.tsx b/src/components/sections/Home1/Testimonial.tsx
index 9f590cc..c08a8f7 100644
--- a/src/components/sections/Home1/Testimonial.tsx
+++ b/src/components/sections/Home1/Testimonial.tsx
@@ -77,7 +77,7 @@ const Testimonial = () => {
             backgroundSize: 'cover',
             backgroundAttachment: 'fixed',
             position: 'relative',
-            paddingBottom: '100px'
+            // paddingBottom: '80px'
         }}>
             <div className="section-overlay"></div>
             <div className="container" style={{ position: 'relative', zIndex: 1 }}>
diff --git a/src/components/sections/Home1/Work.tsx b/src/components/sections/Home1/Work.tsx
index f1ac43e..091f9e5 100644
--- a/src/components/sections/Home1/Work.tsx
+++ b/src/components/sections/Home1/Work.tsx
@@ -89,7 +89,7 @@ const Work = () => {
                         </div>
 
                     </div>
-                    <div className="space80"></div>
+                    {/* <div className="space80"></div> */}
                 </div>
             </div>
             <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
diff --git a/src/types/index.ts b/src/types/index.ts
index 4324e70..341c2b3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -38,3 +38,12 @@ export interface TeamMemberType {
     image: string;
     role: string;
 }
+export interface PricingType {
+    id: number;
+    plan: string;
+    price: string;
+    period: string;
+    features: string[];
+    isPopular?: boolean;
+    link: string;
+}