mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 09:00:53 +02:00
init
This commit is contained in:
54
lib/defaultPlans.ts
Normal file
54
lib/defaultPlans.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { ProductPackage } from '../types';
|
||||
|
||||
export const defaultPlans: ProductPackage[] = [
|
||||
{
|
||||
id: 'start',
|
||||
name: "Landing Page",
|
||||
price: "190.000 Ft-tól",
|
||||
desc: "Ideális induló vállalkozásoknak és személyes brandeknek.",
|
||||
features: [
|
||||
"Egyoldalas Landing Page",
|
||||
"Reszponzív (mobilbarát) design",
|
||||
"Kapcsolati űrlap",
|
||||
"Alapvető SEO beállítások",
|
||||
"Social Media integráció",
|
||||
"2 hét ingyenes támogatás"
|
||||
],
|
||||
cta: "Megrendelem",
|
||||
isPopular: false
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: "Pro Web",
|
||||
price: "350.000 Ft-tól",
|
||||
desc: "A legnépszerűbb választás kis- és középvállalkozások számára.",
|
||||
features: [
|
||||
"Max 5 aloldal (Rólunk, Szolgáltatások...)",
|
||||
"Blog funkció",
|
||||
"Google Térkép integráció",
|
||||
"Bővített SEO optimalizálás",
|
||||
"Gyorsított betöltés",
|
||||
"Google Analytics bekötés",
|
||||
"1 hónap ingyenes támogatás"
|
||||
],
|
||||
isPopular: true,
|
||||
cta: "Ezt választom"
|
||||
},
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: "Enterprise",
|
||||
price: "Egyedi árazás",
|
||||
desc: "Komplex rendszerek és webáruházak nagyvállalati igényekre.",
|
||||
features: [
|
||||
"Korlátlan aloldalak",
|
||||
"Webshop funkcionalitás",
|
||||
"Bankkártyás fizetés",
|
||||
"CRM/ERP rendszer integráció",
|
||||
"Egyedi fejlesztésű funkciók",
|
||||
"Prémium support",
|
||||
"Karbantartási szerződés"
|
||||
],
|
||||
cta: "Ajánlatot kérek",
|
||||
isPopular: false
|
||||
}
|
||||
];
|
||||
296
lib/promptGenerator.ts
Normal file
296
lib/promptGenerator.ts
Normal file
@@ -0,0 +1,296 @@
|
||||
import { ProductPackage } from '../types';
|
||||
|
||||
export interface PromptResult {
|
||||
title: string;
|
||||
content: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
export const generateOrderPrompts = (order: any): PromptResult[] => {
|
||||
const pkg = order.package || 'Pro Web';
|
||||
const details = order.details || {};
|
||||
|
||||
// Helper to safely get data
|
||||
const get = (val: any, fallback = 'Not specified') => val || fallback;
|
||||
const getArr = (val: any[]) => (val && val.length > 0 ? val.join(', ') : 'None selected');
|
||||
|
||||
// Common Context for all prompts
|
||||
const commonContext = `
|
||||
PROJECT CONTEXT:
|
||||
- Client Name: ${get(details.name)}
|
||||
- Company: ${get(details.company)}
|
||||
- Business Description: ${get(details.description)}
|
||||
- Target Audience: ${get(details.targetAudience)}
|
||||
- Primary Color: ${get(details.primaryColor)}
|
||||
- Secondary Color: ${get(details.secondaryColor)}
|
||||
- Desired Style: ${getArr(details.style)}
|
||||
- Goals: ${getArr(details.goals)}
|
||||
- Domain: ${get(details.domainName, 'TBD')}
|
||||
|
||||
TECHNICAL STANDARDS:
|
||||
- Language: Hungarian (Magyar)
|
||||
- Framework: React with Next.js (App Router)
|
||||
- Styling: Tailwind CSS
|
||||
- Icons: Lucide React
|
||||
- Code Style: Clean, component-based, exportable code.
|
||||
- Backend: Supabase (if needed for features).
|
||||
`;
|
||||
|
||||
// 1. SIMPLE LANDING PAGE STRATEGY
|
||||
if (pkg === 'Landing Page' || pkg === 'Start') {
|
||||
return [{
|
||||
title: 'Landing Page Website Generator Prompt',
|
||||
tags: ['Single Page', 'Conversion', 'UI/UX'],
|
||||
content: `
|
||||
Act as a world-class Frontend Engineer and UI/UX Designer.
|
||||
Your task is to create a high-conversion, single-page Landing Website in Hungarian.
|
||||
|
||||
${commonContext}
|
||||
|
||||
INSTRUCTIONS:
|
||||
1. Create a single-file React component (or a clean component structure) for a Landing Page.
|
||||
2. Structure:
|
||||
- Hero Section: High impact, using the business description.
|
||||
- About/Introduction: Based on the client's description.
|
||||
- Services/Features: Highlight the features requested.
|
||||
- Call to Action (CTA): Strong focus on the client's goals (e.g., ${getArr(details.goals)}).
|
||||
- Contact Section: Include a functional looking form and placeholders for Phone/Email (${get(details.email)}).
|
||||
3. Design:
|
||||
- Use the primary color (${get(details.primaryColor)}) for main actions and accents.
|
||||
- Use the requested style (${getArr(details.style)}) to determine font choices and spacing.
|
||||
4. Content:
|
||||
- Write all visible text in Hungarian.
|
||||
- Use persuasive, marketing-oriented copy.
|
||||
|
||||
OUTPUT:
|
||||
Provide the full React code using Tailwind CSS.
|
||||
`
|
||||
}];
|
||||
}
|
||||
|
||||
// 2. COMPLEX SITE STRATEGY (Pro Business / Enterprise)
|
||||
const prompts: PromptResult[] = [];
|
||||
|
||||
// Prompt 1: Main Structure
|
||||
prompts.push({
|
||||
title: 'Phase 1: Core Structure & Homepage',
|
||||
tags: ['Architecture', 'Layout', 'Homepage'],
|
||||
content: `
|
||||
Act as a Senior Full-Stack Developer.
|
||||
We are building a Multi-Page Website in Hungarian using Next.js App Router and Tailwind CSS.
|
||||
|
||||
${commonContext}
|
||||
|
||||
TASK:
|
||||
Generate the core application structure and the Homepage.
|
||||
|
||||
REQUIREMENTS:
|
||||
1. **Layout & Navigation**:
|
||||
- Create a responsive Navbar including links for requested pages: ${getArr(details.content)}.
|
||||
- Create a professional Footer with company info and links.
|
||||
- Define \`app/layout.tsx\` with font setup (Inter/Roboto).
|
||||
2. **Homepage Design**:
|
||||
- Create a modern, section-based homepage reflecting the brand identity.
|
||||
- Hero Section: Engaging headline based on "${get(details.description)}".
|
||||
- Key Value Proposition sections.
|
||||
- Use the primary color (${get(details.primaryColor)}) effectively.
|
||||
3. **Routing**:
|
||||
- Setup the directory structure for Next.js App Router.
|
||||
|
||||
OUTPUT:
|
||||
- \`app/layout.tsx\`
|
||||
- \`components/Navbar.tsx\`
|
||||
- \`components/Footer.tsx\`
|
||||
- \`app/page.tsx\` (Homepage content)
|
||||
`
|
||||
});
|
||||
|
||||
// Prompt 2: Subpages
|
||||
if (details.content && details.content.length > 0) {
|
||||
prompts.push({
|
||||
title: 'Phase 2: Standard Subpages',
|
||||
tags: ['Content', 'Static Pages'],
|
||||
content: `
|
||||
Act as a Frontend Specialist.
|
||||
Continuing from the previous website structure, generate the specific subpages requested by the client.
|
||||
|
||||
${commonContext}
|
||||
|
||||
PAGES TO GENERATE:
|
||||
${getArr(details.content)}
|
||||
|
||||
INSTRUCTIONS:
|
||||
1. **Content Generation**: For each page, generate realistic Hungarian content based on the business description: "${get(details.description)}".
|
||||
2. **Design**: Ensure consistent styling with the Homepage (Tailwind CSS).
|
||||
3. **Specifics**:
|
||||
- If "Rólunk" (About): Tell the company story.
|
||||
- If "Szolgáltatások" (Services): Grid layout of offerings.
|
||||
- If "Kapcsolat" (Contact): Contact details and map placeholder.
|
||||
|
||||
OUTPUT:
|
||||
Provide the code for the page components (e.g., \`app/rolunk/page.tsx\`, \`app/szolgaltatasok/page.tsx\`).
|
||||
`
|
||||
});
|
||||
}
|
||||
|
||||
// Prompts 3+: Individual Features (One prompt per feature)
|
||||
if (details.features && details.features.length > 0) {
|
||||
details.features.forEach((feature: string, index: number) => {
|
||||
let featurePromptContent = '';
|
||||
let featureTitle = `Phase 3.${index + 1}: Feature - ${feature}`;
|
||||
let featureTags = ['Feature', 'Logic'];
|
||||
|
||||
switch (feature) {
|
||||
case 'Kapcsolatfelvételi űrlap':
|
||||
featurePromptContent = `
|
||||
TASK: Implement a fully functional **Contact Form**.
|
||||
REQUIREMENTS:
|
||||
1. Create a \`ContactForm\` component with Name, Email, Phone, Message fields.
|
||||
2. Form Validation (Zod or simple HTML5).
|
||||
3. Backend: Define a Supabase table \`messages\` to store submissions.
|
||||
4. Logic: Create a server action or API route to handle the submission to Supabase.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Időpontfoglalás rendszer':
|
||||
featurePromptContent = `
|
||||
TASK: Implement an **Appointment Booking System**.
|
||||
REQUIREMENTS:
|
||||
1. Database: Define a Supabase schema for \`appointments\` and \`available_slots\`.
|
||||
2. UI: Create a calendar or slot picker component.
|
||||
3. Logic: Allow users to select a time and book it. Handle availability checks.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Hírlevél-feliratkozás':
|
||||
featurePromptContent = `
|
||||
TASK: Implement a **Newsletter Subscription** feature.
|
||||
REQUIREMENTS:
|
||||
1. UI: A clean input field and subscribe button (Footer or dedicated section).
|
||||
2. Backend: Define a Supabase table \`subscribers\`.
|
||||
3. Logic: Handle the submission and prevent duplicate emails.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Webshop / fizetési lehetőség':
|
||||
featurePromptContent = `
|
||||
TASK: Implement core **E-commerce / Webshop** functionality.
|
||||
REQUIREMENTS:
|
||||
1. Database: Define tables for \`products\` and \`orders\`.
|
||||
2. UI: Create a Product Listing component and a Product Detail page.
|
||||
3. State: Implement a simple Cart context.
|
||||
4. Checkout: Create a basic checkout form structure (mock payment integration is fine for now, or setup Stripe logic).
|
||||
`;
|
||||
featureTags.push('E-commerce');
|
||||
break;
|
||||
|
||||
case 'Blog / hírek':
|
||||
featurePromptContent = `
|
||||
TASK: Implement a **Blog / News** section.
|
||||
REQUIREMENTS:
|
||||
1. Database: Define a \`posts\` table (title, slug, content, image, date).
|
||||
2. UI: Create a Blog Index page (grid of cards) and a Blog Post layout.
|
||||
3. Logic: Fetch data from Supabase to render posts dynamically.
|
||||
`;
|
||||
featureTags.push('CMS');
|
||||
break;
|
||||
|
||||
case 'Többnyelvűség':
|
||||
featurePromptContent = `
|
||||
TASK: Implement **Multi-language Support (i18n)**.
|
||||
REQUIREMENTS:
|
||||
1. Setup a localization strategy (e.g., using URL path prefixes /en, /hu or a context provider).
|
||||
2. Create a dictionary file for translations.
|
||||
3. Add a language switcher component to the Navbar.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Képgaléria / videógaléria':
|
||||
featurePromptContent = `
|
||||
TASK: Implement a **Media Gallery**.
|
||||
REQUIREMENTS:
|
||||
1. UI: Create a responsive masonry or grid layout for images/videos.
|
||||
2. Functionality: Implement a Lightbox (modal) view when clicking an image.
|
||||
3. Data: Define a data structure (array) for the gallery items.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Google Térkép integráció':
|
||||
featurePromptContent = `
|
||||
TASK: Implement **Google Maps Integration**.
|
||||
REQUIREMENTS:
|
||||
1. Create a \`MapComponent\`.
|
||||
2. Integrate an embed iframe or use a React Google Maps library.
|
||||
3. Place a marker at the company's location.
|
||||
`;
|
||||
break;
|
||||
|
||||
case 'Chat gomb (Messenger / WhatsApp)':
|
||||
featurePromptContent = `
|
||||
TASK: Implement a **Floating Chat Widget**.
|
||||
REQUIREMENTS:
|
||||
1. UI: A fixed button in the bottom-right corner.
|
||||
2. Interaction: On click, either open a modal or redirect to WhatsApp/Messenger API links.
|
||||
3. Styling: Make it unobtrusive but visible.
|
||||
`;
|
||||
break;
|
||||
|
||||
default:
|
||||
featurePromptContent = `
|
||||
TASK: Implement the requested feature: **${feature}**.
|
||||
REQUIREMENTS:
|
||||
1. Analyze the requirement based on the project context.
|
||||
2. Create necessary UI components.
|
||||
3. Define backend logic or database schema if data persistence is needed.
|
||||
`;
|
||||
break;
|
||||
}
|
||||
|
||||
prompts.push({
|
||||
title: featureTitle,
|
||||
tags: featureTags,
|
||||
content: `
|
||||
Act as a Full-Stack Developer.
|
||||
You are adding a specific feature to the existing Next.js + Supabase project.
|
||||
|
||||
${commonContext}
|
||||
|
||||
${featurePromptContent}
|
||||
|
||||
OUTPUT:
|
||||
- React Components
|
||||
- Supabase SQL Definitions (if applicable)
|
||||
- Integration instructions
|
||||
`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return prompts;
|
||||
};
|
||||
|
||||
export const generateDownloadContent = (order: any, prompts: PromptResult[]): string => {
|
||||
const header = `
|
||||
==============================================================================
|
||||
MOTIONWEB - AI PROMPT PACKAGE
|
||||
==============================================================================
|
||||
Order ID: ${order.displayId}
|
||||
Client: ${order.customer}
|
||||
Date: ${new Date().toLocaleDateString()}
|
||||
Package: ${order.package}
|
||||
==============================================================================
|
||||
|
||||
`;
|
||||
|
||||
const body = prompts.map((p, i) => `
|
||||
------------------------------------------------------------------------------
|
||||
PROMPT ${i + 1}: ${p.title.toUpperCase()}
|
||||
Tags: [${p.tags.join(', ')}]
|
||||
------------------------------------------------------------------------------
|
||||
|
||||
${p.content.trim()}
|
||||
|
||||
`).join('\n\n');
|
||||
|
||||
return header + body;
|
||||
};
|
||||
27
lib/supabaseClient.ts
Normal file
27
lib/supabaseClient.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
|
||||
// Configuration
|
||||
// You can switch these to import.meta.env.VITE_SUPABASE_URL if you use a .env file later.
|
||||
const supabaseUrl = 'https://fhgxhqagvjnjamsyilmh.supabase.co';
|
||||
const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZoZ3hocWFndmpuamFtc3lpbG1oIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQ3NDg2OTMsImV4cCI6MjA4MDMyNDY5M30.t4RhJlqM5f_N7PK3Qx58KhvTl9zZB6KYxLGr_gc_3Ok';
|
||||
|
||||
// Validation to ensure keys are not empty or default placeholders
|
||||
const isPlaceholder =
|
||||
!supabaseUrl ||
|
||||
!supabaseAnonKey ||
|
||||
supabaseUrl.includes('placeholder') ||
|
||||
supabaseAnonKey.includes('placeholder');
|
||||
|
||||
if (isPlaceholder) {
|
||||
console.warn(
|
||||
"Missing or invalid Supabase environment variables. Auth features will run in DEMO MODE."
|
||||
);
|
||||
}
|
||||
|
||||
// Initialize the Supabase client
|
||||
export const supabase = createClient(
|
||||
supabaseUrl || 'https://placeholder.supabase.co',
|
||||
supabaseAnonKey || 'placeholder-key'
|
||||
);
|
||||
|
||||
export const isSupabaseConfigured = !isPlaceholder;
|
||||
Reference in New Issue
Block a user