updates

Author: brettstack

old-website-copy.txt

@@ -0,0 +1,32 @@
+Let Code Genie write the foundation of your next project - with a wish.
+npx @codegenie/generator generate "An app that lets users order food from local restaurants" --deploy
+
+Code Genie uses generative AI to design a data model and write source code based on your idea. Download the source code for your full stack application and deploy to AWS in minutes.
+
+
+
+
+
+A Full Stack, Cloud Native, Serverless Application — Instantly
+Code Genie instantly generates a UI, API, Database, Auth, Cloud Infrastructure (IAC) and more based on your idea or data model. The stack consists of these popular languages, libraries, and services:
+
+Built for developers, by developers
+We know how important the developer experience is when it comes to writing great software, and that’s why Code Genie’s generated projects are architected with a DX you’re sure to love.
+
+Local Development
+Make changes to your UI and API code easily with local development. Actual cloud resources are used for all other infrastructure to emulate a prod-like environment.
+
+CI/CD
+Enable the integrated GitHub CI/CD Pipeline to automate deployments of merged changes through to staging and production. PR Preview Stacks can also be enabled for reviewers to easily test changes before approving.
+
+Independent Stacks
+As well as Prod and Staging, each developer can easily spin up their own development stack to work in a prod-like environment.
+
+One-Command Deploy
+Don’t want to use CI/CD? No problem! You can deploy your changes in a single command from your developer machine.
+
+Infrastructure as Code
+All cloud services are instrumented via IAC, ensuring that stacks are repeatable across environments, and changes to infrastructure are version controlled just like your code.
+
+Automated Tests
+All generated source code come with unit and end-to-end tests, achieving over 90% test coverage in total.

src/assets/images/generated-app-screenshot.webp renamed to src/assets/images/generated-app-screenshot-dark.webp

@@ -18,28 +18,33 @@ const FAQData = [
         <a href="https://www.netlify.com" target="_blank" rel="noopener">
           Netlify
         </a>
+        , and swap Auth from Cognito to an alternative such as{' '}
+        <a href="https://auth0.com/" target="_blank" rel="noopener">
+          Auth0
+        </a>
         . The API layer is written in{' '}
         <a href="https://expressjs.com/" target="_blank" rel="noopener">
           Express
         </a>
-        , making it highly portable. Unfortunately,{' '}
+        , making it highly portable to any hosting provider. The main challenge
+        is changing the database from{' '}
         <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{' '}
+        , as it requires 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.
+        ).
       </>
     ),
   },
@@ -61,9 +66,7 @@ export const FAQ = () => (
     >
       <div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
         <div className="md:max-w-4xl mx-auto">
-          <p className="mb-7 custom-block-subtitle text-center">
-            Have any questions?
-          </p>
+          <p className="mb-7 custom-block-subtitle text-center">Questions?</p>
           <h2 className="mb-16 custom-block-big-title text-center">
             Frequently Asked Questions
           </h2>

src/assets/images/generated-app-screenshot-light.webp

@@ -22,42 +22,46 @@ export const Features1 = () => {
         <div className="w-11/12 xl:w-10/12 2xl:w-[1280px] mx-auto md:pl-4 xl:pr-16 xl:pl-16">
           <div className="w-full xl:w-2/3 mb-12 lg:mb-0">
             <span className="custom-block-subtitle">
-              🚀 Kickstart innovation
+              🧞 Kickstart innovation
             </span>
-            <h2 className="gradient-text mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              A solid foundation tailored to your requirements
+            <h2 className="mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+              A <span className="gradient-text">solid software foundation</span>
             </h2>
             <p className="mb-10 text-customGrayText leading-loose">
               Code Genie takes care of the undifferentiated heavy lifting so
-              that you can focus on what makes your product special.
+              that you can focus on what makes your product special. Download
+              the source code for your full stack application and deploy to AWS
+              and have a live app in minutes!
             </p>
           </div>
           <div className="w-full mb-12 lg:mb-0 flex justify-between">
             <div className="w-2/3 md:w-1/2 lg:w-1/3">
               <ul className="mb-6 text-white w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>UI</span>
+                  <span>React Next.js UI</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>API</span>
+                  <span>Node.js Serverless Express API</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>Auth</span>
+                  <span>Cognito Authentication</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>Database</span>
+                  <span>DynamoDB Database</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>Infrastructure</span>
+                  <span>CDK Infrastructure as Code (IAC)</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>Continuous Integration/Delivery</span>
+                  <span>
+                    GitHub Actions Continuous Integration/Delivery (CI/CD)
+                  </span>
                 </li>
                 <li className="mb-4 flex">
                   <HourGlassIcon />

src/components/FAQ.jsx

@@ -22,12 +22,14 @@ export const Features2 = () => (
             <span className="custom-block-subtitle">
               🧑‍💻 Superb Developer Experience
             </span>
-            <h2 className="gradient-text mt-6 mb-8 text-4xl md:text-5xl custom-block-big-title">
-              Technology that devs know and love
+            <h2 className="mt-6 mb-8 text-4xl md:text-5xl custom-block-big-title">
+              <span className="gradient-text">Technology</span> that devs know
+              and love
             </h2>
             <p className="text-customGrayText leading-loose">
               Code Genie generates source code written in languages and
-              frameworks that are voted as most popular by developers.
+              frameworks that are consistently voted as the most popular by
+              developers.
             </p>
           </div>
         </div>

src/components/Features1.jsx

@@ -22,8 +22,8 @@ export const Features3 = () => {
             <span className="custom-block-subtitle">
               ☁️ Scale from zero to infinity
             </span>
-            <h2 className="gradient-text mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              Backed by AWS Cloud Native, Serverless Services
+            <h2 className="mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+              Backed by <span className="gradient-text">AWS Serverless</span>
             </h2>
             <p className="mb-10 text-customGrayText leading-loose">
               Code Genie leverages the power of AWS to provide infinitely

src/components/Features2.jsx

@@ -31,8 +31,9 @@ export const FeaturesDiagonal = ({ children }) => {
         <div className=" 2xl:w-[1150px] xl:w-[1050px]  md:w-4/5 flex justify-center bg-customDarkBg1 pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto lg:flex-row flex-col">
           <div className="w-3/4 lg:w-1/2 flex flex-col lg:mx-unset mx-auto">
             <span className="custom-block-subtitle">🏗️ Built for you</span>
-            <h2 className="gradient-text mt-10 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              Relevant source code based on your data model or idea
+            <h2 className="mt-10 mb-8 text-4xl lg:text-5xl custom-block-big-title">
+              <span className="gradient-text">Relevant source code</span> based
+              on your <span className="gradient-text">data model or idea</span>
             </h2>
             <p className="mb-16 text-customGrayText leading-loose">
               Provide Code Genie with your application's data model, and it will
@@ -42,7 +43,7 @@ export const FeaturesDiagonal = ({ children }) => {
               model for you!
             </p>
             <div
-              className="w-[210px] h-12 custom-button-colored mr-10 "
+              className="w-[210px] h-12 custom-button-colored"
               onClick={() => setIsModalOpen(true)}
             >
               Get Started

src/components/Features3.jsx

@@ -2,14 +2,15 @@ import { useState } from 'react'
 import { motion } from 'framer-motion'
 
 import { InvitationModal } from './InvitationModal'
-import generatedAppScreenshot from '../assets/images/generated-app-screenshot.webp'
+// import generatedAppScreenshot from '../assets/images/generated-app-screenshot.webp'
+import generatedAppScreenshot from '../assets/images/generated-app-screenshot-dark.webp'
 
 export const Hero = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
 
   return (
     <section
-      className="w-screen  flex justify-center items-center bg-customDarkBg1 mb-[28vw] md:mb-[18vw] lg:mb-[10vw] xl:mb-[13vw] 2xl:mb-60 hero-bg-gradient pb-24 sm:pb-32 md:pb-44 lg:pb-0"
+      className="w-screen  flex justify-center items-center bg-customDarkBg1 mb-40 md:mb-60 hero-bg-gradient pb-24 sm:pb-32 md:pb-44 lg:pb-0"
       id="home"
     >
       <div className="w-full md:w-[800px] xl:w-[900px] flex flex-col justify-center items-center pt-16 md:pt-16 lg:pt-20 text-center">
@@ -18,7 +19,7 @@ export const Hero = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
         >
-          <div className="text-customSecondary text-sm sm:text-base  mb-6 sm:mt-32 mt-16  font-bold">
+          <div className="text-customSecondary text-sm sm:text-base mb-6 mt-16 sm:mt-32 font-bold">
             Save months developing new software
           </div>
         </motion.div>
@@ -27,15 +28,28 @@ export const Hero = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.05 }}
         >
-          <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
-            <span className="inline md:hidden gradient-text">No-code</span>
-            <span className="hidden md:inline gradient-text">
-              No-code/Low-code
-            </span>
-          </div>
-          <div className="gradient-text mt-2 sm:mt-2 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-20 md:px-24 lg:px-24">
-            for developers
-          </div>
+          {/* <div className="gradient-text text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
+          <span className="inline md:hidden">No-code</span>
+          <span className="hidden md:inline">No-code/Low-code</span>
+        </div>
+        <div className="mt-2 sm:mt-2 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-20 md:px-24 lg:px-24">
+          for developers
+        </div> */}
+          <h1 className="">
+            {/* <div className="text-2xl sm:text-4xl lg:text-5xl xl:text-5xl  pb-1 font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
+              <span className="inline md:hidden">AI-Generated</span>
+              <span className="hidden md:inline">
+                AI and Data Model-Generated
+              </span>
+            </div> */}
+            <div className="text-3xl sm:text-4xl lg:text-5xl xl:text-7xl mt-4 font-bold tracking-wide text-white">
+              Full Stack <span className="gradient-text">App Generator</span>{' '}
+              with <span className="gradient-text">AI</span>
+            </div>
+            {/* <div className="text-1xl sm:text-4xl lg:text-5xl xl:text-5xl mt-2 font-bold tracking-wide text-white">
+              in an instant
+            </div> */}
+          </h1>
           {/* <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
             <span className="inline md:hidden">Foundation</span>
             <span className="hidden md:inline">A solid foundation</span>
@@ -50,28 +64,35 @@ export const Hero = () => {
           transition={{ duration: 0.5, delay: 0.1 }}
         >
           <div className="text-customGrayText text-sm lg:text-base xl:text-lg sm:text-base mt-10 px-12 sm:px-48 ">
-            Instant Serverless, Cloud Native, Full Stack application and source
-            code based on your data model or idea.
+            <p>
+              AWS Serverless, Cloud Native, end-to-end software based on your
+              data model or idea — instantly.
+            </p>
+            {/* <p>
+              Code Genie uses generative AI to design a data model and write
+              source code based on your idea. Download the source code for your
+              full stack application and deploy to AWS in minutes.
+            </p> */}
           </div>
         </motion.div>
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.15 }}
         >
-          <div className="flex flex-col gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
+          <div className="flex flex-col gap-2 sm:flex-row mt-14 mb-24 justify-center">
             <div
               className="custom-button-colored w-64 sm:w-52 h-12 mr-0 sm:mr-4 lg:mr-6 mb-2 sm:mb-0"
               onClick={() => setIsModalOpen(true)}
             >
               Get Started
             </div>
-            <div
+            {/* <div
               className="w-64 sm:w-52 h-12 rounded-xl font-bold text-white border border-solid  flex justify-center items-center cursor-pointer bg-customDarkBg2 hover:bg-customDarkBg3 border-customPrimary transition"
               onClick={() => setIsModalOpen(true)}
             >
               Live demo
-            </div>
+            </div> */}
           </div>
         </motion.div>
         <motion.div

src/components/FeaturesDiagonal.jsx

@@ -1,8 +1,8 @@
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence } from 'framer-motion'
 
-import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
-import { CloseIcon } from "../assets/icons/CloseIcon";
-import { CodeGenieLogo } from "../assets/logos/CodeGenieLogo";
+import { CheckArrowIcon } from '../assets/icons/CheckArrowIcon'
+import { CloseIcon } from '../assets/icons/CloseIcon'
+import { CodeGenieLogo } from '../assets/logos/CodeGenieLogo'
 
 export const InvitationModal = ({ setIsOpen }) => (
   <AnimatePresence>
@@ -54,28 +54,49 @@ export const InvitationModal = ({ setIsOpen }) => (
                 </div>
               </div>
 
-              <h3 className="mb-7 text-2xl text-white font-bold leading-snug text-center">
+              {/* <h3 className="mb-7 text-2xl text-white font-bold leading-snug text-center">
                 Join 3,953 other developers
-              </h3>
-              <div className="flex flex-wrap -m-2">
-                <div className="w-full sm:w-4/5 p-2 mx-auto">
-                  <input
-                    className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
-                    id="newsletterInput3-1"
-                    type="text"
-                    placeholder="Your email address"
-                  />
-                </div>
-                <div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
-                  <button
-                    className="py-4 px-6 w-full text-white font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-customPrimary hover:bg-[#7274f3] transition ease-in-out duration-200"
-                    type="button"
+              </h3> */}
+              <form
+                action="https://software.us4.list-manage.com/subscribe/post?u=b13787ffc31c5db27758e8484&amp;id=0afafd7ecc&amp;f_id=00ee38e9f0"
+                method="post"
+                id="mc-embedded-subscribe-form"
+                name="mc-embedded-subscribe-form"
+                class="validate"
+                target="_blank"
+              >
+                <div className="flex flex-wrap -m-2">
+                  <div className="w-full sm:w-4/5 p-2 mx-auto">
+                    <input
+                      className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
+                      id="newsletterInput3-1"
+                      type="email"
+                      name="EMAIL"
+                      placeholder="Your email address"
+                    />
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    style={{ position: 'absolute', left: '-5000px' }}
                   >
-                    Join Now
-                  </button>
+                    <input
+                      type="text"
+                      name="b_b13787ffc31c5db27758e8484_0afafd7ecc"
+                      tabindex="-1"
+                    />
+                  </div>
+                  <div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
+                    <button
+                      className="py-4 px-6 w-full text-white font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-customPrimary hover:bg-[#7274f3] transition ease-in-out duration-200"
+                      type="submit"
+                    >
+                      Join Now
+                    </button>
+                  </div>
                 </div>
-              </div>
+              </form>
             </div>
+
             <div
               className="fixed top-6 right-6 z-50 w-5 h-5 cursor-pointer"
               onClick={() => setIsOpen(false)}
@@ -87,4 +108,4 @@ export const InvitationModal = ({ setIsOpen }) => (
       </div>
     </motion.div>
   </AnimatePresence>
-);
+)