VibeCode AI

A stunning glassmorphism-themed landing page for an AI-powered application development platform that introduces 'vibe coding'.

VibeCode AI is an innovative, AI-powered platform designed to revolutionize the way developers build and deploy web applications. The core concept is 'vibe coding' - a seamless, intuitive, and enjoyable development experience where the AI acts as a collaborative partner, handling boilerplate, suggesting architecture, and automating deployments on Cloudflare's edge network.

Key Features

• Stunning Glassmorphism UI: A futuristic and clean aesthetic using semi-transparent, blurred backgrounds for a modern look.
• AI-Powered Development: Introduces the concept of 'vibe coding' where an AI partner assists in the development lifecycle.
• Fully Responsive: Flawless layouts and user experience across all device sizes, from mobile to desktop.
• Interactive & Polished: Smooth animations, hover states, and micro-interactions for a delightful user experience.
• Built for the Edge: Designed to be deployed on Cloudflare's high-performance global network.

Technology Stack

• Frontend: React, Vite, TypeScript
• Styling: Tailwind CSS, shadcn/ui
• Animation: Framer Motion
• Icons: Lucide React
• Backend & Deployment: Cloudflare Workers

Getting Started

Follow these instructions to get a local copy up and running for development and testing purposes.

Prerequisites

• Node.js (v18 or later)
• Bun package manager

Installation

1. Clone the repository:

   git clone https://github.com/your-username/vibecode_ai.git
   cd vibecode_ai

2. Install dependencies:

   bun install

3. Set up environment variables: Create a .dev.vars file in the root of the project for local development. This file is used by Wrangler to inject secrets into your worker.

   # .dev.vars
   CF_AI_BASE_URL="https://gateway.ai.cloudflare.com/v1/YOUR_ACCOUNT_ID/YOUR_GATEWAY_ID/openai"
   CF_AI_API_KEY="your-cloudflare-api-key"

   Replace the placeholder values with your actual Cloudflare AI Gateway details.

Running the Development Server

To start the local development server, which includes both the Vite frontend and the Cloudflare worker, run:

bun dev

The application will be available at http://localhost:3000.

Development

The project is structured with a clear separation between the frontend and backend code:

• src/: Contains all the React frontend code, including pages, components, and styles.
  • src/pages/HomePage.tsx: The main entry point for the landing page.
  • src/components/landing/: Contains all custom components for the landing page (Header, Footer, Cards).
• worker/: Contains the Cloudflare Worker backend code.

The frontend auto-updates as you edit the files.

Deployment

This project is designed for seamless deployment to Cloudflare's global network.

1. Build the application: The deployment script handles the build process automatically.

2. Deploy to Cloudflare: Run the deploy command using Bun:

   bun run deploy

   This command will build the Vite application, bundle the worker, and deploy it to your Cloudflare account.

Alternatively, you can deploy your own version of this project with a single click.