Try bold storefront concepts or launch campaign sites without rewiring your stack. With Geins, you compose a new experience from Cart, Promotions, Content and the SDK—then deploy fast on our cloud‑native platform.
Pick a product set, attach content blocks, hook a promotion and publish. Geins handles Cart, totals, taxes and emails so your team focuses on the story and the visuals.
Compose with Geins building blocks and deploy anywhere. Keep what performs, iterate on the rest.
Steal our go‑to starters for fast experiments—flash sales, bundles, drops and market‑specific launches. Each prompt is tuned for Geins SDK, Cart and Promotions so you can scaffold pages, rules and content in minutes.
Generate a fully-featured e-commerce landing page using React, TypeScript, and Tailwind CSS. The page should showcase a single product fetched from the Geins API and allow users to purchase the product via a Geins-powered checkout.
## Specifications:
- Image gallery showing different images of the product
- Specification section that is well-structured and easy to read and always visible
- Price and a USP
- A clear Call to Action button that will send user to an external checkout page
## Special Instructions:
1. **Design Aesthetic:** The landing page should have a beautiful, unique, and production-ready design. Avoid cookie-cutter templates.
2. **UI Library:** Utilize the `shadcn/ui` library for UI components. Do not install other UI theme packages unless explicitly requested.
3. **Iconography:** Use icons from `lucide-react` for visual elements, including logos.
4. **Images:** Use stock photos from Unsplash where appropriate, ensuring the URLs are valid and reliable.
5. **Geins Integration:**
* Use the `@geins/core` and `@geins/oms` packages for interacting with the Geins API, version 0.5.
* Fetch product data using the following gql `PRODUCT_QUERY` GraphQL query:
```typescript
import { gql } from '@geins/core';
export const PRODUCT_QUERY = gql`
query product($productId: Int!, $channelId: String, $languageId: String, $marketId: String) {
product(productId: $productId, channelId: $channelId, languageId: $languageId, marketId: $marketId) {
name
brand {
name
}
productImages {
fileName
}
primaryCategory {
name
}
categories {
name
}
unitPrice {
sellingPriceIncVatFormatted
}
texts {
text1
}
parameterGroups {
name
parameterGroupId
parameters {
name
value
show
identifier
}
}
skus {
skuId
}
}
}
`;
```
The product ID should be configurable via the `VITE_GEINS_PRODUCT_ID` environment variable.
* Implement a "Buy Now" button that adds the product to the Geins cart and redirects the user to the Geins checkout.
* Generate a checkout token using `geinsOMS.createCheckoutToken`.
* Use `window.location.assign(checkoutUrl)` for redirection after generating the checkout token.
6. **Environment Variables:**
* Configure the Geins API key, account name, channel, TLD, locale, market, and environment using environment variables (e.g., `VITE_GEINS_API_KEY`, `VITE_GEINS_ACCOUNT_NAME`, etc.).
* Define the product image URL using the `VITE_GEINS_IMAGE_URL` environment variable.
* Define the checkout title and logo URL using the `VITE_CHECKOUT_TITLE` and `VITE_CHECKOUT_LOGO` environment variables, respectively. The logo URL should be a direct link to the image.
7. **Data Handling:**
* Sanitize HTML content from product name, texts, and parameter values using the `stripHtml` utility function to prevent XSS vulnerabilities.
8. **Error Handling:**
* Display user-friendly error messages using the `sonner` library for toast notifications.
* Implement loading states to indicate when data is being fetched or processed.
9. **Product Display:**
* Showcase the product name, brand, price, and a brief description.
* Include a product gallery with multiple images. The images should use the `VITE_GEINS_IMAGE_URL` to construct the image URLs.
* Display product specifications and key features in a structured format.
10. **Styling:**
* Use Tailwind CSS for styling.
* Ensure the page is responsive and visually appealing on different screen sizes.
* Implement a dark mode toggle using `next-themes`.
11. **Logo URL:**
* In `src/App.tsx`, the `checkoutTokenOptions` should use the `VITE_CHECKOUT_LOGO` environment variable directly as the logo URL, without prepending `window.location.origin`.
## Code Structure:
* Use a modular file structure with components organized in the `src/components` directory.
* Implement Geins API interactions in `src/lib/geins.ts`.
* Define GraphQL queries in `src/lib/queries.ts`.
* Create utility functions in `src/lib/utils.ts`.
* Configure the Vite build process in `vite.config.ts`.
Ensure the generated code adheres to best practices for React development, including proper state management, component composition, and error handling. The final result should be a polished and functional e-commerce landing page ready for deployment.
## Geins SDK Specifics
To redirect user to the external checkout the product needs to be added to a cart in Geins:
**Required packages:**
- @geins/core
- @geins/oms
**Documentation:**
- Adding items to cart: http://sdk.geins.dev/packages/oms/cart/items.html#adding-items
- Generate checkout token: https://sdk.geins.dev/guide/examples/generate-checkout-token.html
**Geins settings:**
The settings are passed to GeinsCore like this:
```typescript
import { GeinsCore } from '@geins/core';
const geinsSettings = {
apiKey: 'your-api-key',
accountName: 'your-account-name',
channel: 'your-channel-id',
tld: 'your-tld',
locale: 'your-locale',
market: 'your-market',
};
const geinsCore = new GeinsCore(geinsSettings);
```
To use the Geins OMS package, you need to import it and create an instance of GeinsOMS with the geinsCore instance:
```typescript
import { GeinsCore } from '@geins/core';
import { GeinsOMS } from '@geins/oms';
const geinsCore = new GeinsCore(geinsSettings);
const geinsOMS = new GeinsOMS(geinsCore);
await geinsOMS.cart.items.add({ skuId: SKU_FROM_PRODUCT_DATA });
```
**This is how you send a user to the external checkout:**
```typescript
// Add item to cart using GeinsOMS
const cart = await geinsOMS.cart.items.add({
skuId: product.skus[0].skuId
});
// Setup checkout token options
const checkoutTokenOptions = {
cartId: cart.id,
selectedPaymentMethodId: 23,
selectedShippingMethodId: 1,
branding: {
title: import.meta.env.VITE_CHECKOUT_TITLE,
logo: import.meta.env.VITE_CHECKOUT_LOGO,
styles: {
logoSize: '2.5rem',
radius: '5px',
accent: '#646cff',
accentForeground: '#ffffff',
},
},
};
// Generate checkout token
const token = await geinsOMS.createCheckoutToken(checkoutTokenOptions);
// Compile URL for external checkout
const redirectUrl = `${import.meta.env.VITE_CHECKOUT_URL}/${token}`;
```
## Environment Variables
Add these to your `.env` file:
```env
VITE_GEINS_API_KEY=your-api-key
VITE_GEINS_ACCOUNT_NAME=your-account-name
VITE_GEINS_CHANNEL=your-channel-id
VITE_GEINS_TLD=your-tld
VITE_GEINS_LOCALE=your-locale
VITE_GEINS_MARKET=your-market
VITE_GEINS_ENVIRONMENT=production
VITE_GEINS_PRODUCT_ID=your-product-id
VITE_GEINS_IMAGE_URL=your-image-base-url
VITE_CHECKOUT_TITLE=Your Store Name
VITE_CHECKOUT_LOGO=your-logo-url
VITE_CHECKOUT_URL=your-checkout-url
```
**Important:** Add this file at the end of project creation and ask me for the values.
## Super Important
Make sure `@geins/core` and `@geins/oms` are in package.json and installed:
```bash
npm install @geins/core @geins/oms
```
**Creating Geins Clients:**
```typescript
// Geins Core Client
const geinsCore = new GeinsCore(geinsSettings);
```
Reference: https://sdk.geins.dev/packages/core/
```typescript
// Geins OMS Client
const geinsOMS = new GeinsOMS(geinsCore);
```
Reference: https://sdk.geins.dev/packages/oms/
**Using the GraphQL client:**
```typescript
const variables = {
productId: Number(import.meta.env.VITE_GEINS_PRODUCT_ID)
};
const data = await geinsCore.graphql.query({
query: PRODUCT_QUERY,
variables,
});
```
**IMPORTANT:** Don't destructure the return value like this:
```typescript
// ❌ This will throw an error
const { data } = await geinsCore.graphql.query({
query: PRODUCT_QUERY,
variables,
});
```
The return of data is not destructible, it will throw an error.
Reference: https://sdk.geins.dev/packages/core/graphql-client.html
```
Generate a fully-featured e-commerce landing page using React, TypeScript, and Tailwind CSS. The page should showcase a single product fetched from the Geins API and allow users to purchase the product via a Geins-powered checkout.
## Specifications:
- Image gallery showing different images of the product
- Specification section that is well-structured and easy to read and always visible
- Price and a USP
- A clear Call to Action button that will send user to an external checkout page
- Call to action button should be close to the price and USP, and should be sticky on larger screens
## Special Instructions:
### 1. Design Aesthetic
The landing page should have a beautiful, unique, and production-ready design. Avoid cookie-cutter templates.
### 2. UI Library
Utilize the `shadcn/ui` library for UI components. Do not install other UI theme packages unless explicitly requested.
### 3. Iconography
Use icons from `lucide-react` for visual elements, including logos.
### 4. Images
Use stock photos from Unsplash where appropriate, ensuring the URLs are valid and reliable.
### 5. Environment Variable Handling
- Configure environment variables with fallback values to ensure the application works even if .env files aren't loaded properly
- Use the || operator pattern: `import.meta.env.VAR_NAME || 'fallback-value'`
- All fallback values should match the production values provided in the .env file
### 6. Geins Integration
#### Critical Implementation Notes:
- Use the `@geins/core` and `@geins/oms` packages for interacting with the Geins API, version 0.5.
- **CRITICAL**: When using geinsCore.graphql.query(), do NOT destructure the response. Use `const data = await geinsCore.graphql.query(...)` instead of `const { data } = await geinsCore.graphql.query(...)`
- Initialize Geins clients lazily using a singleton pattern to avoid initialization errors
- Always validate required environment variables before initializing GeinsCore
#### Cart Handling (IMPORTANT FIX):
When implementing the cart functionality, ensure proper cart creation and management:
1. **Always ensure a cart exists before adding items**:
```typescript
// First, get or create a cart
let cartId: string;
try {
const existingCart = await oms.cart.get();
if (existingCart && existingCart.id) {
cartId = existingCart.id;
} else {
const newCart = await oms.cart.create();
if (!newCart || !newCart.id) {
throw new Error('Failed to create new cart');
}
cartId = newCart.id;
}
} catch (cartError) {
throw new Error('Failed to initialize cart. Please try again.');
}
```
2. **Handle cart ID properly after adding items**:
```typescript
const updatedCart = await oms.cart.items.add({
skuId: skuId,
quantity: 1,
});
// Use the cart ID from the updated cart or fall back to the original cart ID
const finalCartId = updatedCart?.id || cartId;
```
3. **Add comprehensive error handling and logging** for debugging cart issues.
#### Product Data Fetching:
Fetch product data using the following GraphQL query:
```typescript
import { gql } from '@geins/core';
export const PRODUCT_QUERY = gql`
query product($productId: Int!, $channelId: String, $languageId: String, $marketId: String) {
product(productId: $productId, channelId: $channelId, languageId: $languageId, marketId: $marketId) {
name
brand {
name
}
productImages {
fileName
}
primaryCategory {
name
}
categories {
name
}
unitPrice {
sellingPriceIncVatFormatted
}
texts {
text1
}
parameterGroups {
name
parameterGroupId
parameters {
name
value
show
identifier
}
}
skus {
skuId
}
}
}
`;
```
The product ID should be configurable via the `GEINS_PRODUCT_ID` environment variable.
#### Checkout Implementation:
- Implement a "Buy Now" button that adds the product to the Geins cart and redirects the user to the Geins checkout.
- Generate a checkout token using `geinsOMS.createCheckoutToken`.
- Use `window.location.assign(checkoutUrl)` for redirection after generating the checkout token.
### 7. Environment Variables
Configure the Geins API key, account name, channel, TLD, locale, market, and environment using environment variables:
```env
GEINS_API_KEY=your-api-key
GEINS_ACCOUNT_NAME=your-account-name
GEINS_CHANNEL=your-channel-id
GEINS_TLD=your-tld
GEINS_LOCALE=your-locale
GEINS_MARKET=your-market
GEINS_ENVIRONMENT=production
GEINS_PRODUCT_ID=your-product-id
GEINS_IMAGE_URL=your-image-base-url
CHECKOUT_TITLE=Your Store Name
CHECKOUT_LOGO=your-logo-url
CHECKOUT_URL=your-checkout-url
```
### 8. Error Handling
- Implement comprehensive error handling for API failures, network issues, and configuration problems
- Create user-friendly error messages that distinguish between configuration errors and runtime errors
- Include retry mechanisms and loading states for all async operations
- Display user-friendly error messages using the `sonner` library for toast notifications
- Implement loading states to indicate when data is being fetched or processed
- If using a toast component to show backend exceptions, also include a `console.error` log statement in the catch block
### 9. Data Handling
Sanitize HTML content from product name, texts, and parameter values using the `stripHtml` utility function to prevent XSS vulnerabilities.
### 10. State Management
- Use React Query (@tanstack/react-query) for server state management with proper error boundaries
- Implement loading states for all async operations
- Use local state for UI interactions (image gallery, theme toggle, etc.)
### 11. Product Display
- Showcase the product name, brand, price, and a brief description
- Include a product gallery with multiple images using the `GEINS_IMAGE_URL` to construct image URLs
- Display product specifications and key features in a structured format
### 12. Styling and UX
- Use Tailwind CSS for styling
- Ensure the page is responsive and visually appealing on different screen sizes
- Implement a dark mode toggle using a custom theme provider
- Implement sticky positioning for the buy button on larger screens
- Use proper aspect ratios for product images (aspect-square)
- Include hover effects and smooth transitions
- Add proper loading skeletons and error states
- Use subtle animations for transitions and interactions, and responsive design for all screen sizes
- Ensure consistent spacing and alignment patterns
- Include subtle accent colors using Tailwind CSS's standard color palette
- ALWAYS use Tailwind v4 syntax
### 13. Logo URL
In the checkout token options, use the `CHECKOUT_LOGO` environment variable directly as the logo URL, without prepending `window.location.origin`.
### 14. File Structure
Use a modular file structure with components organized in the `frontend/components` directory:
- Create separate components for each major UI section (ProductGallery, ProductInfo, ProductSpecs, BuyButton, etc.)
- Implement Geins API interactions in `frontend/lib/geins.ts`
- Define GraphQL queries in `frontend/lib/queries.ts`
- Create utility functions in `frontend/lib/utils.ts` (including HTML sanitization)
- Use TypeScript interfaces in a dedicated `frontend/lib/types.ts` file
- Implement a `frontend/config.ts` file for centralized configuration management
### 15. Security and Performance
- Sanitize all HTML content from API responses using stripHtml utility
- Validate all user inputs and API responses
- Use proper TypeScript typing to prevent runtime errors
- Implement lazy loading for images
- Use proper image optimization and caching
- Minimize bundle size by using dynamic imports where appropriate
- Implement proper loading states to improve perceived performance
## Code Structure Requirements:
- Use a modular file structure with components organized in the `frontend/components` directory
- Keep files as small as possible by extracting related functionalities into separate modules
- Use imports to connect these modules together effectively
- Never use `require()`. Always use `import` statements
- Ensure code is clean, readable, and maintainable
- Adhere to proper naming conventions and consistent formatting
## Geins SDK Implementation Details
### Required Packages:
```bash
npm install @geins/core @geins/oms
```
### Geins Settings Configuration:
```typescript
import { GeinsCore } from '@geins/core';
const geinsSettings = {
apiKey: 'your-api-key',
accountName: 'your-account-name',
channel: 'your-channel-id',
tld: 'your-tld',
locale: 'your-locale',
market: 'your-market',
environment: 'production', // or 'staging', 'development'
loglevel: 'info', // or 'debug', 'warn', 'error'
};
const geinsCore = new GeinsCore(geinsSettings);
```
### Cart Management:
```typescript
import { GeinsCore } from '@geins/core';
import { GeinsOMS } from '@geins/oms';
const geinsCore = new GeinsCore(geinsSettings);
const geinsOMS = new GeinsOMS(geinsCore);
// Ensure cart exists before adding items
const cart = await geinsOMS.cart.get() || await geinsOMS.cart.create();
await geinsOMS.cart.items.add({ skuId: SKU_FROM_PRODUCT_DATA, quantity: 1 });
```
### Checkout Process:
```typescript
// Setup checkout token options
const checkoutTokenOptions = {
cartId: cart.id,
selectedPaymentMethodId: 23,
selectedShippingMethodId: 1,
branding: {
title: import.meta.env.CHECKOUT_TITLE,
logo: import.meta.env.CHECKOUT_LOGO,
styles: {
logoSize: '2.5rem',
radius: '5px',
accent: '#646cff',
accentForeground: '#ffffff',
},
},
};
// Generate checkout token
const token = await geinsOMS.createCheckoutToken(checkoutTokenOptions);
// Compile URL for external checkout
const redirectUrl = `${import.meta.env.CHECKOUT_URL}/${token}`;
```
### GraphQL Usage:
```typescript
const variables = {
productId: Number(import.meta.env.GEINS_PRODUCT_ID)
};
// IMPORTANT: Do NOT destructure the response
const data = await geinsCore.graphql.query({
query: PRODUCT_QUERY,
variables,
});
```
## Environment Variables File:
Create a .env file with these exact variables:
```env
GEINS_API_KEY=your-api-key
GEINS_ACCOUNT_NAME=your-account-name
GEINS_CHANNEL=your-channel-id
GEINS_TLD=your-tld
GEINS_LOCALE=your-locale
GEINS_MARKET=your-market
GEINS_ENVIRONMENT=production
GEINS_PRODUCT_ID=your-product-id
GEINS_IMAGE_URL=your-image-base-url
CHECKOUT_TITLE=Your Store Name
CHECKOUT_LOGO=your-logo-url
CHECKOUT_URL=your-checkout-url
```
Ask me for the values and add them to the .env file.
Ensure the generated code adheres to best practices for React development, including proper state management, component composition, and error handling. The final result should be a polished and functional e-commerce landing page ready for deployment.
Start vibing on new ideas today
From micro‑sites to seasonal drops, Geins lets you test, learn and scale—without slowing your main roadmap.