Stable

Author: michaelshimeles

.env.template

@@ -1,12 +1,10 @@
-"use client";
-
 import { AccordionComponent } from "@/components/homepage/accordion-component";
 import Pricing from "@/components/homepage/pricing";
 import PageWrapper from "@/components/wrapper/page-wrapper";
-import { motion } from "framer-motion";
+import { polar } from "@/lib/polar";
 import { Check, DollarSign } from "lucide-react";
 
-export default function PricingPage() {
+export default async function PricingPage() {
   const features = [
     "Authentication & Authorization",
     "Payment Processing",
@@ -18,6 +16,10 @@ export default function PricingPage() {
     "API Integration",
   ];
 
+  const { result } = await polar.products.list({
+    organizationId: process.env.POLAR_ORGANIZATION_ID
+  })
+
   return (
     <PageWrapper>
       <div className="container mx-auto px-4">
@@ -29,49 +31,29 @@ export default function PricingPage() {
 
           <div className="space-y-6 text-center">
             {/* Pill badge */}
-            <motion.div
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-              className="mx-auto w-fit rounded-full border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/30 px-4 py-1 mb-6"
-            >
+            <div className="mx-auto w-fit rounded-full border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/30 px-4 py-1 mb-6">
               <div className="flex items-center gap-2 text-sm font-medium text-blue-900 dark:text-blue-200">
                 <DollarSign className="h-4 w-4" />
                 <span>Simple, Transparent Pricing</span>
               </div>
-            </motion.div>
+            </div>
 
             {/* Main heading */}
-            <motion.h1
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-blue-800 to-gray-900 dark:from-white dark:via-blue-300 dark:to-white animate-gradient-x pb-2"
-            >
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-blue-800 to-gray-900 dark:from-white dark:via-blue-300 dark:to-white animate-gradient-x pb-2">
               Choose Your Perfect Plan
-            </motion.h1>
+            </h1>
 
             {/* Subtitle */}
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.2 }}
-              className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
-            >
+            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
               Get started with our powerful Next.js starter kit and build your
               next big idea faster than ever
-            </motion.p>
+            </p>
           </div>
         </section>
 
         <section className="py-12">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
-            <motion.div
-              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 }}
-              className="space-y-4"
-            >
+            <div className="space-y-4">
               <h2 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-blue-800 to-gray-900 dark:from-white dark:via-blue-300 dark:to-white">
                 Everything You Need
               </h2>
@@ -80,13 +62,8 @@ export default function PricingPage() {
                 need to build modern web applications. No more wasting time on
                 repetitive setups.
               </p>
-            </motion.div>
-            <motion.div
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-              className="grid grid-cols-1 sm:grid-cols-2 gap-4"
-            >
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {features.map((feature, index) => (
                 <div
                   key={feature}
@@ -96,11 +73,11 @@ export default function PricingPage() {
                   <span>{feature}</span>
                 </div>
               ))}
-            </motion.div>
+            </div>
           </div>
 
           <div className="py-8">
-            <Pricing />
+            <Pricing result={result as any} />
           </div>
         </section>
 

app/(pages)/pricing/page.tsx

@@ -13,7 +13,7 @@ export default function Home() {
       </div>
       <SideBySide />
       <MarketingCards />
-      <Pricing />
+      {/* <Pricing /> */}
       <AccordionComponent />
     </PageWrapper>
   );