Miran
/
reya-render
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive

Browse Source
main
miranshala 7 months ago
parent 63a753403a
commit 203295aab6
1 changed files with 137 additions and 20 deletions
Show Stats Download Patch File Download Diff File

157
app/page.tsx
Unescape View File

@ -22,6 +22,7 @@ export default function Home() {
const { isAuthenticated, user, logout } = useAuth();
const [showSuccess, setShowSuccess] = useState(false);
const [userSubscription, setUserSubscription] = useState<any>(null);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Check for success message in URL
useEffect(() => {
@ -208,6 +209,35 @@ export default function Home() {
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem asChild>
<a href="/contact" className="cursor-pointer">
Contact
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a
href="#pricing"
onClick={(e) => {
e.preventDefault();
const pricingSection =
document.getElementById("pricing");
if (pricingSection) {
pricingSection.scrollIntoView({
behavior: "smooth",
});
}
}}
className="cursor-pointer"
>
Pricing
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="/upload" className="cursor-pointer">
Upload File
</a>
</DropdownMenuItem>
<div className="border-t border-gray-200 my-1" />
<DropdownMenuItem asChild>
<a href="/subscriptions" className="cursor-pointer">
My Subscriptions
@ -230,18 +260,43 @@ export default function Home() {
) : (
// 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"
{/* Hamburger Button - Mobile (visible when logged out) */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100"
aria-label="Toggle menu"
>
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>
<svg
className="w-6 h-6"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
{mobileMenuOpen ? (
<path d="M6 18L18 6M6 6l12 12" />
) : (
<path d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
{/* Desktop Login/Signup Buttons */}
<div className="hidden md:flex items-center space-x-4">
<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>
@ -249,26 +304,78 @@ export default function Home() {
</div>
</nav>
{/* Mobile Menu Panel - Only show when logged out */}
{!isAuthenticated && (
<div
className={`fixed top-16 right-0 h-[calc(100vh-4rem)] w-64 bg-white border-l border-gray-200 shadow-xl z-50 transform transition-transform duration-300 ease-in-out md:hidden ${
mobileMenuOpen ? "translate-x-0" : "translate-x-full"
}`}
>
<div className="flex flex-col p-4 space-y-4">
{/* Navigation Links */}
<a
href="/contact"
onClick={() => setMobileMenuOpen(false)}
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
Contact
</a>
<button
onClick={(e) => {
e.preventDefault();
setMobileMenuOpen(false);
const pricingSection = document.getElementById("pricing");
if (pricingSection) {
pricingSection.scrollIntoView({ behavior: "smooth" });
}
}}
className="px-4 py-2 text-left text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
>
Pricing
</button>
{/* Divider */}
<div className="border-t border-gray-200 my-2" />
{/* Auth Section - Mobile */}
<a
href="/login"
onClick={() => setMobileMenuOpen(false)}
className="px-4 py-2 text-center text-gray-700 border border-gray-300 hover:bg-gray-100 rounded-md transition-colors"
>
Log In
</a>
<a
href="/signup"
onClick={() => setMobileMenuOpen(false)}
className="px-4 py-2 text-center bg-orange-500 hover:bg-orange-600 text-white rounded-md transition-colors"
>
Sign Up
</a>
</div>
</div>
)}
{/* 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"
className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative"
style={{
backgroundColor: "#FF580F",
margin: "20px",
marginTop: "5px",
}}
>
<div className="ml-8 mt-16">
<div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0">
<h1
className="text-white text-6xl font-bold mb-4"
className="text-white text-3xl md: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" }}
className="text-white text-sm md:text-2xl max-w-full md:max-w-[600px] mb-6 md:mb-0 leading-relaxed pr-2 md:pr-0"
style={{ fontFamily: "Inter, sans-serif" }}
>
Whether you're working on animations, visualizations, or still
images, our render farm is optimized to deliver high-quality
@ -276,22 +383,32 @@ export default function Home() {
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">
<div className="flex flex-col md:flex-row gap-3 md:gap-4 mt-4 md:mt-6 w-full md:w-auto">
<a
href="/contact"
className="bg-white text-orange-500 px-6 py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors"
className="bg-white text-orange-500 px-4 py-2 md:px-6 md:py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors text-center md:text-left text-sm md:text-base w-full md:w-auto"
>
Contact Us
</a>
<a
href="/signup"
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"
className="bg-transparent border-2 border-white text-white px-4 py-2 md:px-6 md:py-3 rounded-md font-medium hover:bg-white hover:text-orange-500 cursor-pointer transition-colors text-center md:text-left text-sm md:text-base w-full md:w-auto"
>
Get Started
</a>
</div>
{/* Image below text on mobile */}
<div className="mt-6 md:hidden flex justify-center">
<img
src="/creativity.png"
alt="3D Model"
className="w-full max-w-[250px] h-auto"
style={{ display: "block" }}
/>
</div>
</div>
<div className="absolute bottom-4 right-4">
{/* Image on desktop */}
<div className="absolute bottom-4 right-4 hidden md:block">
<img
src="/creativity.png"
alt="3D Model"

Write Preview
Loading…
Cancel
Save