update pricing section
This commit is contained in:
akdeb
parent
7d7aee4cdc
commit
862c819150
3 changed files with 110 additions and 48 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue