add data model editor image instead of old json schema

src/components/Features1.jsx

@@ -19,41 +19,42 @@ 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">
-            <span className='text-3xl'>🚀</span> Kickstart innovation
+              <span className="text-3xl">🚀</span> Kickstart innovation
             </span>
             <h2 className="mt-6 mb-8 text-4xl lg:text-5xl custom-block-big-title">
-              Generate a solid{' '}
-              <span className="gradient-text">software foundation</span>{' '}
-              instantly
+              Generate a solid <span className="gradient-text">software foundation</span> instantly
             </h2>
             <p className="mb-10 text-customGrayText leading-loose text-justify">
-              Code Genie takes care of the boring stuff so you can focus on what makes your product special. Download
-              the source code for your full stack application and deploy to AWS
-              to have a live app in minutes!
+              Code Genie takes care of the boring stuff so you can focus on what makes your product special. Download the source code for
+              your full stack application and deploy to AWS to 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>Web App</span>
+                  <span>React Web App</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>REST API</span>
+                  <span>Serverless Express REST API</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
-                  <span>Authentication</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 as Code (IAC)</span>
+                  <span>Operational Dashboards & Alarms</span>
+                </li>
+                <li className="mb-4 flex">
+                  <CheckArrowIcon />
+                  <span>CDK Infrastructure as Code (IAC)</span>
                 </li>
                 <li className="mb-4 flex">
                   <CheckArrowIcon />
