Spaces:
Running
Running
Below is a comprehensive response to your query. Based on the specific information you provided about the web app requirements (a print-on-demand SaaS platform called **LUMORA CREATIONS**, with features like AI-powered product idea generation, image visualization, admin panel, Supabase integration for storage/database, Vercel deployment, GitHub CI, and optional enhancements like v0.dev publishing), I'll act as a software developer and design a **secure architecture** using **Golang** for the backend (with Gin framework for API routing, GORM for ORM, and secure practices like JWT auth) and **Angular** for the frontend (with Angular Material for UI components, secure HTTP interceptors, and role-based guards). This design prioritizes **security**: - **Authentication**: JWT-based with role management (user/admin). - **Data Validation**: Input sanitization, rate limiting, and secure file uploads. - **API Security**: CORS, HTTPS enforcement, secrets management (e.g., via environment variables). - **Database**: Supabase for PostgreSQL and storage (secure public URLs with access policies). - **Deployment**: Vercel for frontend, but since Golang backend needs a server, I'll recommend Render or Heroku for backend hosting, with GitHub Actions for CI/CD. - **Best Practices**: Error handling, logging, and avoidance of common vulnerabilities (e.g., SQL injection via GORM, secure file handling). I'll provide: 1. **High-Level Architecture**. 2. **Backend Code** (Golang). 3. **Frontend Code** (Angular). 4. **Deployment and CI Setup**. 5. **Optional Enhancements**. This is production-ready but concise—focus on core features. You can extend it as needed. --- ## 1. High-Level Architecture - **Backend (Golang)**: RESTful API server using Gin. Handles authentication (JWT), CRUD for users/products/ideas, AI integrations (Groq/OpenAI/OpenRouter for text generation, OpenAI DALL-E for images), Supabase integration for DB/storage, and webhooks (e.g., from Printify). Secure with middleware for auth, rate limiting, and input validation. - **Frontend (Angular)**: Single-Page Application (SPA) with Angular 18+. Uses Angular Material for UI, HttpClient for API calls, guards for role-based routing (e.g., admin panel), and secure interceptors for JWT tokens. - **Database/Storage**: Supabase PostgreSQL for relational data (users, products, ideas). Supabase Storage for images (with public buckets configured for read-only access). - **Integrations**: - AI: Groq/OpenAI/OpenRouter for text ideas; OpenAI DALL-E for images. - Printify: API calls for product publishing/syncing. - Auth: JWT (using `github.com/golang-jwt/jwt/v5`). - **Security Layers**: - HTTPS only. - JWT validation on protected routes. - Rate limiting (e.g., 60 req/min for Printify API). - Input validation with `github.com/go-playground/validator/v10`. - Secrets in env vars (never hardcode). - **Deployment**: Frontend on Vercel (static export). Backend on Render (Golang server). CI/CD via GitHub Actions. **Data Flow**: 1. User logs in → JWT token issued. 2. Generate ideas → Backend calls AI API → Store in Supabase. 3. Visualize image → Backend generates via DALL-E → Upload to Supabase Storage. 4. Publish to Printify → Backend API call. 5. Admin panel → Role-guarded routes for managing users/products. --- ## 2. Backend Code (Golang) ### Project Structure ``` backend/ ├── cmd/ │ └── main.go // Entry point ├── internal/ │ ├── api/ // Gin routes and handlers │ ├── auth/ // JWT logic │ ├── models/ // GORM models │ ├── services/ // Business logic (AI, Supabase, Printify) │ └── middleware/ // Auth, rate limiting ├── go.mod └── .env // Secrets (e.g., SUPABASE_URL, JWT_SECRET) ``` ### Prerequisites - Install Golang 1.22+. - `go get github.com/gin-gonic/gin github.com/jinzhu/gorm github.com/jinzhu/gorm/dialects/postgres github.com/supabase-community/supabase-go github.com/golang-jwt/jwt/v5 github.com/go-playground/validator/v10 github.com/joho/godotenv golang.org/x/time/rate` - Set up Supabase project: Create a PostgreSQL DB and a storage bucket (`product-images`). Get URL/anon key. - Env vars: `SUPABASE_URL`, `SUPABASE_ANON_KEY`, `JWT_SECRET`, `GROQ_API_KEY`, `OPENAI_API_KEY`, `PRINTIFY_API_KEY`, `PRINTIFY_SHOP_ID`. ### Key Files #### `cmd/main.go` ```go package main import ( "log" "os" "github.com/gin-gonic/gin" "github.com/joho/godotenv" "gorm.io/driver/postgres" "gorm.io/gorm" "backend/internal/api" "backend/internal/models" ) func main() { if err := godotenv.Load(); err != nil { log.Fatal("Error loading .env file") } dsn := os.Getenv("SUPABASE_URL") // e.g., "postgres://[user]:[pass]@[host]/[db]?sslmode=disable" db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{}) if err != nil { log.Fatal("Failed to connect to Supabase:", err) } db.AutoMigrate(&models.User{}, &models.Product{}, &models.Idea{}) // Migrate models r := gin.Default() api.SetupRoutes(r, db) // Set up API routes r.Run(":8080") // Listen on port 8080 } ``` #### `internal/models/models.go` (GORM Models) ```go package models import "gorm.io/gorm" type Role string const ( UserRole Role = "USER" AdminRole Role = "ADMIN" ) type User struct { gorm.Model Email string `gorm:"unique"` Name string Avatar string Role Role `gorm:"default:USER"` } type Product struct { gorm.Model Title string Description string ImageURL string UserID uint } type Idea struct { gorm.Model Title string Description string ImageURL string GeneratedBy string } ``` #### `internal/api/routes.go` (Gin Routes with Middleware) ```go package api import ( "net/http" "github.com/gin-gonic/gin" "gorm.io/gorm" "backend/internal/auth" "backend/internal/middleware" "backend/internal/services" ) func SetupRoutes(r *gin.Engine, db *gorm.DB) { // Public routes r.POST("/login", func(c *gin.Context) { auth.LoginHandler(c, db) }) // Implement login to issue JWT // Protected routes (JWT auth) protected := r.Group("/") protected.Use(middleware.AuthMiddleware()) // JWT validation { protected.GET("/ideas", func(c *gin.Context) { services.GetIdeas(c, db) }) protected.POST("/ideas/generate", func(c *gin.Context) { services.GenerateIdeas(c, db) }) // Calls AI protected.POST("/ideas/:id/visualize", func(c *gin.Context) { services.VisualizeIdea(c, db) }) // DALL-E + Supabase upload // Admin-only routes admin := protected.Group("/admin") admin.Use(middleware.AdminMiddleware()) // Role check { admin.GET("/users", func(c *gin.Context) { services.GetUsers(c, db) }) admin.PUT("/users/:id/role", func(c *gin.Context) { services.UpdateUserRole(c, db) }) admin.GET("/products", func(c *gin.Context) { services.GetProducts(c, db) }) admin.POST("/products/sync", func(c *gin.Context) { services.SyncToPrintify(c, db) }) // Printify integration } } // Webhook endpoint (e.g., for Printify) r.POST("/webhook/printify", middleware.RateLimitMiddleware(), func(c *gin.Context) { services.HandlePrintifyWebhook(c, db) }) } ``` #### `internal/middleware/middleware.go` (Security Middleware) ```go package middleware import ( "net/http" "time" "github.com/gin-gonic/gin" "github.com/golang-jwt/jwt/v5" "golang.org/x/time/rate" "backend/internal/models" ) var limiter = rate.NewLimiter(1, 60) // 60 req/min func RateLimitMiddleware() gin.HandlerFunc { return func(c *gin.Context) { if !limiter.Allow() { c.AbortWithStatusJSON(http.StatusTooManyRequests, gin.H{"error": "Rate limit exceeded"}) return } c.Next() } } func AuthMiddleware() gin.HandlerFunc { return func(c *gin.Context) { tokenStr := c.GetHeader("Authorization") if tokenStr == "" { c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "Unauthorized"}) return } // Parse and validate JWT (implement parsing logic with jwt.Parse) // Assume claims include user ID and role c.Next() } } func AdminMiddleware() gin.HandlerFunc { return func(c *gin.Context) { // Extract role from JWT claims role := "USER" // Placeholder: get from claims if role != string(models.AdminRole) { c.AbortWithStatusJSON(http.StatusForbidden, gin.H{"error": "Admin only"}) return } c.Next() } } ``` #### `internal/services/ai.go` (AI Integrations - Example for GenerateIdeas) ```go package services import ( "bytes" "encoding/json" "net/http" "os" "github.com/gin-gonic/gin" "gorm.io/gorm" "backend/internal/models" ) type NewIdea struct { Title string `json:"title"` Description string `json:"description"` } func GenerateIdeas(c *gin.Context, db *gorm.DB) { provider := c.PostForm("provider") // e.g., "groq" model := c.PostForm("model") prompt := c.PostForm("prompt") var ideas []NewIdea switch provider { case "groq": // Call Groq API (similar to your snippet) body := map[string]interface{}{ "model": model, "messages": []map[string]string{ {"role": "system", "content": "You are an expert product idea generator..."}, {"role": "user", "content": prompt}, }, } jsonBody, _ := json.Marshal(body) req, _ := http.NewRequest("POST", "https://api.groq.com/openai/v1/chat/completions", bytes.NewBuffer(jsonBody)) req.Header.Set("Authorization", "Bearer "+os.Getenv("GROQ_API_KEY")) req.Header.Set("Content-Type", "application/json") client := &http.Client{} resp, err := client.Do(req) if err != nil { c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) return } defer resp.Body.Close() // Parse response and unmarshal to ideas case "openai": // Similar fetch for OpenAI // ... } // Save to Supabase via GORM for _, idea := range ideas { db.Create(&models.Idea{Title: idea.Title, Description: idea.Description, GeneratedBy: provider}) } c.JSON(http.StatusOK, ideas) } // Implement VisualizeIdea similarly: Call DALL-E, upload base64 to Supabase Storage, save URL. ``` #### `internal/services/supabase_storage.go` (Image Upload) ```go package services import ( "bytes" "github.com/supabase-community/supabase-go" ) func UploadImageToSupabase(base64Bytes []byte, fileName string) (string, error) { client, _ := supabase.AuthenticatedClient(os.Getenv("SUPABASE_URL"), os.Getenv("SUPABASE_ANON_KEY")) _, err := client.Storage.From("product-images").Upload(fileName, bytes.NewReader(base64Bytes), &supabase.UploadFileOptions{ContentType: "image/png"}) if err != nil { return "", err } // Get public URL url := client.Storage.From("product-images").GetPublicUrl(fileName) return url, nil } ``` Implement other services (e.g., Printify sync, webhook handling) similarly, with rate limiting and validation. --- ## 3. Frontend Code (Angular) ### Project Structure ``` frontend/ ├── src/ │ ├── app/ │ │ ├── admin/ // Admin panel components │ │ │ ├── admin.component.ts │ │ │ └── ... (users, products pages) │ │ ├── core/ │ │ │ ├── auth/ // Auth service, guards, interceptors │ │ │ └── services/ // API services │ │ ├── shared/ // Components like ImageUploader │ │ ├── app.component.ts │ │ └── app-routing.module.ts │ ├── assets/ │ └── environments/ // Env vars ├── angular.json └── package.json ``` ### Prerequisites - Angular CLI 18+. - `ng new frontend --style=css` - `ng add @angular /material` - `npm i jwt-decode @supabase/supabase-js` (for storage if needed, but most handled in backend). - Env: Set API base URL (e.g., `http://localhost:8080` for dev). ### Key Files #### `app-routing.module.ts` (Role-Based Guards) ```ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AdminGuard } from './core/auth/admin.guard'; import { AuthGuard } from './core/auth/auth.guard'; import { AdminComponent } from './admin/admin.component'; import { IdeasComponent } from './ideas/ideas.component'; // Assume this exists const routes: Routes = [ { path: 'ideas', component: IdeasComponent, canActivate: [AuthGuard] }, { path: 'admin', component: AdminComponent, canActivate: [AuthGuard, AdminGuard] }, // Admin panel { path: '', redirectTo: '/ideas', pathMatch: 'full' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` #### `core/auth/auth.guard.ts` (Auth Guard) ```ts import { Injectable } from '@angular/core'; import { CanActivate, Router } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate(): boolean { if (!this.authService.isLoggedIn()) { this.router.navigate(['/login']); return false; } return true; } } // AdminGuard: Similar, but check if role === 'ADMIN' from JWT ``` #### `core/auth/auth.service.ts` (JWT Handling) ```ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import jwtDecode from 'jwt-decode'; @Injectable({ providedIn: 'root' }) export class AuthService { constructor(private http: HttpClient) {} login(email: string, password: string) { return this.http.post<{ token: string }>('/login', { email, password }).subscribe(res => { localStorage.setItem('token', res.token); }); } isLoggedIn(): boolean { return !!localStorage.getItem('token'); } getRole(): string { const token = localStorage.getItem('token'); if (token) { const decoded: any = jwtDecode(token); return decoded.role; } return 'USER'; } } ``` #### `shared/image-uploader.component.ts` (Image Uploader - Calls Backend) ```ts import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component ({ selector: 'app-image-uploader', template: `<input type="file" (change)="onFileChange($event)">` }) export class ImageUploaderComponent { constructor(private http: HttpClient) {} onFileChange(event: any) { const file = event.target.files[0]; const formData = new FormData(); formData.append('file', file); this.http.post('/upload-image', formData).subscribe(url => console.log('Uploaded:', url)); } } ``` #### Admin Panel Example (`admin/admin.component.ts`) Use Angular Material tables for users/products. Fetch data via HTTP from backend `/admin/users`. For AI generation: Create a form that posts to `/ideas/generate`, displaying results in cards with "Visualize" buttons. --- ## 4. Deployment and CI Setup - **Backend**: Deploy to Render (free tier). Create a new Web Service, link GitHub repo, set env vars, build command: `go build -o main`, start command: `./main`. - **Frontend**: Deploy to Vercel. `ng build --prod`, push to GitHub, connect to Vercel. Add env vars for API URL. - **GitHub Actions CI** (`.github/workflows/deploy.yml`): ```yaml name: Deploy on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Go uses: actions/setup-go@v5 with: { go-version: '1.22' } - run: go mod tidy - name: Test run: go test ./... - name: Deploy Backend to Render uses: johnbeynon/render-deploy-action@v0.0.8 with: service-id: ${{ secrets.RENDER_SERVICE_ID }} api-key: ${{ secrets.RENDER_API_KEY }} - name: Deploy Frontend to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} ``` Add secrets to GitHub repo (similar to your snippet). For v0.dev: Create a public repo, add `v0.yaml` as in your requirements, and badge in README. --- ## 5. Optional Enhancements - **Customizable Prompts**: Add a textarea in Angular form, pass to backend. - **Share to Socials**: Use Angular's `window.open` for Twitter/Pinterest sharing. - **Error Feedback**: Use MatSnackBar for UI notifications. - **Analytics/Sentry**: Integrate via scripts in `index.html`. - **Stripe**: Add a payment component calling backend for sessions. This covers the requirements securely. Let me know if you need deeper code for a specific part (e.g., full Printify integration) or adjustments! 🚀// Complete Print on Demand System with Telegram Bot, Design Management, and Social Media Integration import { TelegramClient } from 'telegram'; import axios from 'axios'; import sharp from 'sharp'; class PrintOnDemandSystem { constructor(config) { this.telegramToken = config.telegramToken; this.socialTokens = config.socialTokens; this.printApiKey = config.printApiKey; this.adminUsers = config.adminUsers; this.initializeTelegramBot(); } // Main System Components async initializeTelegramBot() { const bot = new TelegramClient(this.telegramToken); bot.on('message', async (msg) => { if (msg.text.startsWith('/')) { await this.handleCommand(msg); } else { await this.handleConversation(msg); } }); console.log('Bot initialized and listening...'); } async handleCommand(msg) { const command = msg.text.split(' ')[0]; const args = msg.text.split(' ').slice(1); const commands = { '/start': () => this.sendWelcomeMessage(msg.chat.id), '/add_design': () => this.handleDesignUpload(msg, args), '/post_social': () => this.handleSocialPost(msg, args), '/check_inventory': () => this.checkInventory(msg, args), '/update_template': () => this.updateTemplate(msg, args), '/schedule_post': () => this.schedulePost(msg, args) }; if (commands[command]) { await commands[command](); } else { await this.sendMessage(msg.chat.id, 'Unknown command. Type /help for available commands.'); } } // Design Management Class class DesignManager { constructor() { this.printSizes = { tshirt: { front: { width: 12, height: 16, dpi: 300 }, back: { width: 12, height: 16, dpi: 300 }, pocket: { width: 4, height: 4, dpi: 300 } }, hoodie: { front: { width: 14, height: 16, dpi: 300 }, back: { width: 14, height: 16, dpi: 300 } }, mug: { standard: { width: 9, height: 3.75, dpi: 300 } } }; this.socialMediaSizes = { instagram: { post: { width: 1080, height: 1080 }, story: { width: 1080, height: 1920 } }, facebook: { post: { width: 1200, height: 630 }, story: { width: 1080, height: 1920 } }, twitter: { post: { width: 1200, height: 675 } } }; } async processDesign(designData) { try { const validationResult = this.validateDesign(designData); if (!validationResult.isValid) { throw new Error(validationResult.error); } const processed = { id: `design_${Date.now()}`, ...designData, metadata: await this.generateMetadata(designData), variants: await this.generateVariants(designData), socialContent: this.generateSocialContent(designData) }; return { success: true, design: processed }; } catch (error) { return { success: false, error: error.message }; } } validateDesign(design) { // Implement design validation logic // Check size, format, DPI, etc. return { isValid: true }; } async generateVariants(design) { return { print: await this.generatePrintVariants(design), social: await this.generateSocialVariants(design) }; } generateSocialContent(design) { return { instagram: this.generatePlatformContent(design, 'instagram'), facebook: this.generatePlatformContent(design, 'facebook'), twitter: this.generatePlatformContent(design, 'twitter') }; } } // Social Media Manager Class class SocialMediaManager { constructor(tokens) { this.tokens = tokens; this.platforms = ['instagram', 'facebook', 'twitter']; } async postToSocial(design, platforms = this.platforms) { const results = {}; for (const platform of platforms) { results[platform] = await this.postToPlatform(design, platform); } return results; } async postToPlatform(design, platform) { // Implement platform-specific posting logic const content = design.socialContent[platform]; const image = design.variants.social[platform].file; try { // Platform-specific API calls would go here return { success: true, platform, postId: `post_${Date.now()}` }; } catch (error) { return { success: false, platform, error: error.message }; } } } // Print Service Manager Class class PrintServiceManager { constructor(apiKey) { this.apiKey = apiKey; } async submitDesign(design) { try { const printableVariants = design.variants.print; const results = {}; for (const [product, variants] of Object.entries(printableVariants)) { results[product] = await this.submitToPrintService(variants, product); } return { success: true, results }; } catch (error) { return { success: false, error: error.message }; } } async submitToPrintService(variants, product) { // Implement print service API integration return { success: true, productId: `print_${Date.now()}` }; } } // Message Handlers async handleDesignUpload(msg, args) { const designManager = new DesignManager(); const fileId = msg.document?.file_id; if (!fileId) { return this.sendMessage(msg.chat.id, 'Please upload a design file.'); } try { const file = await this.getFile(fileId); const designData = { file: file, name: args[0] || 'Untitled Design', size: { width: parseFloat(args[1]), height: parseFloat(args[2]), dpi: parseInt(args[3]) }, format: file.name.split('.').pop(), tags: args.slice(4) }; const result = await designManager.processDesign(designData); if (result.success) { await this.sendMessage(msg.chat.id, 'Design processed successfully!'); await this.showDesignSummary(msg.chat.id, result.design); } else { await this.sendMessage(msg.chat.id, `Error processing design: ${result.error}`); } } catch (error) { await this.sendMessage(msg.chat.id, `Error: ${error.message}`); } } async handleSocialPost(msg, args) { const socialManager = new SocialMediaManager(this.socialTokens); const designId = args[0]; const platforms = args[1]?.split(',') || ['instagram', 'facebook', 'twitter']; try { const design = await this.getDesign(designId); const result = await socialManager.postToSocial(design, platforms); await this.sendMessage(msg.chat.id, 'Posts created successfully!'); await this.showPostSummary(msg.chat.id, result); } catch (error) { await this.sendMessage(msg.chat.id, `Error creating posts: ${error.message}`); } } // Utility Functions async sendMessage(chatId, text, options = {}) { try { await this.bot.sendMessage(chatId, text, options); } catch (error) { console.error('Error sending message:', error); } } async showDesignSummary(chatId, design) { const summary = ` Design Summary: Name: ${design.name} ID: ${design.id} Size: ${design.size.width}" x ${design.size.height}" (${design.size.dpi} DPI) Compatible Products: ${Object.keys(design.variants.print).join(', ')} Social Media Ready: ${Object.keys(design.variants.social).join(', ')} `; await this.sendMessage(chatId, summary); } async showPostSummary(chatId, results) { const summary = Object.entries(results) .map(([platform, result]) => `${platform}: ${result.success ? '✅' : '❌'}`) .join('\n'); await this.sendMessage(chatId, summary); } } // Usage Example const config = { telegramToken: 'YOUR_TELEGRAM_BOT_TOKEN', socialTokens: { instagram: 'INSTAGRAM_TOKEN', facebook: 'FACEBOOK_TOKEN', twitter: 'TWITTER_TOKEN' }, printApiKey: 'PRINT_SERVICE_API_KEY', adminUsers: ['admin1', 'admin2'] }; const podSystem = new PrintOnDemandSystem(config); // Command List for Reference: const commands = ` Available Commands: /start - Initialize bot and show welcome message /help - Show this help message /add_design <name> <width> <height> <dpi> [tags...] - Upload new design /post_social <designId> [platforms] - Post design to social media /check_inventory <productId> - Check product inventory /update_template <templateId> - Update existing template /schedule_post <designId> <datetime> [platforms] - Schedule social media posts `; // Example Template Model const templateModel = { id: String, name: String, size: { width: Number, height: Number, dpi: Number }, format: String, variants: { print: Object, social: Object }, metadata: { created: Date, modified: Date, tags: [String], category: String }, socialContent: { instagram: Object, facebook: Object, twitter: Object } }; - Initial Deployment
5c0691d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LUMORA CREATIONS - AI-Powered Print-on-Demand</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| accent: '#ec4899', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| min-height: 100vh; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85)), url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); | |
| color: white; | |
| font-size: 28px; | |
| margin-bottom: 20px; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .product-image { | |
| height: 250px; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .ai-generate-btn { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .ai-generate-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4), 0 4px 6px -2px rgba(99, 102, 241, 0.2); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md py-4 px-6 flex justify-between items-center sticky top-0 z-50"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold text-xl mr-3">L</div> | |
| <span class="text-2xl font-bold gradient-text">LUMORA CREATIONS</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-primary transition">Home</a> | |
| <a href="#features" class="font-medium hover:text-primary transition">Features</a> | |
| <a href="#products" class="font-medium hover:text-primary transition">Products</a> | |
| <a href="#how-it-works" class="font-medium hover:text-primary transition">How It Works</a> | |
| <a href="#testimonials" class="font-medium hover:text-primary transition">Testimonials</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">Sign In</button> | |
| <button class="bg-gradient-to-r from-primary to-secondary text-white px-6 py-2 rounded-lg font-medium hover:opacity-90 transition">Get Started</button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-20 px-6"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Transform Your Ideas Into <span class="gradient-text">Print-on-Demand</span> Reality | |
| </h1> | |
| <p class="text-xl mb-8 text-gray-200"> | |
| Leverage AI-powered design generation and seamless publishing to create unique products that stand out in the marketplace. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="ai-generate-btn text-white px-8 py-4 rounded-xl font-bold text-lg pulse"> | |
| <i class="fas fa-magic mr-2"></i> Generate AI Design | |
| </button> | |
| <button class="bg-white text-primary px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-80 h-80 bg-gradient-to-r from-primary to-secondary rounded-2xl floating"></div> | |
| <div class="absolute -top-6 -right-6 w-64 h-64 bg-white rounded-2xl shadow-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="AI Design" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 w-56 h-56 bg-white rounded-2xl shadow-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1521334884684-d80222895326?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-6 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features for Creators</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Everything you need to create, visualize, and sell unique print-on-demand products | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">AI Design Generation</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Generate unique product ideas and designs using advanced AI algorithms. Simply describe your vision and let our AI create stunning visuals. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Real-time Visualization</h3> | |
| <p class="text-gray-600 mb-4"> | |
| See your designs come to life on actual products before publishing. Preview on t-shirts, mugs, posters, and more. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Seamless Publishing</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Publish directly to major marketplaces like Etsy, Amazon, and Shopify with one click. No technical setup required. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Performance Analytics</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Track sales, revenue, and customer engagement with detailed analytics. Optimize your designs for maximum profitability. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users-cog"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Admin Dashboard</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Manage your entire print-on-demand business from one intuitive dashboard. Control products, orders, and team members. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="card-hover bg-gradient-to-br from-white to-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Secure Cloud Storage</h3> | |
| <p class="text-gray-600 mb-4"> | |
| All your designs and data stored securely in the cloud with automatic backups. Access from anywhere, anytime. | |
| </p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 px-6 bg-gradient-to-br from-gray-50 to-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How LUMORA CREATIONS Works</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Create, visualize, and sell unique products in just a few simple steps | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> | |
| 1 | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Generate Ideas</h3> | |
| <p class="text-gray-600"> | |
| Describe your concept or let our AI suggest creative ideas for your products. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-full bg-secondary flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> | |
| 2 | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Design & Customize</h3> | |
| <p class="text-gray-600"> | |
| Use our design tools or AI generation to create unique visuals for your products. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-full bg-accent flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> | |
| 3 | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Visualize Products</h3> | |
| <p class="text-gray-600"> | |
| See how your designs look on actual products before publishing. | |
| </p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6"> | |
| 4 | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Publish & Sell</h3> | |
| <p class="text-gray-600"> | |
| Publish to your favorite marketplaces and start selling instantly. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Showcase --> | |
| <section id="products" class="py-20 px-6 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Popular Products</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| See how your designs can look on our wide range of high-quality products | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Premium T-Shirt</h3> | |
| <p class="text-gray-600 mb-4">100% cotton, soft and comfortable for everyday wear</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-primary">$24.99</span> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition"> | |
| Customize | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1664&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Ceramic Mug</h3> | |
| <p class="text-gray-600 mb-4">11 oz capacity, dishwasher safe, perfect for coffee lovers</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-primary">$16.99</span> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition"> | |
| Customize | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1620714223084-8fcacc6dfd8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Canvas Poster</h3> | |
| <p class="text-gray-600 mb-4">High-quality print on premium canvas, ready to hang</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-primary">$29.99</span> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition"> | |
| Customize | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-primary text-primary px-8 py-3 rounded-lg font-bold hover:bg-primary hover:text-white transition"> | |
| View All Products | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 px-6 bg-gradient-to-br from-gray-50 to-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Creators Say</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Join thousands of successful creators who transformed their ideas into profitable products | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card p-8 rounded-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Sarah Johnson</h4> | |
| <p class="text-gray-600">Art Designer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "LUMORA CREATIONS transformed my design process. The AI suggestions helped me create products I never would have thought of, and the publishing process is incredibly smooth." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card p-8 rounded-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Michael Chen</h4> | |
| <p class="text-gray-600">Entrepreneur</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "As someone with no design skills, the AI generation feature was a game-changer. I've sold over 500 products in just two months using LUMORA CREATIONS!" | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card p-8 rounded-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Emma Rodriguez</h4> | |
| <p class="text-gray-600">Photographer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "The visualization tools are incredible. I can see exactly how my photos will look on different products before publishing. My sales have increased by 150% since using LUMORA." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-6 bg-gradient-to-r from-primary to-secondary text-white"> | |
| <div class="max-w-5xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Ideas?</h2> | |
| <p class="text-xl mb-10 max-w-2xl mx-auto"> | |
| Join thousands of creators who are already selling unique products with LUMORA CREATIONS | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="ai-generate-btn text-white px-8 py-4 rounded-xl font-bold text-lg pulse"> | |
| <i class="fas fa-rocket mr-2"></i> Start Creating Now | |
| </button> | |
| <button class="bg-white text-primary px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Schedule a Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12 px-6"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold text-xl mr-3">L</div> | |
| <span class="text-2xl font-bold">LUMORA CREATIONS</span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Transforming ideas into profitable print-on-demand products with AI-powered design generation. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Products</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">T-Shirts</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mugs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Posters</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Hoodies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Phone Cases</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Resources</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Contact Us</h3> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3"></i> | |
| <span>support@lumoracreations.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-3"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>123 Design Street, Creative City, CA 90210</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-gray-800 text-center text-gray-500"> | |
| <p>© 2023 LUMORA CREATIONS. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for AI button | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const aiButton = document.querySelector('.ai-generate-btn'); | |
| aiButton.addEventListener('click', function() { | |
| // Remove pulse animation temporarily | |
| aiButton.classList.remove('pulse'); | |
| // Add clicked effect | |
| aiButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; | |
| // Simulate AI generation process | |
| setTimeout(function() { | |
| aiButton.innerHTML = '<i class="fas fa-check mr-2"></i> Design Generated!'; | |
| aiButton.classList.add('bg-green-500'); | |
| // Reset after 2 seconds | |
| setTimeout(function() { | |
| aiButton.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate AI Design'; | |
| aiButton.classList.remove('bg-green-500'); | |
| aiButton.classList.add('pulse'); | |
| }, 2000); | |
| }, 2000); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Humbl3m33/lumora-creations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |