How it Works

Discover How Our Platform Transforms Your Ideas into Apps

Step 1

Build Your App with Ease Using Our Advanced Editor

Experience the power of our web app builder, designed for simplicity and efficiency. Quickly create and customize web pages using pre-designed templates or drag-and-drop functionality.

Boost your workflow with AI-generated content, and effortlessly manage design elements like colors and typography. Our editor provides all the tools you need to transform your vision into reality with ease.

Step 2

Export Your App to NextJS, Svelte, and More

Our platform supports a variety of modern JavaScript frameworks including NextJS, Svelte, and HTML powered by Vite, with additional frameworks on the horizon. Each app is dynamically generated to ensure maximum flexibility and performance.

Opt for the framework that best fits your project requirements and trust in our system to deliver clean, efficient, and scalable results every time.

NextJS

Svelte

HTML

More coming soon

Step 3

Finalize Your App in Production-Ready Code

Get direct access to professionally written code, optimized with TypeScript and ESLint for robust and scalable applications. Our system allows you to download the complete code, free from any vendor lock-in, empowering you to customize and extend your application as needed.

This feature enables you to seamlessly integrate custom logic and adapt the codebase, ensuring a quick transition from development to deployment.

src
- app
  - (index)
    - page.tsx
  - error.tsx
  - favicon.ico
  - layout.tsx
- assets
- components
  - Button.tsx
  - Container.tsx
  - ContentAndTwoImages.tsx
  - FooterWithLogoAndText.tsx
  - GlobalStyles.tsx
  - HeaderWithButtons.tsx
  - Image.tsx
  - Section.tsx
  - TextAndImage.tsx
  - Title.tsx
- layouts
  - ClassicLayout.tsx
- styles
- theme
- utils
- types.ts
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.npmrc
.nvmrc
.prettierignore
.prettierrc
LICENSE.md
README.md
commitlint.config.ts
jest.config.js
jest.setup.ts
lint-staged.config.js
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json

import parse from "html-react-parser"
import React from "react"

import type { IButton } from "@/components/Button"
import Button from "@/components/Button"
import type { IContainer } from "@/components/Container"
import Container from "@/components/Container"
import type { IImage } from "@/components/Image"
import Image from "@/components/Image"
import type { ISection } from "@/components/Section"
import Section from "@/components/Section"
import type { ITitle } from "@/components/Title"
import Title from "@/components/Title"

export interface ITextAndImage {
  text: string
  image: IImage
  button: IButton
  section: ISection
  headline: ITitle
  alignment: "left" | "right"
  container: IContainer
}

export default function TextAndImage(props: ITextAndImage) {
  const { alignment, button, container, headline, image, section, text } = props

  return (
    <>
      <Section {...section}>
        <Container {...container}>
          <div>
            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16 items-center justify-center">
              <div
                className={`relative overflow-hidden min-h-60 md:min-h-80 ${alignment === "left" ? "lg:order-first" : alignment === "right" ? "lg:order-last" : ""}`}>
                <Image className="absolute inset-0 h-full w-full object-cover" {...image} />
              </div>
              <div>
                <Title {...headline} />
                <p className="mt-4 my-8">{parse(text)}</p>
                <Button {...button} />
              </div>
            </div>
          </div>
        </Container>
      </Section>
    </>
  )
}