From f34c1acad6b443e0bb0be30b9f0fd044918fcd44 Mon Sep 17 00:00:00 2001
From: Yash Khare <khareyash05@gmail.com>
Date: Wed, 25 Dec 2024 13:46:21 +0530
Subject: [PATCH] fix: pricing page

Signed-off-by: Yash Khare <khareyash05@gmail.com>
---
 app/(default)/pricing/page.tsx           | 137 -----------------------
 app/(default)/pricing/pricing.module.css | 112 ------------------
 2 files changed, 249 deletions(-)
 delete mode 100644 app/(default)/pricing/page.tsx
 delete mode 100644 app/(default)/pricing/pricing.module.css

diff --git a/app/(default)/pricing/page.tsx b/app/(default)/pricing/page.tsx
deleted file mode 100644
index 18d004b..0000000
--- a/app/(default)/pricing/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Footer from "@/components/ui/footer";
-import styles from "./pricing.module.css";
-
-const Pricing: React.FC = () => {
-  const checkpoints = [100000, 200000, 300000, 1000000, 5000000]; 
-  const [sliderValue, setSliderValue] = useState<number>(0); 
-  const costPerLine = 0.01;
-
-  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSliderValue(parseFloat(e.target.value));
-  };
-
-  const formatNumber = (value: number): string => {
-    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
-    if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
-    return value.toString();
-  };
-
-  const interpolateValue = (value: number): number => {
-    if (value <= 0) return checkpoints[0]; 
-    if (value >= checkpoints.length - 1) return checkpoints[checkpoints.length - 1]; 
-
-    const lowerIndex = Math.floor(value);
-    const upperIndex = Math.ceil(value);
-    const fraction = value - lowerIndex;
-
-    return sendUpdatedCheckpointValue(
-      checkpoints[lowerIndex] +
-      fraction * (checkpoints[upperIndex] - checkpoints[lowerIndex])
-    );
-  };
-
-  const sendUpdatedCheckpointValue = (value: number):number => {
-    var updatedCheckPointValue:number=100000
-    if(value >100000 && value <= 200000){
-        updatedCheckPointValue = 200000;
-    } else if(value >200000 && value <= 300000){
-        updatedCheckPointValue = 300000;
-    } else if(value >300000 && value <= 1000000){
-        updatedCheckPointValue = 1000000;
-    } else{
-        updatedCheckPointValue = 5000000;
-    }
-    return updatedCheckPointValue;
-  }
-
-  const currentCheckpoint = interpolateValue(sliderValue); 
-  const totalPrice = currentCheckpoint * costPerLine;
-
-  return (
-    <div>
-        <div className={styles.header}>
-            <div>
-            <h1>Transparent Pricing for Every Team Size</h1>
-            <p>
-                Easily calculate your costs based on your lines of code and get a tailored plan for
-                your needs.
-            </p>
-            </div>
-        </div>
-        <div className="flex flex-col gap-12 items-center justify-center bg-gray-100 px-6 py-6">
-            <div className="flex flex-col md:flex-row gap-6 w-full max-w-6xl">
-            <div className={styles.card}>
-    <h2 className={styles["card-title"]}>Pricing Calculator</h2>
-    <div className="relative w-full">
-        <div className="absolute w-full flex justify-between text-xs text-gray-500 -top-6">
-            {checkpoints.map((point, index) => {
-                let position;
-                if (index === 0) position = 0;
-                else if (index === 1) position = 20;
-                else if (index === 2) position = 40;
-                else if (index === 3) position = 75;
-                else position = 100;
-
-                return (
-                    <span
-                        key={index}
-                        className="absolute transform -translate-x-1/2"
-                        style={{
-                            left: `${position}%`,
-                        }}
-                    >
-                        {formatNumber(point)}
-                    </span>
-                );
-            })}
-                    </div>
-                <input
-                    type="range"
-                    min="0"
-                    max={checkpoints.length - 1}
-                    step="0.01"
-                    value={sliderValue}
-                    onChange={handleSliderChange}
-                    className={styles.slider}
-                />
-            </div>
-            <div className="text-center text-sm text-gray-500 mt-2">
-                Lines of Code
-            </div>
-        </div>
-
-            <div className={styles.card}>
-                <div className="text-center">
-                <h2 className="text-lg font-semibold">Final Price</h2>
-                <p className="text-3xl font-bold text-orange-500 mt-4">
-                    ${totalPrice.toLocaleString()}
-                </p>
-                <p className="text-sm text-gray-600 mt-2">
-                    Based on {formatNumber(currentCheckpoint)} lines of code
-                </p>
-                </div>
-            </div>
-            </div>
-
-            <div className={styles.card + " mt-6"}>
-            <div className="text-center">
-                <p className={styles["card-text"]}>
-                If your lines of code exceed{" "}
-                <span className="font-semibold">5 million</span>, we’d love to help with a custom
-                pricing plan!
-                </p>
-                <a href="mailto:hello@keploy.io" className={styles.button}>
-                Let’s Talk
-                </a>
-            </div>
-            </div>
-        </div>
-        <Footer />
-    </div>
-  );
-};
-
-export default Pricing;
\ No newline at end of file
diff --git a/app/(default)/pricing/pricing.module.css b/app/(default)/pricing/pricing.module.css
deleted file mode 100644
index 336a05f..0000000
--- a/app/(default)/pricing/pricing.module.css
+++ /dev/null
@@ -1,112 +0,0 @@
-.header {
-    background: linear-gradient(90deg, #f97316, #fb923c);
-    color: white;
-    text-align: center;
-    padding: 4rem 1rem;
-    border-radius: 0 0 1rem 1rem;
-    margin-top: 3rem;
-}
-  
-.header h1 {
-    font-size: 3rem;
-    font-weight: 800;
-}
-
-.header p {
-    font-size: 1.25rem;
-    margin-top: 1rem;
-    opacity: 0.9;
-}
-
-.card {
-    background-color: #ffffff;
-    border-radius: 1rem;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    padding: 4rem;
-    width: 100%;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
-}
-
-.card-title {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: #374151;
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.card-text {
-    font-size: 1rem;
-    color: #6b7280;
-    text-align: center;
-    margin-bottom: 5vh;
-}
-
-/* Slider Styling */
-.slider {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 8px;
-    background: #e5e7eb;
-    border-radius: 4px;
-    outline: none;
-    transition: background 0.3s;
-}
-
-.slider:hover {
-    background: #d1d5db;
-}
-
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 24px;
-    height: 24px;
-    background-color: #f97316;
-    border: 3px solid white;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.slider::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
-}
-
-.slider::-moz-range-thumb {
-    width: 24px;
-    height: 24px;
-    background-color: #f97316;
-    border: 3px solid white;
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.slider::-moz-range-thumb:hover {
-    transform: scale(1.2);
-}
-
-.button {
-    background: linear-gradient(90deg, #f97316, #fb923c);
-    color: white;
-    font-size: 1rem;
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    text-align: center;
-    transition: background 0.3s ease, box-shadow 0.3s ease;
-}
-
-.button:hover {
-    background: linear-gradient(90deg, #fb923c, #f97316);
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-}
\ No newline at end of file