151 lines
5.9 KiB
TypeScript
151 lines
5.9 KiB
TypeScript
"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; |