add pricing

Author: brettstack

src/components/FAQ.jsx

@@ -7,11 +7,6 @@ const FAQData = [
     answer:
       'No! Code Genie generates a foundation for you. What you do from there is totally up to you and your engineering team!',
   },
-  {
-    question: 'Do I need to pay Code Genie a monthly fee?',
-    answer:
-      'No! The generated application is intended to be deployed to your own AWS account. We simply help you get started with a low cost solution ($0 when not in use!) that scales with you.',
-  },
   {
     question: 'Am I locked into AWS?',
     answer: (
@@ -28,12 +23,31 @@ const FAQData = [
           Express
         </a>
         , making it highly portable. Unfortunately,{' '}
-        <a href="https://aws.amazon.com/dynamodb/">DynamoDB</a> is a bit more
-        challenging, and would require writing a database migration script and
-        updating the controller logic.
+        <a
+          href="https://aws.amazon.com/dynamodb/"
+          target="_blank"
+          rel="noopener"
+        >
+          DynamoDB
+        </a>{' '}
+        is a bit more challenging, and would a database migration (e.g. see this
+        article on how you would{' '}
+        <a
+          href="https://www.mongodb.com/blog/post/migrating-your-data-from-dynamodb-to-mongodb-atlas"
+          target="_blank"
+          rel="noopener"
+        >
+          migrate from DynamoDB to MongoDB
+        </a>
+        ) and updating some controller logic.
       </>
     ),
   },
+  {
+    question: 'Do I need to pay Code Genie a monthly fee?',
+    answer:
+      'No! The generated application is intended to be deployed to your own AWS account. We simply help you get started with a low cost solution ($0 when not in use!) that scales with you.',
+  },
 ]
 
 export const FAQ = () => (

src/components/Features1.jsx

@@ -11,7 +11,7 @@ export const Features1 = () => {
   return (
     <section
       className="w-full bg-customDarkBg2 mt-12 sm:mt-20 mb-10 lg:my-20"
-      id="features3"
+      id="features"
     >
       <motion.div
         initial={{ opacity: 0 }}

src/components/Features3.jsx

@@ -10,10 +10,7 @@ import { CheckArrowIcon } from '../assets/icons/CheckArrowIcon'
 
 export const Features3 = () => {
   return (
-    <section
-      className="w-full bg-customDarkBg2 mt-12 sm:mt-20 mb-10 lg:my-20"
-      id="features"
-    >
+    <section className="w-full bg-customDarkBg2 mt-12 sm:mt-20 mb-10 lg:my-20">
       <motion.div
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}

src/components/FeaturesDiagonal.jsx

@@ -48,7 +48,7 @@ export const FeaturesDiagonal = ({ children }) => {
               Get Started
             </div>
           </div>
-          <div className="w-4/5 lg:w-1/2 lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0 max-h-[400px]">
+          <div className="w-4/5 lg:w-1/2 lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0 max-h-[472px]">
             {children}
           </div>
         </div>

src/components/Navbar.jsx

@@ -8,7 +8,7 @@ const navbarLinks = [
   { label: 'Home', href: '#home', ariaLabel: 'Home' },
   { label: 'Features', href: '#features', ariaLabel: 'Features' },
   { label: 'Pricing', href: '#pricing', ariaLabel: 'Pricing' },
-  { label: 'Feedback', href: '#feedback', ariaLabel: 'Feedback' },
+  // { label: 'Feedback', href: '#feedback', ariaLabel: 'Feedback' },
   { label: 'FAQ', href: '#FAQ', ariaLabel: 'FAQ' },
 ]
 

src/components/Pricing.jsx

@@ -1,24 +1,24 @@
-import { useState } from "react";
-import { motion } from "framer-motion";
+import { useState } from 'react'
+import { motion } from 'framer-motion'
 
-import { InvitationModal } from "./InvitationModal";
-import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
+import { InvitationModal } from './InvitationModal'
+import { CheckArrowIcon } from '../assets/icons/CheckArrowIcon'
 
 const pricingData = [
-  "Seamless integration",
-  "Real-time data visualization",
-  "Advanced predictive analytics",
-  "Collaborative environment",
-  "Responsive customer support",
-];
+  'Seamless integration',
+  'Real-time data visualization',
+  'Advanced predictive analytics',
+  'Collaborative environment',
+  'Responsive customer support',
+]
 
 export const Pricing = () => {
-  const [isMonthly, setIsMonthly] = useState(true);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isMonthly, setIsMonthly] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
 
   const handleChange = () => {
-    setIsMonthly(!isMonthly);
-  };
+    setIsMonthly(!isMonthly)
+  }
 
   return (
     <section className="w-screen flex justify-center bg-customDarkBg2 relative">
@@ -32,17 +32,33 @@ export const Pricing = () => {
         >
           <div className="container mx-auto px-4">
             <div className="max-w-2xl mx-auto text-center mb-16">
-              <span className="custom-block-subtitle">
-                Find Your Perfect Fit
-              </span>
+              <span className="custom-block-subtitle">Get in touch</span>
               <h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
-                Choose your best plan
+                Custom pricing available now
               </h2>
               <p className="mb-6 text-customGrayText">
-                Select the plan that suits your needs and benefit from our
-                analytics tools.
+                Code Genie is not yet generally available and we're currently
+                working closely with partners to jumpstart the development of
+                their new software projects. We're also offering free builds for
+                some Nonprofits.{' '}
+                <a href="mailto:[email protected]">
+                  Shoot us an email to schedule a demo
+                </a>
+                .
               </p>
-              <label className="mx-auto bg-customDarkBg3 relative flex justify-between items-center group text-xl w-44 h-12 rounded-lg pr-36 pl-1 cursor-pointer">
+              <div className="flex justify-center">
+                <div
+                  className="w-[210px] h-12 custom-button-colored mr-10 "
+                  onClick={() =>
+                    window.open(
+                      'mailto:[email protected]?subject=Code Genie Demo'
+                    )
+                  }
+                >
+                  Schedule a demo
+                </div>
+              </div>
+              {/* <label className="mx-auto bg-customDarkBg3 relative flex justify-between items-center group text-xl w-44 h-12 rounded-lg pr-36 pl-1 cursor-pointer">
                 <input
                   type="checkbox"
                   className="peer appearance-none"
@@ -53,16 +69,16 @@ export const Pricing = () => {
                 <div className="flex absolute text-white text-sm font-bold">
                   <div
                     className={
-                      isMonthly ? "mr-9 ml-3" : "mr-9 ml-3 text-gray-400"
+                      isMonthly ? 'mr-9 ml-3' : 'mr-9 ml-3 text-gray-400'
                     }
                   >
                     Monthly
                   </div>
-                  <div className={isMonthly && "text-gray-400"}>Yearly</div>
+                  <div className={isMonthly && 'text-gray-400'}>Yearly</div>
                 </div>
-              </label>
+              </label> */}
             </div>
-            <div className="flex flex-wrap flex-col lg:flex-row -mx-4 items-center mt-20">
+            {/* <div className="flex flex-wrap flex-col lg:flex-row -mx-4 items-center mt-20">
               <div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
                 <div className="p-8 bg-customDarkBg3 rounded-3xl">
                   <h4 className="mb-2 text-xl font-bold font-heading text-white text-left">
@@ -73,7 +89,7 @@ export const Pricing = () => {
                       $0
                     </div>
                     <div className="text-gray-500">
-                      {isMonthly ? "/ month" : "/ year"}
+                      {isMonthly ? '/ month' : '/ year'}
                     </div>
                   </div>
 
@@ -103,10 +119,10 @@ export const Pricing = () => {
                   </h4>
                   <div className="flex justify-start items-end">
                     <div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
-                      {isMonthly ? "$19" : "$180"}
+                      {isMonthly ? '$19' : '$180'}
                     </div>
                     <div className="text-gray-500">
-                      {isMonthly ? "/ month" : "/ year"}
+                      {isMonthly ? '/ month' : '/ year'}
                     </div>
                   </div>
                   <p className="mt-8 mb-8 2xl:mb-12 text-gray-500 leading-loose text-left">
@@ -135,14 +151,14 @@ export const Pricing = () => {
                   </h4>
                   <div className="flex justify-start items-end">
                     <div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
-                      {isMonthly ? "$36" : "$390"}
+                      {isMonthly ? '$36' : '$390'}
                     </div>
                     <div className="text-gray-500">
-                      {isMonthly ? "/ month" : "/ year"}
+                      {isMonthly ? '/ month' : '/ year'}
                     </div>
                   </div>
                   <p className="mt-4 mb-6 2xl:mb-10 text-gray-500 leading-loose text-left">
-                    Experience the full power of our  analytic platform
+                    Experience the full power of our analytic platform
                   </p>
                   <ul className="mb-2 2xl:mb-6 text-white">
                     {pricingData.map((text, index) => (
@@ -160,13 +176,13 @@ export const Pricing = () => {
                   </div>
                 </div>
               </div>
-            </div>
+            </div> */}
           </div>
         </motion.div>
       </div>
       {isModalOpen && (
         <InvitationModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
       )}
     </section>
-  );
-};
+  )
+}

src/pages/index.astro

@@ -8,7 +8,7 @@ import { Features2 } from "../components/Features2.jsx";
 import { Features3 } from "../components/Features3.jsx";
 // import { Testimonials } from "../components/Testimonials.jsx";
 import { FeaturesDiagonal } from "../components/FeaturesDiagonal.jsx";
-// import { Pricing } from "../components/Pricing.jsx";
+import { Pricing } from "../components/Pricing.jsx";
 import { FAQ } from "../components/FAQ.jsx";
 // import { Brands } from "../components/Brands.jsx";
 import { Divider } from "../components/Divider";
@@ -97,8 +97,9 @@ definitions:
   <!-- <Testimonials client:load /> -->
   <FeaturesDiagonal client:load>
     <Code code={projectSchemaYamlFile} lang="yaml" />
-    </FeaturesDiagonal>
-  <!-- <Pricing client:load /> -->
+  </FeaturesDiagonal>
+  <Pricing client:load />
+  <Divider />
   <!-- <Brands client:load /> -->
   <FAQ client:load />
   <Footer />

src/styles/Theme.css

@@ -61,6 +61,6 @@ html {
   font-display: var(--fontsource-Inter-font-display, optional);
 }
 
-a {
+/* a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
-}
+} */