From 862c819150a723ae2ded43fc1c286281e0096be7 Mon Sep 17 00:00:00 2001
From: akdeb <deb2@illinois.edu>
Date: Sun, 25 May 2025 18:55:08 +0100
Subject: [PATCH] update pricing section

---
 .../components/LandingPage/PricingSection.tsx | 98 +++++++++++++++++++
 .../app/components/Nav/LeftNavbarButtons.tsx  |  5 +-
 frontend-nextjs/app/page.tsx                  | 55 ++---------
 3 files changed, 110 insertions(+), 48 deletions(-)
 create mode 100644 frontend-nextjs/app/components/LandingPage/PricingSection.tsx

diff --git a/frontend-nextjs/app/components/LandingPage/PricingSection.tsx b/frontend-nextjs/app/components/LandingPage/PricingSection.tsx
new file mode 100644
index 0000000..2ca9466
--- /dev/null
+++ b/frontend-nextjs/app/components/LandingPage/PricingSection.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import { CheckCircle } from "lucide-react";
+import Link from "next/link";
+
+
+const pricingTiers = [
+	{
+	  name: "Basic",
+	  price: "Free",
+	  usage: "60 minutes of usage per month",
+	  features: [
+		"Basic AI characters",
+		"Limited voice interactions"
+	  ],
+	  popular: false
+	},
+	{
+	  name: "Plus",
+	  price: "$10",
+	  period: "/month",
+	  usage: "60 minutes of usage per day",
+	  features: [
+		"All AI characters",
+		"Enhanced voice quality",
+		"Character customization"
+	  ],
+	  popular: true,
+	  link: "https://buy.stripe.com/14k6or0r00j900geV7",
+	},
+	{
+	  name: "Pro",
+	  price: "$30",
+	  period: "/month",
+	  usage: "Unlimited usage",
+	  features: [
+		"All Plus features",
+		"Advanced AI capabilities",
+		"Priority support"
+	  ],
+	  popular: false,
+	  link: "https://buy.stripe.com/14k28b6Po7LB14k3cq"
+	}
+  ];
+
+
+export const PricingSection = () => {
+    return (
+			  <div id="pricing" className="flex flex-col md:flex-row items-center justify-center gap-12 md:gap-6 mb-8">
+				{pricingTiers.map((tier, index) => (
+				  <div key={index} className={`
+					${tier.name === 'Basic' ? 'bg-white border-purple-200' : ''}
+					${tier.name === 'Plus' ? 'bg-white border-purple-400 transform relative' : ''}
+					${tier.name === 'Pro' ? 'bg-white border-purple-500 relative' : ''}
+					p-6 rounded-xl shadow-sm w-full md:w-1/3 transition-transform duration-300
+				  `}>
+					{tier.name === 'Plus' && (
+					  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-black text-xs px-3 py-1 rounded-full font-medium">
+						Most Popular
+					  </div>
+					)}
+					{tier.name === 'Pro' && (
+					  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white text-xs px-3 py-1 rounded-full font-medium">
+						Best Value
+					  </div>
+					)}
+					<h3 className={`text-xl font-bold mb-2 ${tier.name === 'Pro' ? 'text-purple-700' : 'text-gray-800'}`}>{tier.name}</h3>
+					<div className={`text-3xl font-bold mb-2 ${tier.name === 'Pro' ? 'text-purple-800' : 'text-gray-900'}`}>{tier.price}<span className="text-lg">{tier.period || ''}</span></div>
+					<p className="text-sm mb-4 text-gray-600">{tier.usage}</p>
+					<ul className="text-left text-sm mb-4 space-y-2 text-gray-700">
+					  {tier.features.map((feature, featureIndex) => (
+						<li key={featureIndex} className="flex items-center">
+						  <CheckCircle className={`h-4 w-4 mr-2 ${tier.name === 'Pro' ? 'text-purple-600' : 'text-purple-500'}`} />
+						  <span>{feature}</span>
+						</li>
+					  ))}
+					</ul>
+					{tier.name === 'Pro' && (
+					  <div className="mt-4 pt-2 border-t border-purple-100">
+						<span className="text-xs text-purple-600">Perfect for serious collectors and enthusiasts</span>
+					  </div>
+					)}
+					
+					{tier.name === 'Basic' ? (
+					  <Button disabled className="w-full mt-4 bg-gray-100 text-gray-500 cursor-not-allowed">
+					    Current Plan
+					  </Button>
+					) : (
+					  <Link href={tier.link || ""} passHref>
+					    <Button className={`w-full mt-4 ${tier.name === 'Plus' ? 'bg-yellow-400 hover:bg-yellow-500 text-black' : 'bg-purple-600 hover:bg-purple-700 text-white'}`}>
+					      Subscribe
+					    </Button>
+					  </Link>
+					)}
+				  </div>
+				))}
+			  </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend-nextjs/app/components/Nav/LeftNavbarButtons.tsx b/frontend-nextjs/app/components/Nav/LeftNavbarButtons.tsx
index 4b95cff..30e3972 100644
--- a/frontend-nextjs/app/components/Nav/LeftNavbarButtons.tsx
+++ b/frontend-nextjs/app/components/Nav/LeftNavbarButtons.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Home, Sparkle, ChevronDown, Dog, Bird, Hop, Plus, Blocks, Gamepad2 } from "lucide-react";
+import { Home, Sparkle, ChevronDown, Dog, Bird, Hop, Plus, Blocks, Gamepad2, Link } from "lucide-react";
 import {
     DropdownMenuSeparator,
     DropdownMenu,
@@ -42,7 +42,8 @@ export default function LeftNavbarButtons({ user }: LeftNavbarButtonsProps) {
             title="Click to go to Home page"
         >
             <a href="https://www.elatoai.com">
-                <Home size={18} className="mr-1" />
+                <Link size={18} className="mr-1" />
+                <span className="text-md font-normal mr-1">Main Website</span>
                 <p className="flex items-center font-silkscreen text-xl">
                     <span>Elato</span>
                 </p>
diff --git a/frontend-nextjs/app/page.tsx b/frontend-nextjs/app/page.tsx
index efb85cb..f5347ac 100644
--- a/frontend-nextjs/app/page.tsx
+++ b/frontend-nextjs/app/page.tsx
@@ -10,6 +10,7 @@ import ProductsSection from "./components/LandingPage/ProductsSection";
 import Image from "next/image";
 import { fetchGithubStars } from "./actions";
 import YoutubeDemo from "./components/LandingPage/YoutubeDemo";
+import { PricingSection } from "./components/LandingPage/PricingSection";
 
 export default async function LandingPage() {
   const supabase = createClient();
@@ -173,53 +174,15 @@ export default async function LandingPage() {
 
         {/* Pricing */}
         <section className="w-full py-16 bg-white">
-          <div className="container px-4 md:px-6">
-            <div className="max-w-3xl mx-auto bg-gradient-to-r from-purple-600 to-pink-500 rounded-3xl overflow-hidden shadow-xl">
-              <div className="p-8 md:p-12 text-white text-center">
-                <h2 className="text-3xl md:text-4xl font-bold mb-6">Get Your <span className="font-silkscreen">Elato</span> Today!</h2>
-                <div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-6">
-                  <div className="text-5xl md:text-6xl font-bold">${DEVICE_COST}</div>
-                  <div className="text-xl">
-                    <span className="block">One-time purchase</span>
-                    <span className="block text-purple-100">+ ${SUBSCRIPTION_COST}/month after first FREE month<br /> <span className="text-xs">(or use your own OpenAI API key)</span></span>
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 text-left max-w-2xl mx-auto">
-                  <div className="flex items-start space-x-2">
-                    <div className="bg-white rounded-full p-1 mt-1">
-                      <Zap className="h-4 w-4 text-purple-600" />
-                    </div>
-                    <span>Works with ANY toy or plushie</span>
-                  </div>
-                  <div className="flex items-start space-x-2">
-                    <div className="bg-white rounded-full p-1 mt-1">
-                      <Zap className="h-4 w-4 text-purple-600" />
-                    </div>
-                    <span>Create unlimited AI characters</span>
-                  </div>
-                  <div className="flex items-start space-x-2">
-                    <div className="bg-white rounded-full p-1 mt-1">
-                      <Zap className="h-4 w-4 text-purple-600" />
-                    </div>
-                    <span>First month subscription FREE</span>
-                  </div>
-                  <div className="flex items-start space-x-2">
-                    <div className="bg-white rounded-full p-1 mt-1">
-                      <Zap className="h-4 w-4 text-purple-600" />
-                    </div>
-                    <span>Easy to set up in minutes</span>
-                  </div>
-                </div>
-
-                <Button size="lg" className="bg-white text-purple-600 hover:bg-purple-50 text-lg h-14 px-8">
-                  <Link href={"https://elatoai.com/products"}>Buy Now</Link>
-                </Button>
-              </div>
-            </div>
-          </div>
+        <div className="container px-4 md:px-6">
+		  <div className="max-w-4xl mx-auto bg-gradient-to-r from-purple-100 to-pink-50 rounded-3xl overflow-hidden shadow-lg">
+			<div className="p-8 md:p-12 text-gray-800 text-center">
+			  <h2 className="text-3xl md:text-4xl font-bold mb-12 text-black">Our Pricing</h2>
+        <PricingSection />
+        </div>
+        </div>
+        </div>
         </section>
-
         {/* FAQ */}
         {/* <section className="w-full py-16 bg-purple-50">
         <FAQ className="bg-purple-50" titleClassName="text-purple-900" />