151 lines
5.3 KiB
TypeScript
151 lines
5.3 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { RotateCcw, FileWarning, CreditCard, Mail, Shield } from "lucide-react";
|
||
|
||
export default function RefundCancellationPage() {
|
||
return (
|
||
<div className="bg-gray-50">
|
||
{/* HEADER SECTION */}
|
||
<section className="bg-sky-200 text-gray-900 py-20 px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="max-w-5xl mx-auto text-center"
|
||
>
|
||
<div className="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-white/30 backdrop-blur-xl rounded-3xl shadow-2xl">
|
||
<RotateCcw className="w-10 h-10" />
|
||
</div>
|
||
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-4">
|
||
Refund & Cancellation Policy
|
||
</h1>
|
||
<p className="text-lg md:text-xl max-w-3xl mx-auto">
|
||
Clear, transparent, and customer-first refund guidelines for all Winixco SaaS users.
|
||
</p>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* MAIN CONTENT */}
|
||
<section className="max-w-5xl mx-auto py-16 px-6 space-y-16">
|
||
{/* 1. Cancellation */}
|
||
<PolicySection
|
||
icon={<FileWarning className="w-8 h-8 text-red-600" />}
|
||
title="1. Cancellation"
|
||
content={
|
||
<p>
|
||
Customers may cancel subscriptions at any time via the dashboard or by contacting
|
||
support. Cancellation takes effect at the end of the current billing period unless
|
||
otherwise stated in the plan. No partial-period refunds will be provided except as
|
||
specified in this policy.
|
||
</p>
|
||
}
|
||
/>
|
||
|
||
{/* 2. Refund Eligibility */}
|
||
<PolicySection
|
||
icon={<Shield className="w-8 h-8 text-rose-700" />}
|
||
title="2. Refund Eligibility"
|
||
content={
|
||
<ul className="list-disc ml-6 space-y-2 leading-relaxed">
|
||
<li>
|
||
<strong>Technical failure:</strong> If a significant service outage occurs and Winixco
|
||
fails to restore service in a reasonable timeframe, partial refunds or credits may be
|
||
issued as per SLA.
|
||
</li>
|
||
<li>
|
||
<strong>Duplicate or erroneous charges:</strong> Incorrect or duplicate charges will
|
||
be refunded after verification.
|
||
</li>
|
||
<li>
|
||
<strong>Trial-related charges:</strong> If a user is incorrectly charged at the end of
|
||
a trial, the charge will be refunded upon timely request.
|
||
</li>
|
||
</ul>
|
||
}
|
||
/>
|
||
|
||
{/* 3. Non-Refundable Items */}
|
||
<PolicySection
|
||
icon={<CreditCard className="w-8 h-8 text-pink-600" />}
|
||
title="3. Non-Refundable Items"
|
||
content={
|
||
<ul className="list-disc ml-6 space-y-2 leading-relaxed">
|
||
<li>Monthly subscription fees</li>
|
||
<li>Annual subscription fees once activated</li>
|
||
<li>AI credits consumed</li>
|
||
<li>Setup charges or onboarding fees</li>
|
||
<li>Custom integrations</li>
|
||
<li><strong>Cloud Storage charges</strong></li>
|
||
</ul>
|
||
}
|
||
/>
|
||
|
||
{/* 4. Refund Process */}
|
||
<PolicySection
|
||
icon={<Mail className="w-8 h-8 text-red-700" />}
|
||
title="4. Refund Process"
|
||
content={
|
||
<ol className="list-decimal ml-6 space-y-3 leading-relaxed">
|
||
<li>
|
||
Contact{" "}
|
||
<a href="mailto:support@winixco.com" className="text-blue-600 underline">
|
||
support@winixco.com
|
||
</a>{" "}
|
||
with subscription or order details.
|
||
</li>
|
||
<li>We will acknowledge your request within 3 business days and may request documentation.</li>
|
||
<li>
|
||
If approved, refunds will be processed to the original payment method within 7–14
|
||
business days (processing time varies by provider).
|
||
</li>
|
||
</ol>
|
||
}
|
||
/>
|
||
|
||
{/* 5. Chargebacks */}
|
||
<PolicySection
|
||
icon={<RotateCcw className="w-8 h-8 text-rose-800" />}
|
||
title="5. Chargebacks"
|
||
content={
|
||
<p>
|
||
Initiating a chargeback with your bank may result in temporary account suspension while
|
||
we investigate. If a chargeback is found to be invalid, Winixco reserves the right to
|
||
reinstate charges and recover outstanding fees.
|
||
</p>
|
||
}
|
||
/>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ---------------------- REUSABLE SECTION COMPONENT ---------------------- */
|
||
|
||
function PolicySection({
|
||
icon,
|
||
title,
|
||
content,
|
||
}: {
|
||
icon?: React.ReactNode;
|
||
title: string;
|
||
content: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 15 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white rounded-3xl p-8 md:p-10 shadow-lg border border-gray-200"
|
||
>
|
||
{icon && <div className="mb-4">{icon}</div>}
|
||
|
||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
|
||
{title}
|
||
</h2>
|
||
|
||
<div className="text-gray-700 leading-relaxed">{content}</div>
|
||
</motion.div>
|
||
);
|
||
}
|