Files

151 lines
5.3 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"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 714
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>
);
}