Skip to content

Commit

Permalink
improve homepage layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattPereira
MattPereira committed Dec 23, 2024
1 parent 02236a4 commit 94a8ccc
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 69 deletions.
9 changes: 5 additions & 4 deletions packages/nextjs/app/hooks/HookDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,11 @@ export const HooksDetails = ({ hooks }: { hooks: HookInfo[] }) => {
>
<div className="col-span-full lg:col-start-1 lg:col-end-3 text-xl font-bold ">{hook.title}</div>

<div className="hidden lg:flex text-center">
<div className="hidden lg:flex">{hook.created_by}</div>

<div className="hidden lg:flex">{hook.category}</div>

<div className="hidden lg:flex">
<Link
className="hover:underline hover:text-accent flex gap-2 items-center text-nowrap overflow-hidden whitespace-nowrap"
target="_blank"
Expand All @@ -59,9 +63,6 @@ export const HooksDetails = ({ hooks }: { hooks: HookInfo[] }) => {
github <ArrowTopRightOnSquareIcon className="w-4 h-4" />
</Link>
</div>

<div className="hidden lg:flex">{hook.category}</div>
<div className="hidden lg:flex">{hook.created_by}</div>
</div>
))}

Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/app/hooks/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ const Hooks: NextPage = async () => {
<div className="w-full flex flex-col gap-3">
<div className="w-full grid grid-cols-5 font-bold text-lg">
<div className="col-auto lg:col-start-1 lg:col-end-3">Name</div>
<div className="hidden lg:flex">Repo URL</div>
<div className="hidden lg:flex">Category</div>
<div className="hidden lg:flex">Created By</div>
<div className="hidden lg:flex">Category</div>
<div className="hidden lg:flex">Repo URL</div>
</div>
{hooks ? <HooksDetails hooks={hooks} /> : <div className="text-xl text-error">Error fetching hooks data!</div>}
</div>
Expand Down
131 changes: 69 additions & 62 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const EXAMPLES = [
emoji: "🌊",
title: "Custom Pools",
href: "/pools",
description: "Explore and interact with liquidity pools",
description: "Examine configuration details and execute pool operations",
},
{
emoji: "🪝",
title: "Pool Hooks",
href: "/hooks",
description: "Extend liquidity pool functionality with hooks",
description: "View our extensive library of hooks example contracts",
},
];

Expand All @@ -38,90 +38,97 @@ const VIDEOS = [
{
title: "Intro to Scaffold Balancer",
href: "https://www.youtube.com/watch?v=m6q5M34ZdXw",
description: "Learn how to use Scaffold Balancer v3",
description: "",
},
{
title: "Create Custom AMMs",
href: "https://www.youtube.com/watch?v=oJAXQCMVdfA",
description: "Code along demo for creating custom AMMs",
description: "",
},
{
title: "Create a Hook",
href: "https://www.youtube.com/watch?v=kaz6duliRPA",
description: "Code along demo for creating custom AMMs",
description: "",
},
{
title: "Create a Router",
href: "https://youtube.com//watch?v=pO1ChmSFTaY",
description: "",
},
];

const Home: NextPage = () => {
return (
<div className="flex-grow bg-base-300">
<div className="max-w-screen-2xl mx-auto">
<div className="flex items-center flex-col flex-grow py-10 bg-base-300 px-5 lg:px-10 gap-12">
<div className="px-5">
<div className="flex items-center flex-col flex-grow py-10 bg-base-300 px-5 lg:px-10">
<div className="px-5 mb-10">
<h1 className="text-center text-5xl font-bold mb-10 mt-5">Scaffold Balancer v3</h1>
<div className="text-2xl w-full">
A developer friendly tool for prototyping liquidity pools and hooks contracts
</div>
</div>

<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-5">Examples</h3>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
{EXAMPLES.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl p-8 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
>
{/* <div className="text-8xl my-7">{item.emoji}</div> */}
<h3 className="text-2xl font-bold mb-5">{item.title}</h3>
<div className="text-xl mb-0">{item.description}</div>
</Link>
))}
<div className="flex flex-col gap-20 mb-14">
<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-4">Explore</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
{EXAMPLES.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl p-8 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
>
{/* <div className="text-8xl my-7">{item.emoji}</div> */}
<h3 className="text-2xl font-bold mb-5">{item.title}</h3>
<div className="text-xl mb-0">{item.description}</div>
</Link>
))}
</div>
</div>
</div>
<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-7">Documentation</h3>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
{DOCUMENTATION.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl p-8 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
target="_blank"
rel="noopener noreferrer"
>
<h3 className="text-2xl font-bold mb-5">{item.title}</h3>
<p className="text-xl mb-0">{item.description}</p>
</Link>
))}
<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-4">Guides</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{DOCUMENTATION.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl p-8 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
target="_blank"
rel="noopener noreferrer"
>
<h3 className="text-2xl font-bold mb-5">{item.title}</h3>
<p className="text-xl mb-0">{item.description}</p>
</Link>
))}
</div>
</div>
</div>

<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-7">Videos</h3>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
{VIDEOS.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl text-center p-5 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
target="_blank"
rel="noopener noreferrer"
>
<div className="aspect-video">
{/* eslint-disable-next-line */}
<img
src={`https://img.youtube.com/vi/${item.href.split("v=")[1]}/maxresdefault.jpg`}
alt={item.title}
className="w-full h-full object-cover rounded-xl"
/>
</div>
</Link>
))}
<div className="w-full">
<h3 className="text-start text-3xl font-bold mb-4">Videos</h3>
<div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-10">
{VIDEOS.map(item => (
<Link
className="relative bg-base-200 hover:scale-105 transition-all duration-300 text-2xl text-center p-5 rounded-3xl shadow-lg"
key={item.href}
href={item.href}
passHref
target="_blank"
rel="noopener noreferrer"
>
<div className="aspect-video">
{/* eslint-disable-next-line */}
<img
src={`https://img.youtube.com/vi/${item.href.split("v=")[1]}/maxresdefault.jpg`}
alt={item.title}
className="w-full h-full object-cover rounded-xl"
/>
</div>
</Link>
))}
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Footer = () => {
<span>·</span>
<div className="text-center">
<a
href="https://docs-v3.balancer.fi/"
href="https://docs.balancer.fi/build/"
target="_blank"
rel="noreferrer"
className="link no-underline hover:underline"
Expand Down

0 comments on commit 94a8ccc

Please sign in to comment.