gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-24 03:52:08 +02:00
parent dfcaebaf8c
commit 366f28677a
18241 changed files with 865352 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
frontEnd/components/pages/services/ServicePricing.tsx Normal file
View File

@@ -0,0 +1,151 @@
"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import Link from "next/link";
import { Service } from "@/lib/api/serviceService";
interface ServicePricingProps {
service: Service;
}
const ServicePricing = ({ service }: ServicePricingProps) => {
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
// Animate pricing section
gsap.set(".pricing-content", {
y: 50,
opacity: 0,
});
ScrollTrigger.create({
trigger: ".pricing-content",
start: "-100px bottom",
onEnter: () =>
gsap.to(".pricing-content", {
y: 0,
opacity: 1,
duration: 0.8,
ease: "power2.out",
}),
});
}, []);
return (
<section className="enterprise-pricing py-5">
<div className="container">
<div className="row justify-content-center">
<div className="col-12 col-xl-10">
<div className="row">
<div className="col-12 col-lg-8 offset-lg-2">
<div className="section-header text-center mb-5">
<span className="enterprise-section-tag">Pricing & Packages</span>
<h2 className="enterprise-section-title mb-4">
Pricing & Packages
</h2>
<p className="enterprise-section-description">
Get started with our {service.title.toLowerCase()} service.
Contact us for a customized quote based on your specific requirements.
</p>
</div>
<div className="pricing-content text-center">
<div className="enterprise-pricing-card">
<div className="pricing-header">
<div className="pricing-badge">
<span>Most Popular</span>
</div>
<h3 className="pricing-title">
{service.title}
</h3>
<div className="price-display">
<span className="price-period">
Contact Us for Pricing
</span>
</div>
</div>
<div className="pricing-features">
<ul className="enterprise-feature-list">
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-check"></i>
</div>
<span>Custom {service.title.toLowerCase()} solution</span>
</li>
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-check"></i>
</div>
<span>Professional consultation</span>
</li>
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-check"></i>
</div>
<span>Ongoing support & maintenance</span>
</li>
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-check"></i>
</div>
<span>Quality assurance & testing</span>
</li>
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-check"></i>
</div>
<span>Documentation & training</span>
</li>
{service.duration && (
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-clock"></i>
</div>
<span>Project duration: {service.duration}</span>
</li>
)}
{service.technologies && (
<li className="feature-item">
<div className="feature-icon">
<i className="fa-solid fa-code"></i>
</div>
<span>Latest technologies & frameworks</span>
</li>
)}
</ul>
</div>
<div className="pricing-cta">
<Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
<span>Get Free Quote</span>
<i className="fa-solid fa-arrow-right ms-2"></i>
</Link>
<Link href="/services" className="btn btn-outline-secondary btn-lg mb-3">
<span>View All Services</span>
</Link>
</div>
</div>
<div className="pricing-note">
<div className="note-content">
<i className="fa-solid fa-info-circle"></i>
<p>
Final pricing depends on project scope, complexity, and specific requirements.
Contact us for a detailed proposal.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default ServicePricing;