Merge version_3 into main #3
268
src/app/admin/page.tsx
Normal file
268
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Copy, Key, Users, Zap } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||
|
||||
const handleCopyKey = (keyValue: string) => {
|
||||
navigator.clipboard.writeText(keyValue);
|
||||
setCopiedKey(keyValue);
|
||||
setTimeout(() => setCopiedKey(null), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "API Keys", id: "api-keys" },
|
||||
{ name: "Users", id: "users" },
|
||||
{ name: "Credits", id: "credits" }
|
||||
]}
|
||||
button={{ text: "Logout", href: "#" }}
|
||||
brandName="ClipForge Admin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard" data-section="dashboard" className="pt-12">
|
||||
<MetricCardTen
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "API Key Management", subtitle: "Create, revoke, and manage API keys for integrations", category: "Administration", value: "12 Active", buttons: [{ text: "Manage Keys", href: "#api-keys" }]
|
||||
},
|
||||
{
|
||||
id: "2", title: "User Management", subtitle: "View, edit, suspend, or delete user accounts", category: "Administration", value: "1,247 Users", buttons: [{ text: "Manage Users", href: "#users" }]
|
||||
},
|
||||
{
|
||||
id: "3", title: "Credit Administration", subtitle: "Allocate, adjust, and monitor user credits and quotas", category: "Administration", value: "2.4M Credits", buttons: [{ text: "Manage Credits", href: "#credits" }]
|
||||
},
|
||||
{
|
||||
id: "4", title: "System Status", subtitle: "Monitor API health, processing queues, and infrastructure", category: "Monitoring", value: "All Green", buttons: [{ text: "View Status", href: "#" }]
|
||||
}
|
||||
]}
|
||||
title="Admin Dashboard"
|
||||
description="Centralized control panel for API keys, user management, and credit administration"
|
||||
tag="Administration"
|
||||
tagIcon={Zap}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="api-keys" data-section="api-keys" className="py-12">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold mb-2 flex items-center gap-2">
|
||||
<Key className="w-8 h-8" />
|
||||
API Key Management
|
||||
</h2>
|
||||
<p className="text-gray-600">Create and manage API keys for secure integrations with ClipForge AI services.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Active API Keys</h3>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ name: "Production API Key", key: "sk_live_xyz123abc456def789ghi", created: "Jan 15, 2025", lastUsed: "2 minutes ago" },
|
||||
{ name: "Development API Key", key: "sk_test_dev123abc456def789", created: "Jan 10, 2025", lastUsed: "1 hour ago" },
|
||||
{ name: "Integration Testing", key: "sk_test_int456def789ghi123", created: "Jan 5, 2025", lastUsed: "Yesterday" }
|
||||
].map((apiKey, idx) => (
|
||||
<div key={idx} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{apiKey.name}</p>
|
||||
<p className="text-sm text-gray-500">Created: {apiKey.created}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyKey(apiKey.key)}
|
||||
className="flex items-center gap-1 px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
{copiedKey === apiKey.key ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
<p className="font-mono text-sm text-gray-700 mb-2 truncate">{apiKey.key}</p>
|
||||
<p className="text-xs text-gray-500">Last used: {apiKey.lastUsed}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full px-4 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
Create New API Key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="users" data-section="users" className="py-12">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold mb-2 flex items-center gap-2">
|
||||
<Users className="w-8 h-8" />
|
||||
User Management
|
||||
</h2>
|
||||
<p className="text-gray-600">Manage user accounts, permissions, and subscription status across the platform.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left font-semibold text-gray-700">Username</th>
|
||||
<th className="px-6 py-3 text-left font-semibold text-gray-700">Email</th>
|
||||
<th className="px-6 py-3 text-left font-semibold text-gray-700">Plan</th>
|
||||
<th className="px-6 py-3 text-left font-semibold text-gray-700">Status</th>
|
||||
<th className="px-6 py-3 text-left font-semibold text-gray-700">Joined</th>
|
||||
<th className="px-6 py-3 text-center font-semibold text-gray-700">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{[
|
||||
{ username: "Alex Chen", email: "alex@example.com", plan: "Pro", status: "Active", joined: "Jan 10, 2025" },
|
||||
{ username: "Jessica Martinez", email: "jessica@example.com", plan: "Creator", status: "Active", joined: "Jan 5, 2025" },
|
||||
{ username: "David Kumar", email: "david@example.com", plan: "Pro", status: "Active", joined: "Dec 28, 2024" },
|
||||
{ username: "Sophie Leclerc", email: "sophie@example.com", plan: "Starter", status: "Active", joined: "Dec 15, 2024" },
|
||||
{ username: "Marcus Johnson", email: "marcus@example.com", plan: "Creator", status: "Suspended", joined: "Dec 1, 2024" }
|
||||
].map((user, idx) => (
|
||||
<tr key={idx} className="hover:bg-gray-50 transition">
|
||||
<td className="px-6 py-3 font-medium text-gray-900">{user.username}</td>
|
||||
<td className="px-6 py-3 text-gray-600">{user.email}</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs font-medium">
|
||||
{user.plan}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
user.status === "Active"
|
||||
? "bg-green-50 text-green-700"
|
||||
: "bg-red-50 text-red-700"
|
||||
}`}>
|
||||
{user.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-gray-600 text-xs">{user.joined}</td>
|
||||
<td className="px-6 py-3 text-center">
|
||||
<button className="text-blue-600 hover:text-blue-700 font-medium text-xs mr-3">Edit</button>
|
||||
<button className="text-red-600 hover:text-red-700 font-medium text-xs">Suspend</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="credits" data-section="credits" className="py-12">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold mb-2 flex items-center gap-2">
|
||||
<Zap className="w-8 h-8" />
|
||||
Credit Administration
|
||||
</h2>
|
||||
<p className="text-gray-600">Monitor, allocate, and adjust credits for users across all plans.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h3 className="font-semibold text-gray-700 mb-2">Total Credits Issued</h3>
|
||||
<p className="text-3xl font-bold text-blue-600">2,400,000</p>
|
||||
<p className="text-sm text-gray-600 mt-1">Across all active users</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h3 className="font-semibold text-gray-700 mb-2">Credits Consumed</h3>
|
||||
<p className="text-3xl font-bold text-green-600">1,847,320</p>
|
||||
<p className="text-sm text-gray-600 mt-1">77% utilization rate</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Adjust User Credits</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Select User</label>
|
||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Alex Chen (alex@example.com)</option>
|
||||
<option>Jessica Martinez (jessica@example.com)</option>
|
||||
<option>David Kumar (david@example.com)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Current Credits</label>
|
||||
<input type="text" value="50,000" disabled className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Adjustment Amount</label>
|
||||
<input type="number" placeholder="Enter amount" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Reason for Adjustment</label>
|
||||
<textarea placeholder="e.g., Promotional offer, refund, correction" rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
</div>
|
||||
<button className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
Adjust Credits
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "#dashboard" },
|
||||
{ label: "API Keys", href: "#api-keys" },
|
||||
{ label: "Users", href: "#users" },
|
||||
{ label: "Credits", href: "#credits" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Reference", href: "#" },
|
||||
{ label: "Status Page", href: "#" },
|
||||
{ label: "Contact Support", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Settings", items: [
|
||||
{ label: "Admin Profile", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Audit Logs", href: "#" },
|
||||
{ label: "Logout", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 ClipForge AI Admin Panel. All rights reserved."
|
||||
bottomRightText="Secure Administration Dashboard"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
257
src/app/dashboard/page.tsx
Normal file
257
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { CreditCard, LogOut, Settings, RotateCcw, AlertCircle } from 'lucide-react';
|
||||
|
||||
interface UserCredits {
|
||||
current: number;
|
||||
limit: number;
|
||||
monthlyResetDate: string;
|
||||
isLocked: boolean;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [userCredits, setUserCredits] = useState<UserCredits>({
|
||||
current: 45,
|
||||
limit: 100,
|
||||
monthlyResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
|
||||
isLocked: false
|
||||
});
|
||||
|
||||
const [generatedClips, setGeneratedClips] = useState<Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
creditsUsed: number;
|
||||
}>([
|
||||
{ id: "1", title: "Morning Motivation Clip", date: "2025-01-15", creditsUsed: 10 },
|
||||
{ id: "2", title: "Tutorial Series Part 1", date: "2025-01-14", creditsUsed: 8 },
|
||||
{ id: "3", title: "Behind-the-Scenes", date: "2025-01-13", creditsUsed: 12 }
|
||||
]);
|
||||
|
||||
const percentageUsed = (userCredits.current / userCredits.limit) * 100;
|
||||
const daysUntilReset = Math.ceil(
|
||||
(new Date(userCredits.monthlyResetDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (userCredits.current >= userCredits.limit) {
|
||||
setUserCredits(prev => ({ ...prev, isLocked: true }));
|
||||
}
|
||||
}, [userCredits.current, userCredits.limit]);
|
||||
|
||||
const handleGenerateClip = () => {
|
||||
if (userCredits.isLocked) {
|
||||
alert("Generation locked: Monthly credit limit reached. Credits reset in " + daysUntilReset + " days.");
|
||||
return;
|
||||
}
|
||||
alert("Generate clip feature would open here. Costs 10 credits.");
|
||||
};
|
||||
|
||||
const handleResetCredits = () => {
|
||||
setUserCredits(prev => ({
|
||||
...prev,
|
||||
current: 0,
|
||||
isLocked: false,
|
||||
monthlyResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString()
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Back to Home", id: "/" }
|
||||
]}
|
||||
button={{ text: "Logout", href: "#" }}
|
||||
brandName="ClipForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 md:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 mb-2">User Dashboard</h1>
|
||||
<p className="text-lg text-slate-600">Manage your video credits and track usage</p>
|
||||
</div>
|
||||
|
||||
{/* Credit Tracking Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||
{/* Current Credits Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-slate-100">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-slate-900">Current Credits</h2>
|
||||
<CreditCard className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div className="text-5xl font-extrabold text-blue-600 mb-2">{userCredits.current}</div>
|
||||
<p className="text-slate-600 text-sm">of {userCredits.limit} monthly limit</p>
|
||||
<div className="mt-4 w-full bg-slate-200 rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${
|
||||
percentageUsed >= 100 ? 'bg-red-600' : percentageUsed >= 80 ? 'bg-yellow-500' : 'bg-green-500'
|
||||
}`}
|
||||
style={{ width: `${Math.min(percentageUsed, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-2">{percentageUsed.toFixed(1)}% used</p>
|
||||
</div>
|
||||
|
||||
{/* Status Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-slate-100">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-slate-900">Generation Status</h2>
|
||||
{userCredits.isLocked ? (
|
||||
<AlertCircle className="w-6 h-6 text-red-600" />
|
||||
) : (
|
||||
<RotateCcw className="w-6 h-6 text-green-600" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`text-2xl font-extrabold mb-2 ${
|
||||
userCredits.isLocked ? 'text-red-600' : 'text-green-600'
|
||||
}`}
|
||||
>
|
||||
{userCredits.isLocked ? 'LOCKED' : 'ACTIVE'}
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm">
|
||||
{userCredits.isLocked
|
||||
? 'Monthly limit reached. Generation disabled.'
|
||||
: 'Ready to generate clips'}
|
||||
</p>
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<p className="text-xs font-medium text-blue-900">
|
||||
Next reset in <span className="font-extrabold">{daysUntilReset}</span> days
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Monthly Reset Card */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-slate-100">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-slate-900">Reset Schedule</h2>
|
||||
<Settings className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<p className="text-slate-900 font-semibold mb-2">
|
||||
{new Date(userCredits.monthlyResetDate).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
<p className="text-slate-600 text-sm mb-4">Your credits will reset on this date</p>
|
||||
<button
|
||||
onClick={handleResetCredits}
|
||||
className="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 rounded-lg transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Force Reset (Admin)
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Generation Control */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-slate-100 mb-12">
|
||||
<h2 className="text-2xl font-extrabold text-slate-900 mb-6">Generate New Clip</h2>
|
||||
<button
|
||||
onClick={handleGenerateClip}
|
||||
disabled={userCredits.isLocked}
|
||||
className={`px-8 py-4 rounded-lg font-semibold transition-all ${
|
||||
userCredits.isLocked
|
||||
? 'bg-gray-400 text-gray-600 cursor-not-allowed opacity-50'
|
||||
: 'bg-blue-600 hover:bg-blue-700 text-white cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
{userCredits.isLocked ? 'Generation Locked - Limit Reached' : 'Start New Generation (10 credits)'}
|
||||
</button>
|
||||
{userCredits.isLocked && (
|
||||
<div className="mt-4 p-4 bg-red-50 border border-red-300 rounded-lg">
|
||||
<p className="text-red-900 font-semibold flex items-center gap-2">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
Your monthly credit limit has been reached. Generation is locked until the next reset.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Recent Clips */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-slate-100">
|
||||
<h2 className="text-2xl font-extrabold text-slate-900 mb-6">Recent Clips</h2>
|
||||
<div className="space-y-4">
|
||||
{generatedClips.map((clip) => (
|
||||
<div
|
||||
key={clip.id}
|
||||
className="flex items-center justify-between p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900">{clip.title}</h3>
|
||||
<p className="text-sm text-slate-600">{clip.date}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-slate-900">Credits Used</p>
|
||||
<p className="text-lg font-extrabold text-blue-600">{clip.creditsUsed}</p>
|
||||
</div>
|
||||
<button className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors font-medium">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mt-12">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/" },
|
||||
{ label: "How It Works", href: "/" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "Status", href: "#" },
|
||||
{ label: "Documentation", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 ClipForge AI. All rights reserved."
|
||||
bottomRightText="Dashboard • Credits • Account"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,8 @@ import "./globals.css";
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ClipForge AI", description: "Transform long-form videos into viral short clips instantly"};
|
||||
title: "ClipForge AI", description: "Transform long-form videos into viral short clips instantly"
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
|
||||
205
src/app/login/page.tsx
Normal file
205
src/app/login/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import Input from '@/components/form/Input';
|
||||
import { Eye, EyeOff } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [session, setSession] = useState<{ email: string; token: string } | null>(null);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate authentication
|
||||
if (!email || !password) {
|
||||
throw new Error("Please fill in all fields");
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Create mock session
|
||||
const mockToken = btoa(`${email}:${Date.now()}`);
|
||||
const userSession = { email, token: mockToken };
|
||||
|
||||
// Store session in localStorage
|
||||
localStorage.setItem("userSession", JSON.stringify(userSession));
|
||||
setSession(userSession);
|
||||
|
||||
// Redirect to dashboard
|
||||
window.location.href = "/dashboard";
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Login failed. Please try again.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "How It Works", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" }
|
||||
]}
|
||||
button={{ text: "Start Free", href: "/signup" }}
|
||||
brandName="ClipForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-2xl shadow-lg p-8 border border-border">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">Welcome Back</h1>
|
||||
<p className="text-foreground/60 mb-8">Sign in to your ClipForge AI account</p>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-600 rounded-lg p-3 mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session && (
|
||||
<div className="bg-green-500/10 border border-green-500/20 text-green-600 rounded-lg p-3 mb-6">
|
||||
Successfully logged in as {session.email}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChange={setPassword}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/60 hover:text-foreground transition-colors"
|
||||
aria-label={showPassword ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff size={20} />
|
||||
) : (
|
||||
<Eye size={20} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? "Signing in..." : "Sign In"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-foreground/60">
|
||||
Don't have an account?{" "}
|
||||
<a href="/signup" className="text-primary-cta hover:text-primary-cta/90 font-semibold">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center text-xs text-foreground/50">
|
||||
<a href="#" className="hover:text-foreground/70">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "How It Works", href: "#about" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Hub", href: "#" },
|
||||
{ label: "Case Studies", href: "#" },
|
||||
{ label: "Templates", href: "#" },
|
||||
{ label: "Support", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 ClipForge AI. All rights reserved."
|
||||
bottomRightText="Made for creators, by creators"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
134
src/app/pricing/page.tsx
Normal file
134
src/app/pricing/page.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { CreditCard, Sparkles, Zap } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function PricingPage() {
|
||||
const [unlockedPlan, setUnlockedPlan] = useState<string | null>(null);
|
||||
|
||||
const handlePayPalCheckout = (planId: string) => {
|
||||
// Simulate PayPal integration
|
||||
// In production, integrate with PayPal SDK
|
||||
const confirmed = window.confirm(
|
||||
`Redirect to PayPal for ${planId} plan? (Demo: Click OK to simulate payment)`
|
||||
);
|
||||
if (confirmed) {
|
||||
// Simulate successful payment
|
||||
setUnlockedPlan(planId);
|
||||
alert(`Payment successful! ${planId} plan unlocked.`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "How It Works", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
button={{ text: "Start Free", href: "/pricing" }}
|
||||
brandName="ClipForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing" style={{ paddingTop: "80px" }}>
|
||||
<PricingCardFive
|
||||
title="Choose Your Plan - Simple, Transparent Pricing"
|
||||
description="All plans include PayPal integration for secure payments. Start free, upgrade anytime. Payment required to unlock access to all clipping features."
|
||||
tag="Pricing Plans"
|
||||
tagIcon={CreditCard}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", tag: "Starter Plan", price: "$9", period: "/month", description: "Perfect for creators just starting their short-form journey.", button: {
|
||||
text: unlockedPlan === "starter" ? "✓ Unlocked" : "Subscribe with PayPal", onClick: () => handlePayPalCheckout("starter")
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"10 clips per month", "720p video quality", "Auto-captions in 5 languages", "Basic analytics dashboard", "Email support"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "creator", tag: "Creator Plan", tagIcon: Sparkles,
|
||||
price: "$29", period: "/month", description: "Designed for serious content creators scaling their presence.", button: {
|
||||
text: unlockedPlan === "creator" ? "✓ Unlocked" : "Subscribe with PayPal", onClick: () => handlePayPalCheckout("creator")
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"50 clips per month", "1080p video quality", "Auto-captions in 15 languages", "Advanced analytics & insights", "Trending effects library", "Priority support"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "pro", tag: "Pro Plan", tagIcon: Zap,
|
||||
price: "$79", period: "/month", description: "For agencies and professional creators maximizing revenue.", button: {
|
||||
text: unlockedPlan === "pro" ? "✓ Unlocked" : "Subscribe with PayPal", onClick: () => handlePayPalCheckout("pro")
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"200 clips per month", "4K video quality", "Auto-captions in 25 languages", "Premium analytics suite", "Custom branding options", "Batch processing (10 videos)", "API access", "Dedicated account manager"
|
||||
]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "How It Works", href: "#about" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Hub", href: "#" },
|
||||
{ label: "Case Studies", href: "#" },
|
||||
{ label: "Templates", href: "#" },
|
||||
{ label: "Support", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 ClipForge AI. All rights reserved."
|
||||
bottomRightText="Made for creators, by creators"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
246
src/app/signup/page.tsx
Normal file
246
src/app/signup/page.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import Input from '@/components/form/Input';
|
||||
import { Eye, EyeOff } from 'lucide-react';
|
||||
|
||||
export default function SignupPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [session, setSession] = useState<{ email: string; token: string } | null>(null);
|
||||
|
||||
const handleSignup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Validate inputs
|
||||
if (!email || !password || !confirmPassword) {
|
||||
throw new Error("Please fill in all fields");
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
throw new Error("Passwords do not match");
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
throw new Error("Password must be at least 8 characters long");
|
||||
}
|
||||
|
||||
// Simulate API call - instant signup without email verification
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Create session immediately (no email verification required)
|
||||
const mockToken = btoa(`${email}:${Date.now()}`);
|
||||
const userSession = { email, token: mockToken };
|
||||
|
||||
// Store session in localStorage
|
||||
localStorage.setItem("userSession", JSON.stringify(userSession));
|
||||
setSession(userSession);
|
||||
setSuccess(true);
|
||||
|
||||
// Redirect to dashboard after 2 seconds
|
||||
setTimeout(() => {
|
||||
window.location.href = "/dashboard";
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Signup failed. Please try again.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "How It Works", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Signup", id: "/signup" }
|
||||
]}
|
||||
button={{ text: "Start Free", href: "/signup" }}
|
||||
brandName="ClipForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-2xl shadow-lg p-8 border border-border">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">Create Your Account</h1>
|
||||
<p className="text-foreground/60 mb-8">Join ClipForge AI and start creating viral clips instantly</p>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-600 rounded-lg p-3 mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-500/10 border border-green-500/20 text-green-600 rounded-lg p-3 mb-6">
|
||||
<p className="font-semibold mb-1">Account created successfully!</p>
|
||||
<p className="text-sm">Redirecting to dashboard...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSignup} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
disabled={isLoading || success}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="At least 8 characters"
|
||||
value={password}
|
||||
onChange={setPassword}
|
||||
disabled={isLoading || success}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/60 hover:text-foreground transition-colors"
|
||||
aria-label={showPassword ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff size={20} />
|
||||
) : (
|
||||
<Eye size={20} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
placeholder="Confirm your password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
disabled={isLoading || success}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/60 hover:text-foreground transition-colors"
|
||||
aria-label={showConfirmPassword ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<EyeOff size={20} />
|
||||
) : (
|
||||
<Eye size={20} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || success}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? "Creating account..." : success ? "Redirecting..." : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-xs text-foreground/50 text-center">
|
||||
By signing up, you agree to our Terms of Service and Privacy Policy
|
||||
</p>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-foreground/60">
|
||||
Already have an account?{" "}
|
||||
<a href="/login" className="text-primary-cta hover:text-primary-cta/90 font-semibold">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "How It Works", href: "#about" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Hub", href: "#" },
|
||||
{ label: "Case Studies", href: "#" },
|
||||
{ label: "Templates", href: "#" },
|
||||
{ label: "Support", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 ClipForge AI. All rights reserved."
|
||||
bottomRightText="Made for creators, by creators"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #020617;
|
||||
--card: #0f1629;
|
||||
--foreground: #f0f4f8;
|
||||
--primary-cta: #4F46E5;
|
||||
--background: #000000;
|
||||
--card: #1a1a3e;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #00d9ff;
|
||||
--primary-cta-text: #020617;
|
||||
--secondary-cta: #22D3EE;
|
||||
--secondary-cta: #6366f1;
|
||||
--secondary-cta-text: #020617;
|
||||
--accent: #F97316;
|
||||
--background-accent: #4F46E5;
|
||||
--accent: #4f46e5;
|
||||
--background-accent: #00d9ff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user