Skip to content

Improve landing page #24

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

Merged
Scc33 merged 3 commits into from
Apr 7, 2025
Merged

Improve landing page #24

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e169bb1
Improve landing page
Scc33 Apr 7, 2025
b11a578
Fix loading svg
Scc33 Apr 7, 2025
980d3ec
Fix apostrophe
Scc33 Apr 7, 2025
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
195 changes: 165 additions & 30 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,63 @@ import Link from "next/link";
export default function Home() {
return (
<div className="bg-white">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-24">
<div className="text-center">
{/* Hero Section */}
<div className="relative isolate">
{/* Background gradient */}
<div
className="absolute inset-x-0 -top-40 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-blue-500 to-purple-600 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
/>
</div>

<div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
<div className="mx-auto max-w-2xl text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
Learn SQL in Your Browser
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
SQL Playground is an interactive platform to learn SQL basics
right in your browser. No setup, no accounts, just hands-on
learning with immediate feedback.
Master database querying with interactive lessons, hands-on
practice, and immediate feedback. No setup, no accounts, just pure
SQL learning.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Link
href="/lessons"
className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
className="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors"
>
Start Learning
</Link>
<a
href="#features"
className="text-sm font-semibold leading-6 text-gray-900"
<Link
href="/sandbox"
className="rounded-md bg-white px-4 py-2.5 text-sm font-semibold text-blue-600 shadow-sm ring-1 ring-inset ring-blue-300 hover:bg-blue-50 transition-colors"
>
Learn more <span aria-hidden="true">→</span>
</a>
Try SQL Sandbox
</Link>
</div>
</div>
</div>
</div>

<div id="features" className="py-24 bg-gray-50 sm:py-32">
{/* Features Section */}
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<h2 className="text-base font-semibold leading-7 text-blue-600">
Learn Faster
Interactive Learning
</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Everything you need to master SQL basics
Everything you need to master SQL
</p>
<p className="mt-6 text-lg leading-8 text-gray-600">
SQL Playground offers a smooth learning experience with
interactive lessons, hands-on exercises, and immediate feedback.
SQL Playground offers a smooth learning experience with hands-on
exercises, visual explanations, and real-time feedback.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
Expand All @@ -70,7 +86,59 @@ export default function Home() {
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
Step-by-step tutorials covering SQL basics and advancing to
more complex queries.
more complex queries like JOINs, subqueries, and aggregations.
</dd>
</div>
<div className="relative pl-16">
<dt className="text-base font-semibold leading-7 text-gray-900">
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600">
<svg
className="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
</div>
SQL Sandbox
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
Experiment freely in a consequence-free environment. Write and
execute any SQL query against our sample database to test your
skills.
</dd>
</div>
<div className="relative pl-16">
<dt className="text-base font-semibold leading-7 text-gray-900">
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600">
<svg
className="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
Visual Explanations
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
See how SQL operations like SELECT, WHERE, JOIN, and GROUP BY
transform data with interactive visualizations that make
concepts click.
</dd>
</div>
<div className="relative pl-16">
Expand All @@ -87,15 +155,15 @@ export default function Home() {
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M15.485 4.544a8.25 8.25 0 00-13.803 3.7m0 0l-3.181-3.183m0 0h-4.992m16.023 0h4.992M10.957 12.637a1.5 1.5 0 10-2.196 2.037"
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
/>
</svg>
</div>
Live SQL Environment
Comprehensive Glossary
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
Execute queries and see results immediately, with helpful
error messages.
Access a complete reference of SQL commands, clauses,
functions, and concepts to support your learning journey.
</dd>
</div>
<div className="relative pl-16">
Expand All @@ -120,7 +188,8 @@ export default function Home() {
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
Practice with a realistic e-commerce database containing
customers, products, and orders data.
customers, products, orders, and more. All preloaded and ready
to query.
</dd>
</div>
<div className="relative pl-16">
Expand All @@ -145,35 +214,101 @@ export default function Home() {
</dt>
<dd className="mt-2 text-base leading-7 text-gray-600">
Your progress is automatically saved in your browser, so you
can pick up where you left off.
can pick up where you left off on your SQL learning journey.
</dd>
</div>
</dl>
</div>
</div>
</div>

{/* CTA Sections */}
<div className="bg-gradient-to-r from-blue-700 to-blue-900 py-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
<div className="max-w-xl">
<h2 className="text-3xl font-bold tracking-tight text-white">
Ready to practice your SQL skills?
</h2>
<p className="mt-3 text-lg text-blue-200">
Try our SQL Sandbox for free-form experimentation with any SQL
queries.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4">
<Link
href="/sandbox"
className="flex items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-semibold text-blue-900 shadow-sm hover:bg-blue-50 transition-colors"
>
Open SQL Sandbox
</Link>
</div>
</div>
</div>

<div className="bg-gray-50 py-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
<div className="max-w-xl">
<h2 className="text-3xl font-bold tracking-tight text-gray-900">
Visualize SQL operations
</h2>
<p className="mt-3 text-lg text-gray-600">
See how SQL commands transform your data with interactive
visualizations that make complex concepts simple.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4">
<Link
href="/visualizer"
className="flex items-center justify-center rounded-md bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors"
>
Explore SQL Visualizer
</Link>
</div>
</div>
</div>

<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Ready to start learning?
Start your SQL journey today
</h2>
<p className="mt-6 text-lg leading-8 text-gray-600">
Jump right in and start learning SQL with our interactive,
hands-on lessons.
Whether you&apos;re a complete beginner or looking to brush up
your skills, our interactive platform has everything you need to
succeed with SQL.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<Link
href="/lessons"
className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
className="rounded-md bg-blue-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors"
>
Start Learning
</Link>
<Link
href="/glossary"
className="rounded-md bg-white px-5 py-3 text-base font-semibold text-blue-600 shadow-sm ring-1 ring-inset ring-blue-300 hover:bg-blue-50 transition-colors"
>
Get Started
Browse SQL Glossary
</Link>
</div>
</div>
</div>
</div>

{/* Background gradient bottom */}
<div
className="absolute inset-x-0 bottom-0 -z-10 transform-gpu overflow-hidden blur-3xl"
aria-hidden="true"
>
<div
className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-blue-500 to-purple-600 opacity-10 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
/>
</div>
</div>
);
}
Loading