Our news
// Gralya - Homepage React component // Uses Tailwind CSS for styling. Drop into a Next.js / Create React App project // Ensure Tailwind is configured in the project for the styles to render correctly.
export default function GralyaHomepage() { return ( <div className="min-h-screen bg-slate-50 text-slate-900 antialiased"> {/* Nav */} <header className="bg-white/60 backdrop-blur-sm border-b border-slate-200"> <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <a href="#" className="flex items-center gap-3"> <GralyaMark className="w-10 h-10" /> <span className="text-2xl font-extrabold tracking-tight">Gralya</span> </a>
<nav className="hidden md:flex items-center gap-6 text-slate-700">
<a href="#product" className="hover:text-slate-900">Product</a>
<a href="#features" className="hover:text-slate-900">Features</a>
<a href="#employers" className="hover:text-slate-900">For Employers</a>
<a href="#pricing" className="hover:text-slate-900">Pricing</a>
<a href="#" className="px-4 py-2 rounded-md text-sm bg-gradient-to-r from-teal-500 to-cyan-500 text-white">Sign in</a>
</nav>
<div className="md:hidden">
<button aria-label="Open menu" className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-400">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
{/* Hero */}
<main>
<section className="max-w-6xl mx-auto px-6 py-20 grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
<div className="md:col-span-7">
<h1 className="text-4xl sm:text-5xl font-extrabold leading-tight">Grow Smarter. <span className="text-teal-500">Together.</span></h1>
<p className="mt-6 text-lg text-slate-600 max-w-2xl">Gralya is your AI ally for career growth — discover your strengths, build skills with short practice challenges, and prove what you can do with verified assessments that employers trust.</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<a href="#signup" className="inline-flex items-center justify-center gap-3 px-6 py-3 rounded-md bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-medium shadow-md hover:opacity-95">Get early access</a>
<a href="#features" className="inline-flex items-center justify-center gap-3 px-6 py-3 rounded-md border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50">See features</a>
</div>
<div className="mt-10 flex items-center gap-6">
<div className="flex items-center gap-3">
<div className="h-12 w-12 rounded-full bg-gradient-to-br from-teal-400 to-cyan-400 flex items-center justify-center text-white font-semibold">A</div>
<div>
<div className="text-sm font-semibold">10K+</div>
<div className="text-xs text-slate-500">Signups on waitlist</div>
</div>
</div>
<div className="flex items-center gap-3">
<div className="h-12 w-12 rounded-full bg-slate-800/5 flex items-center justify-center text-teal-500 font-semibold">★</div>
<div>
<div className="text-sm font-semibold">4.8/5</div>
<div className="text-xs text-slate-500">Average user rating</div>
</div>
</div>
</div>
</div>
<div className="md:col-span-5">
<div className="rounded-2xl bg-gradient-to-b from-white to-slate-50 border border-slate-200 shadow-lg p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<GralyaMark className="w-8 h-8" />
<div>
<div className="text-sm font-semibold">Gralya Dashboard</div>
<div className="text-xs text-slate-500">Personalized learning path</div>
</div>
</div>
<div className="text-xs text-slate-400">Beta</div>
</div>
<div className="space-y-4">
<div className="bg-slate-100 p-4 rounded-lg">
<div className="text-sm font-medium">Today's micro-challenge</div>
<div className="mt-2 flex items-center justify-between">
<div>
<div className="text-sm font-semibold">Build a tiny landing page</div>
<div className="text-xs text-slate-500">10 min • React • HTML/CSS</div>
</div>
<button className="px-3 py-1 rounded-md bg-teal-500 text-white text-sm">Start</button>
</div>
</div>
<div className="p-4 rounded-lg border border-slate-100">
<div className="text-sm text-slate-500">Progress</div>
<div className="mt-3 w-full bg-slate-100 rounded-full h-3">
<div className="h-3 rounded-full bg-gradient-to-r from-teal-500 to-cyan-400" style={{ width: '46%' }} />
</div>
</div>
<div className="p-4 rounded-lg bg-slate-50 border border-slate-100">
<div className="text-sm font-medium">Recommended jobs</div>
<div className="mt-3 space-y-2">
<div className="flex items-center justify-between">
<div>
<div className="text-sm font-semibold">Junior Frontend Engineer</div>
<div className="text-xs text-slate-500">Remote • Fits skills: React, HTML</div>
</div>
<button className="px-3 py-1 rounded-md border border-slate-200 text-sm">View</button>
</div>
<div className="flex items-center justify-between">
<div>
<div className="text-sm font-semibold">Marketing Coordinator</div>
<div className="text-xs text-slate-500">Hybrid • Fits skills: Copy, Analytics</div>
</div>
<button className="px-3 py-1 rounded-md border border-slate-200 text-sm">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Features */}
<section id="features" className="bg-white border-t border-slate-100">
<div className="max-w-6xl mx-auto px-6 py-16">
<h2 className="text-2xl font-bold">What Gralya does</h2>
<p className="text-slate-600 mt-2 max-w-2xl">AI-powered career guidance that helps people learn, practice, and prove the skills employers actually need.</p>
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<Feature title="Skill discovery" desc="Adaptive assessments find your strengths and map realistic career paths." icon={<IconBulb />} />
<Feature title="Micro-practice" desc="Daily 5–15 min challenges that build skills by doing — not just watching." icon={<IconSpark />} />
<Feature title="Verified skills" desc="Short, job-specific assessments employers trust for faster hiring." icon={<IconShield />} />
</div>
</div>
</section>
{/* Employer CTA */}
<section id="employers" className="max-w-6xl mx-auto px-6 py-16">
<div className="rounded-2xl p-8 bg-gradient-to-r from-slate-800 to-slate-900 text-white grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div>
<h3 className="text-2xl font-bold">Hire verified talent</h3>
<p className="mt-3 text-slate-200">Give your team access to candidates who’ve proven skills — reduce time-to-hire and increase retention with evidence-backed matches.</p>
<div className="mt-6 flex gap-4">
<a href="#" className="px-4 py-2 rounded-md bg-white text-slate-900 font-medium">Get a demo</a>
<a href="#" className="px-4 py-2 rounded-md border border-white/30">Partner with us</a>
</div>
</div>
<div className="text-sm text-slate-300">
<div className="mb-4">Trusted by</div>
<div className="flex flex-wrap gap-4">
<div className="h-10 w-24 bg-white/10 rounded flex items-center justify-center">Logo</div>
<div className="h-10 w-24 bg-white/10 rounded flex items-center justify-center">Logo</div>
<div className="h-10 w-24 bg-white/10 rounded flex items-center justify-center">Logo</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="mt-12 border-t border-slate-100 bg-white">
<div className="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
<div className="flex items-center gap-3">
<GralyaMark className="w-9 h-9" />
<div>
<div className="font-semibold">Gralya</div>
<div className="text-xs text-slate-500">Grow Smarter. Together.</div>
</div>
</div>
<div className="flex items-center gap-6 text-slate-600">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Contact</a>
</div>
</div>
</footer>
</main>
</div>
) }
/* ---------------------------------- / / Small helper components used above / / ---------------------------------- */
function GralyaMark({ className = '' }) { return ( <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden> <rect x="6" y="10" width="52" height="44" rx="10" fill="url(#g)" /> <path d="M20 38c6-8 12-12 22-12" stroke="white" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" /> <defs> <linearGradient id="g" x1="0" x2="1"> <stop offset="0%" stopColor="#06b6d4" /> <stop offset="100%" stopColor="#0ea5a4" /> </linearGradient> </defs> </svg> ) }
function Feature({ title, desc, icon }) { return ( <div className="p-6 rounded-lg border border-slate-100 bg-white shadow-sm"> <div className="h-12 w-12 rounded-md bg-slate-50 flex items-center justify-center text-teal-500">{icon}</div> <div className="mt-4 font-semibold">{title}</div> <div className="mt-2 text-sm text-slate-600">{desc}</div> </div> ) }
function IconBulb() { return ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> <path d="M12 3a6 6 0 00-4 10.6V15a2 2 0 002 2h4a2 2 0 002-2v-1.4A6 6 0 0012 3z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </svg> ) }
function IconSpark() { return ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> <path d="M12 18v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> <path d="M4.9 4.9l2.8 2.8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> <path d="M16.3 16.3l2.8 2.8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </svg> ) }
function IconShield() { return ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2l7 3v5c0 5-3.5 10-7 12-3.5-2-7-7-7-12V5l7-3z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </svg> ) }-
Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!