You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
14 KiB
341 lines
14 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import UploadArea from "@/components/UploadArea";
|
|
import { useAuth } from "@/lib/auth-context";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuList,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
} from "@/components/ui/navigation-menu";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ChevronDownIcon } from "lucide-react";
|
|
|
|
export default function Home() {
|
|
const { isAuthenticated, user, logout } = useAuth();
|
|
|
|
// Get user initials for the circle icon
|
|
const getUserInitials = () => {
|
|
if (!user) return "U";
|
|
const firstName = user.FirstName || "";
|
|
const lastName = user.LastName || "";
|
|
return (firstName.charAt(0) + lastName.charAt(0)).toUpperCase() || "U";
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen" style={{ backgroundColor: "#FFFFFF" }}>
|
|
{/* Sticky Navigation */}
|
|
<nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<Image src="/reya2.svg" alt="Reya Logo" width={120} height={40} />
|
|
</div>
|
|
|
|
{/* Navigation Menu */}
|
|
<NavigationMenu className="hidden md:flex">
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuLink
|
|
href="/contact"
|
|
className="px-4 py-2 text-gray-700 hover:text-gray-900"
|
|
>
|
|
Contact
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuLink
|
|
href="/pricing"
|
|
className="px-4 py-2 text-gray-700 hover:text-gray-900"
|
|
>
|
|
Pricing
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
{/* Show Upload File only when authenticated */}
|
|
{isAuthenticated && (
|
|
<NavigationMenuItem>
|
|
<NavigationMenuLink
|
|
href="/upload"
|
|
className="px-4 py-2 text-gray-700 hover:text-gray-900"
|
|
>
|
|
Upload File
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
)}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
|
|
{/* Auth Section */}
|
|
<div className="flex items-center space-x-4">
|
|
{isAuthenticated ? (
|
|
// Show user circle with dropdown when logged in
|
|
<div className="flex items-center space-x-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="flex items-center space-x-1 bg-white hover:bg-gray-50 text-gray-700 font-semibold text-sm rounded-full px-3 py-2 transition-colors cursor-pointer border border-gray-200 hover:border-gray-300">
|
|
<div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white">
|
|
{getUserInitials()}
|
|
</div>
|
|
<ChevronDownIcon className="w-4 h-4 transition-transform duration-200 data-[state=open]:rotate-180" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<DropdownMenuItem asChild>
|
|
<a href="/subscriptions" className="cursor-pointer">
|
|
My Subscriptions
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<a href="/renders" className="cursor-pointer">
|
|
My Renders
|
|
</a>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={logout}
|
|
className="cursor-pointer"
|
|
>
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
) : (
|
|
// Show login/signup buttons when not authenticated
|
|
<>
|
|
<a
|
|
href="/login"
|
|
className="text-gray-700 hover:text-gray-900 px-4 py-2 border border-gray-300 hover:border-gray-400 rounded-md cursor-pointer transition-colors"
|
|
>
|
|
Log In
|
|
</a>
|
|
<a
|
|
href="/signup"
|
|
className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md font-medium cursor-pointer transition-colors"
|
|
>
|
|
Sign Up
|
|
</a>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div
|
|
className="w-[90%] h-[600px] rounded-2xl flex justify-between items-start relative"
|
|
style={{
|
|
backgroundColor: "#FF580F",
|
|
margin: "20px",
|
|
marginTop: "5px",
|
|
}}
|
|
>
|
|
<div className="ml-8 mt-16">
|
|
<h1
|
|
className="text-white text-6xl font-bold mb-4"
|
|
style={{ fontFamily: "Inter, sans-serif" }}
|
|
>
|
|
Welcome to reYa Render
|
|
</h1>
|
|
<p
|
|
className="text-white text-2xl"
|
|
style={{ width: "600px", fontFamily: "Inter, sans-serif" }}
|
|
>
|
|
Whether you're working on animations, visualizations, or still
|
|
images, our render farm is optimized to deliver high-quality
|
|
results efficiently. Simply upload your files, and our system will
|
|
take care of the rendering process, saving you time and computing
|
|
power so you can focus on the creative side of your work.
|
|
</p>
|
|
<div className="flex gap-4 mt-6">
|
|
<button className="bg-white text-orange-500 px-6 py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors">
|
|
Contact Us
|
|
</button>
|
|
<button className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-orange-500 cursor-pointer transition-colors">
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-4 right-4">
|
|
<img
|
|
src="/3d-model.png"
|
|
alt="3D Model"
|
|
width={500}
|
|
height={500}
|
|
style={{ display: "block" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Section */}
|
|
<div className="flex justify-center mt-16 mb-16">
|
|
<div className="w-[90%]">
|
|
<h2 className="text-4xl font-bold text-center mb-12 text-gray-800">
|
|
Available Plans
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Basic Plan */}
|
|
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
|
|
<div className="text-2xl font-bold text-orange-500 mb-2">
|
|
Basic
|
|
</div>
|
|
<div className="text-4xl font-bold text-orange-500 mb-8">
|
|
€9.99{" "}
|
|
<span className="text-lg font-normal text-gray-500">
|
|
/month
|
|
</span>
|
|
</div>
|
|
<button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
|
|
Choose Basic
|
|
</button>
|
|
<ul className="text-left space-y-3">
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
250 GB storage
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Custom subdomain
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Unlimited downloads
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Password protected links
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Basic analytics
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Standard Plan */}
|
|
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
|
|
<div className="text-2xl font-bold text-orange-500 mb-2">
|
|
Standard
|
|
</div>
|
|
<div className="text-4xl font-bold text-orange-500 mb-8">
|
|
€19.99{" "}
|
|
<span className="text-lg font-normal text-gray-500">
|
|
/month
|
|
</span>
|
|
</div>
|
|
<button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
|
|
Choose Standard
|
|
</button>
|
|
<ul className="text-left space-y-3">
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
500 GB storage
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Custom subdomain
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Unlimited downloads
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Password protected links
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Basic analytics
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Custom branding & logo
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Priority support
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Premium Plan */}
|
|
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
|
|
<div className="text-2xl font-bold text-orange-500 mb-2">
|
|
Premium
|
|
</div>
|
|
<div className="text-4xl font-bold text-orange-500 mb-8">
|
|
€39.99{" "}
|
|
<span className="text-lg font-normal text-gray-500">
|
|
/month
|
|
</span>
|
|
</div>
|
|
<button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
|
|
Choose Premium
|
|
</button>
|
|
<ul className="text-left space-y-3">
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>1 TB
|
|
storage
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Custom subdomain
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Unlimited downloads
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Password protected links
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Basic analytics
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Custom branding & logo
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Priority support
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Multiple user accounts
|
|
</li>
|
|
<li className="flex items-center">
|
|
<span className="text-green-500 font-bold mr-3">✓</span>
|
|
Team management
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload area below hero, same width as orange container - only show when authenticated */}
|
|
{isAuthenticated && (
|
|
<div className="flex justify-center">
|
|
<div className="w-[90%] mt-6 mb-12">
|
|
<h2 className="text-4xl font-bold text-left mb-8 text-gray-800">
|
|
Start by uploading at least one .blend file
|
|
</h2>
|
|
<UploadArea className="w-full shadow-sm" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|