Skip to content

feat: implement Moola inspired responsive landing page for JHYRN #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JHYRN wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: implement Moola inspired responsive landing page for JHYRN #281

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 135 additions & 96 deletions frontend/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,142 @@
import Image from "next/image";
"use client";

import React from 'react';

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<main className="min-h-screen bg-white font-sans text-slate-900">

{/* Navbar */}
<nav className="flex justify-between items-center px-6 py-4 max-w-7xl mx-auto border-b border-slate-100">
<div className="flex items-center gap-3 group cursor-pointer">
<div className="flex items-center justify-center bg-slate-900 text-cyan-400 font-mono font-bold px-2 py-1 rounded-lg border border-slate-700 group-hover:border-cyan-400 transition-colors">
{`</>`}
</div>
<span className="text-xl font-black tracking-tighter text-slate-900 uppercase">
JHYRN
</span>
</div>

<div className="hidden md:flex gap-6 text-sm font-semibold text-slate-500">
<a href="#" className="hover:text-cyan-500 transition">Market</a>
<a href="#" className="hover:text-rose-500 transition">Assets</a>
<a href="#" className="hover:text-cyan-500 transition">Exchange</a>
</div>

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
<div className="flex items-center gap-3">
<button className="bg-cyan-400 text-slate-900 px-5 py-2 rounded-lg text-sm font-bold hover:bg-cyan-300 transition shadow-[0_0_15px_rgba(34,211,238,0.3)]">
Download
</button>
<button className="bg-black text-white px-5 py-2 rounded-lg text-sm font-bold hover:bg-slate-800 transition border border-white/10">
Login
</button>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
</nav>

{/* Search Bar Section */}
<section className="px-6 py-5 bg-slate-950 border-y border-slate-800 shadow-inner">
<div className="max-w-3xl mx-auto relative">
<div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<input
type="text"
placeholder="Search for products, stocks, or crypto assets..."
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white placeholder:text-slate-600 transition shadow-lg"
/>
Go to nextjs.org →
</a>
</footer>
</div>
</div>
</section>

{/* Hero Section */}
<section className="px-6 py-10 lg:py-16 max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-10 items-center">

<div>
<h1 className="text-5xl lg:text-7xl font-bold text-slate-900 leading-tight tracking-tighter">
Invest in your <br />
<span className="text-cyan-500 uppercase">Digital </span>
<span className="text-rose-500 uppercase">Future.</span>
</h1>

<p className="mt-6 text-lg text-slate-600 leading-relaxed max-w-md font-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<div className="mt-8">
<button className="bg-slate-900 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-cyan-500 transition shadow-lg shadow-cyan-100">
Get Started
</button>
</div>
</div>

{/* Hero Card */}
<div className="relative group max-w-md lg:max-w-lg mx-auto w-full">
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/20 to-rose-500/20 rounded-[3rem] blur-3xl opacity-60 group-hover:opacity-100 transition-opacity duration-700"></div>

<div className="relative z-10 bg-white p-6 rounded-[2.5rem] shadow-2xl border border-slate-100 transform rotate-1 group-hover:rotate-0 transition-transform duration-700">
<div className="bg-slate-50 rounded-[2rem] p-6 flex flex-col gap-5">
<div className="flex gap-4">
<div className="h-20 w-full bg-cyan-500/10 rounded-2xl border border-cyan-200 flex items-center px-4 shadow-sm">
<div className="h-9 w-9 bg-cyan-400 rounded-xl shadow-md"></div>
<div className="ml-3 h-2.5 w-12 bg-cyan-500/20 rounded-full"></div>
</div>
<div className="h-20 w-full bg-rose-500/10 rounded-2xl border border-rose-200 flex items-center px-4 shadow-sm">
<div className="h-9 w-9 bg-rose-500 rounded-xl shadow-md"></div>
<div className="ml-3 h-2.5 w-12 bg-rose-500/20 rounded-full"></div>
</div>
</div>

<div className="h-28 w-full bg-slate-950 rounded-2xl p-6 flex flex-col justify-center gap-3 shadow-2xl border border-slate-800">
<div className="h-1.5 w-1/4 bg-cyan-400/40 rounded-full"></div>
<div className="h-1.5 w-full bg-white/10 rounded-full"></div>
<div className="h-1.5 w-2/3 bg-white/10 rounded-full"></div>
<div className="mt-1 h-1 w-1/3 bg-rose-500/30 rounded-full"></div>
</div>
</div>
</div>
</div>

</div>
</section>

{/* Features Section */}
<section className="px-6 py-20 bg-slate-950 border-t border-slate-900">
<div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-10">

<div className="bg-slate-900/50 p-8 rounded-3xl border border-slate-800 hover:border-cyan-400/50 transition-all duration-300 group">
<div className="w-14 h-14 bg-cyan-500/10 rounded-2xl flex items-center justify-center mb-8 border border-cyan-500/20">
<div className="w-6 h-6 bg-cyan-400 rounded-lg shadow-[0_0_15px_rgba(34,211,238,0.5)]"></div>
</div>
<h3 className="text-xl font-bold text-white mb-4 uppercase tracking-tight">System Asset</h3>
<p className="text-slate-400 text-sm leading-relaxed font-medium font-serif">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>

<div className="bg-slate-900/50 p-8 rounded-3xl border border-slate-800 hover:border-rose-500/50 transition-all duration-300 group">
<div className="w-14 h-14 bg-rose-500/10 rounded-2xl flex items-center justify-center mb-8 border border-rose-500/20">
<div className="w-6 h-6 bg-rose-500 rounded-lg shadow-[0_0_15px_rgba(244,63,94,0.5)]"></div>
</div>
<h3 className="text-xl font-bold text-white mb-4 uppercase tracking-tight">Secure Logic</h3>
<p className="text-slate-400 text-sm leading-relaxed font-medium font-serif">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>

<div className="bg-slate-900/50 p-8 rounded-3xl border border-slate-800 hover:border-slate-500/50 transition-all duration-300 group">
<div className="w-14 h-14 bg-slate-500/10 rounded-2xl flex items-center justify-center mb-8 border border-slate-700">
<div className="w-6 h-6 bg-slate-300 rounded-lg shadow-[0_0_15px_rgba(255,255,255,0.2)]"></div>
</div>
<h3 className="text-xl font-bold text-white mb-4 uppercase tracking-tight">Global Reach</h3>
<p className="text-slate-400 text-sm leading-relaxed font-medium font-serif">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>

</div>
</section>
</main>
);
}
}