@@ -62,45 +63,26 @@ export const Features1 = () => {
                 <li className="mb-4 flex">
                   <HourGlassIcon />
                   <span>
-                    Unit/Integration Tests{' '}
-                    <span className="text-xs text-neutral-400">
-                      coming soon
-                    </span>
+                    Unit/Integration Tests <span className="text-xs text-neutral-400">coming soon</span>
                   </span>
                 </li>
               </ul>
             </div>
             <div className="w-1/3 md:w-1/2 lg:w-2/3 mx-auto flex-wrap justify-end flex items-center md:items-start">
               <div className="w-1/2 md:w-1/3 lg:w-1/4 px-2 lg:px-0 -mt-10">
                 <div className="mb-4 rounded">
-                  <img
-                    src={ui.src}
-                    alt="UI"
-                    className="w-full max-w-[120px] mx-auto"
-                  />
+                  <img src={ui.src} alt="UI" className="w-full max-w-[120px] mx-auto" />
                 </div>
                 <div className="rounded">
-                  <img
-                    src={api.src}
-                    alt="API"
-                    className="w-full max-w-[120px] mx-auto"
-                  />
+                  <img src={api.src} alt="API" className="w-full max-w-[120px] mx-auto" />
                 </div>
               </div>
               <div className="w-1/2 md:w-1/3 lg:w-1/4 px-2">
                 <div className="mb-4 rounded-lg">
-                  <img
-                    src={auth.src}
-                    alt="auth"
-                    className="w-full max-w-[120px] mx-auto"
-                  />
+                  <img src={auth.src} alt="auth" className="w-full max-w-[120px] mx-auto" />
                 </div>
                 <div className="rounded-lg">
-                  <img
-                    src={database.src}
-                    alt="database"
-                    className="w-full max-w-[120px] mx-auto"
-                  />
+                  <img src={database.src} alt="database" className="w-full max-w-[120px] mx-auto" />
                 </div>
               </div>
             </div>

src/components/FeaturesDiagonal.jsx

@@ -11,10 +11,7 @@ export const FeaturesDiagonal = ({ children }) => {
           preserveAspectRatio="none"
           className="custom-bg-dark2"
         >
-          <path
-            d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-            className="custom-bg-dark1"
-          ></path>
+          <path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" className="custom-bg-dark1"></path>
         </svg>
       </div>
       <motion.div
@@ -25,28 +22,23 @@ 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"><span className='text-3xl leading-4 mr-2'>🏗️</span> <span className='align-text-bottom'>Built for you</span></span>
+            <span className="custom-block-subtitle">
+              <span className="text-3xl leading-4 mr-2">🏗️</span> <span className="align-text-bottom">Built for you</span>
+            </span>
             <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>
+              <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 text-justify">
-              Provide Code Genie with your application's data model, and it will
-              generate application source code to meet your requirements. Don't
-              have a data model? Simply tell Code Genie your "wish" (app
-              idea/description) and it'll do its best to design an initial data
-              model for you!
+              Provide Code Genie with your application's data model, and it will generate application source code to meet your requirements.
+              Don't have a data model? Simply tell Code Genie your "wish" (app idea/description) and it'll do its best to design an initial
+              data model for you!
             </p>
-            <a
-              href='/docs/guides/getting-started'
-              className="w-[210px] h-12 custom-button-colored unstyled"
-            >
+            <a href="/docs/guides/getting-started" className="w-[210px] h-12 custom-button-colored unstyled">
               Get Started
             </a>
           </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-[472px]">
-            {children}
-          </div>
+          <div className="w-4/5 lg:w-full lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0">{children}</div>
         </div>
       </motion.div>
       <div className="custom-shape-divider-top-1665696661 w-full">
@@ -57,10 +49,7 @@ export const FeaturesDiagonal = ({ children }) => {
           preserveAspectRatio="none"
           className="custom-bg-dark2"
         >
-          <path
-            d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-            className="custom-bg-dark1"
-          ></path>
+          <path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" className="custom-bg-dark1"></path>
         </svg>
       </div>
     </section>

src/components/Hero.jsx

@@ -12,21 +12,13 @@ export const Hero = () => {
       id="home"
     >
       <div className="w-11/12 md:w-[800px] xl:w-[900px] flex flex-col justify-center items-center pt-16 md:pt-16 lg:pt-20 text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
           <div className="text-customSecondary text-sm sm:text-base mb-6 mt-16 sm:mt-10">
-          Generate Full Stack Serverless AWS Applications, with a <span style={{textDecoration: 'line-through'}}>wish</span> AI-powered command <span className='text-3xl md:text-5xl'>🧞‍♂️</span>
+            Generate Full Stack Serverless AWS Applications based on your own data model <span className="text-3xl md:text-5xl">🧞‍♂️</span>
             {/* Save months developing new software */}
           </div>
         </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.05 }}
-        >
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.05 }}>
           {/* <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>
@@ -40,19 +32,14 @@ export const Hero = () => {
             </h1>
           </div>
         </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.1 }}
-        >
-          <div className='mb-4 '>
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.1 }}>
+          <div className="mb-4 ">
             <div className="mb-6 text-customGrayText text-sm lg:text-base xl:text-lg sm:text-base mt-4">
-              <p>
-              Try it now! Swap in your own idea and run:
-              </p>
-              <div className='terminal mt-6'>
-                npx @codegenie/cli generate --name "Wildlife Rescue" --description "An app that lets users report injured wildlife. Other users (wildlife rescuers) can see reports in their area and respond with questions and updates."
-              </div>
+              {/* <p>Try it now! Swap in your own idea and run:</p>
+              <div className="terminal mt-6">
+                npx @codegenie/cli generate --name "Wildlife Rescue" --description "An app that lets users report injured wildlife. Other
+                users (wildlife rescuers) can see reports in their area and respond with questions and updates."
+              </div> */}
               {/* <p>
                 Download source code based on your data model or idea, then deploy
                 to your AWS account in minutes.
@@ -72,17 +59,13 @@ export const Hero = () => {
             </div> */}
           </div>
         </motion.div>
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.15 }}
-        >
+        <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 mb-14 mt-4 justify-center">
-            <a
-              href='/docs/guides/getting-started'
-              className="w-[320px] h-12 custom-button-colored unstyled"
-            >
+            {/* <a href="/docs/guides/getting-started" className="w-[320px] h-12 custom-button-colored unstyled">
               See the Getting Started guide
+            </a> */}
+            <a href="https://app.codegenie.codes" className="w-[320px] h-12 custom-button-colored unstyled">
+              Get Started
             </a>
           </div>
         </motion.div>
@@ -118,10 +101,7 @@ export const Hero = () => {
               preserveAspectRatio="none"
               className=" bg-customDarkBg2"
             >
-              <path
-                d="M1200 0L0 0 598.97 114.72 1200 0z"
-                className="shape-fill custom-bg-dark1"
-              ></path>
+              <path d="M1200 0L0 0 598.97 114.72 1200 0z" className="shape-fill custom-bg-dark1"></path>
             </svg>
           </div>
         </div>

src/components/Navbar.jsx

@@ -30,53 +30,35 @@ export const Navbar = () => {
   return (
     <nav className="w-full h-20 flex flex-col justify-center items-center fixed bg-customDarkBg1 lg:bg-customDarkBgTransparent z-40 lg:backdrop-blur-xl">
       <div className="w-11/12 xl:w-10/12 2xl:w-[1280px] flex justify-between items-center relative">
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.3 }}
-          exit={{ opacity: 0 }}
-        >
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} exit={{ opacity: 0 }}>
           <div className="w-[180px]">
             <a className="unstyled navbar-link" href="#home" aria-label="Home">
               <div className="flex justify-start items-center grow basis-0">
                 <div className="text-white mr-2 text-6xl">
                   <CodeGenieLogo />
                 </div>
