pricing section, spacing updated
This commit is contained in:
parent
fa7e9fe604
commit
38575e810d
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: '#'
|
||||
}
|
||||
];
|
||||
@ -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" />
|
||||
|
||||
101
src/components/sections/Home1/Pricing.tsx
Normal file
101
src/components/sections/Home1/Pricing.tsx
Normal file
@ -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;
|
||||
@ -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 }}>
|
||||
|
||||
@ -89,7 +89,7 @@ const Work = () => {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="space80"></div>
|
||||
{/* <div className="space80"></div> */}
|
||||
</div>
|
||||
</div>
|
||||
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user