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

135
app/page.tsx
Unescape View File

@ -22,6 +22,7 @@ export default function Home() {
const { isAuthenticated, user, logout } = useAuth(); const { isAuthenticated, user, logout } = useAuth();
const [showSuccess, setShowSuccess] = useState(false); const [showSuccess, setShowSuccess] = useState(false);
const [userSubscription, setUserSubscription] = useState<any>(null); const [userSubscription, setUserSubscription] = useState<any>(null);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Check for success message in URL // Check for success message in URL
useEffect(() => { useEffect(() => {
@ -208,6 +209,35 @@ export default function Home() {
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56"> <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> <DropdownMenuItem asChild>
<a href="/subscriptions" className="cursor-pointer"> <a href="/subscriptions" className="cursor-pointer">
My Subscriptions My Subscriptions
@ -230,6 +260,30 @@ export default function Home() {
) : ( ) : (
// Show login/signup buttons when not authenticated // Show login/signup buttons when not authenticated
<> <>
{/* 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"
>
<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 <a
href="/login" 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" 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"
@ -242,6 +296,7 @@ export default function Home() {
> >
Sign Up Sign Up
</a> </a>
</div>
</> </>
)} )}
</div> </div>
@ -249,26 +304,78 @@ export default function Home() {
</div> </div>
</nav> </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 */} {/* Main Content */}
<div className="flex items-center justify-center min-h-screen"> <div className="flex items-center justify-center min-h-screen">
<div <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={{ style={{
backgroundColor: "#FF580F", backgroundColor: "#FF580F",
margin: "20px", margin: "20px",
marginTop: "5px", 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 <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" }} style={{ fontFamily: "Inter, sans-serif" }}
> >
Welcome to reYa Render Welcome to reYa Render
</h1> </h1>
<p <p
className="text-white text-2xl" 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={{ width: "600px", fontFamily: "Inter, sans-serif" }} style={{ fontFamily: "Inter, sans-serif" }}
> >
Whether you're working on animations, visualizations, or still Whether you're working on animations, visualizations, or still
images, our render farm is optimized to deliver high-quality 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 take care of the rendering process, saving you time and computing
power so you can focus on the creative side of your work. power so you can focus on the creative side of your work.
</p> </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 <a
href="/contact" 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 Contact Us
</a> </a>
<a <a
href="/signup" 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 Get Started
</a> </a>
</div> </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>
<div className="absolute bottom-4 right-4"> {/* Image on desktop */}
<div className="absolute bottom-4 right-4 hidden md:block">
<img <img
src="/creativity.png" src="/creativity.png"
alt="3D Model" alt="3D Model"

Write Preview
Loading…
Cancel
Save