-                <div className="text-white font-['Inter'] font-bold text-xl">
-                  Code Genie
-                </div>
+                <div className="text-white font-['Inter'] font-bold text-xl">Code Genie</div>
               </div>
             </a>
           </div>
         </motion.div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.3 }}
-          exit={{ opacity: 0 }}
-        >
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} exit={{ opacity: 0 }}>
           <ul className="hidden md:flex h-full">
             {navbarLinks.map(({ href, label, ariaLabel }) => (
               <li key={label}>
-                <a
-                  className="unstyled navbar-link"
-                  href={href}
-                  aria-label={ariaLabel}
-                >
+                <a className="unstyled navbar-link" href={href} aria-label={ariaLabel}>
                   {label}
                 </a>
               </li>
             ))}
           </ul>
         </motion.div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.3 }}
-          exit={{ opacity: 0 }}
-        >
-          <div className="grow basis-0 justify-end hidden md:flex w-[180px]">
-            <a
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} exit={{ opacity: 0 }}>
+          <div className="grow basis-0 justify-end hidden md:flex w-[80px]">
+            <a href="https://app.codegenie.codes" className="w-[320px] h-12 custom-button-colored unstyled">
+              Login
+            </a>
+            {/* <a
               className="w-10 mr-2"
               href="https://twitter.com/CodeGenieCodes"
               target="_blank"
@@ -102,7 +84,7 @@ export const Navbar = () => {
               aria-label="GitHub"
             >
               <GithubIcon />
-            </a>
+            </a> */}
           </div>
         </motion.div>
         <div
@@ -117,54 +99,25 @@ export const Navbar = () => {
       {/* Mobile navbar */}
       <AnimatePresence>
         {isOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3 }}
-            exit={{ opacity: 0 }}
-          >
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} exit={{ opacity: 0 }}>
             <div
               className="flex flex-col mt-16 lg:hidden absolute top-4 left-0  bg-customDarkBg1 z-50 w-full 
         items-center gap-10 pb-10 border-y border-solid border-customDarkBg3 pt-10
         "
             >
               {navbarLinks.map(({ label, href, ariaLabel }) => (
-                <a
-                  key={href}
-                  className="navbar-link unstyled"
-                  href={href}
-                  onClick={() => setIsOpen(false)}
-                  aria-label={ariaLabel}
-                >
+                <a key={href} className="navbar-link unstyled" href={href} onClick={() => setIsOpen(false)} aria-label={ariaLabel}>
                   {label}
                 </a>
               ))}
               <div className="flex">
-                <a
-                  className="w-10"
-                  href="https://twitter.com/CodeGenieCodes"
-                  target="_blank"
-                  rel="noopener"
-                  aria-label="Twitter"
-                >
+                <a className="w-10" href="https://twitter.com/CodeGenieCodes" target="_blank" rel="noopener" aria-label="Twitter">
                   <TwitterIcon />
                 </a>
-                <a
-                  className="w-10"
-                  href="https://discord.gg/YJ9gQhheyn"
-                  target="_blank"
-                  rel="noopener"
-                  aria-label="GitHub"
-                >
+                <a className="w-10" href="https://discord.gg/YJ9gQhheyn" target="_blank" rel="noopener" aria-label="GitHub">
                   <DiscordIcon />
                 </a>
-                <a
-                  className="w-10"
-                  href="https://github.com/CodeGenieApp"
-                  target="_blank"
-                  rel="noopener"
-                  aria-label="GitHub"
-                >
+                <a className="w-10" href="https://github.com/CodeGenieApp" target="_blank" rel="noopener" aria-label="GitHub">
                   <GithubIcon />
                 </a>
               </div>

src/content/docs/docs/guides/getting-started.mdx

@@ -38,6 +38,8 @@ Items should have a title, description, be markable as completed, have a due dat
 
 :::tip
 Try to keep the description focused on the kind of data that your app deals with, rather than the custom business logic requirements. Code Genie creates project foundations based on data models, and doesn't add custom business logic (yet).
+
+The App Definition Generator uses AI to generate a data model based on natural language. The more detail you provide, the more accurate the resulting data module. However, don't try to get a perfect data model using this approach. Instead, aim for getting a data model that's good enough as a starting point, and then manual tweak the data model to match your requirements.
 :::
 
 ## Initialize app and deploy to AWS