Skip to content

Commit

Permalink
Merge pull request #41 from Developer-DAO/feat/home-page-mobile
Browse files Browse the repository at this point in the history 
feat:  home page mobile view
  • Loading branch information
@code-z2
code-z2 authored Nov 10, 2023
2 parents 5d4ed34 + 4bf7014 commit 3cb32be
Show file tree
Hide file tree
Showing 16 changed files with 202 additions and 149 deletions.
Binary file removed apps/academy/public/D_D_NFT_image.png
View file
Binary file not shown.
Binary file added apps/academy/public/dd_nft_image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions apps/academy/src/components/ConnectButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const ConnectButton = () => {

if (!ready) {
return (
<Button className="button-rounded" disabled>
<Button className="connect-button" disabled>
loading
</Button>
);
Expand All @@ -35,14 +35,14 @@ export const ConnectButton = () => {
{!connected ? (
<Button
onClick={openConnectModal}
className="button-rounded hover:bg-[var(--button-secondary-dark)]"
className="connect-button hover:bg-[var(--button-secondary-dark)]"
>
Connect
</Button>
) : chain.unsupported ? (
<Button
onClick={openChainModal}
className="button-rounded hover:bg-[var(--button-accent-dark)]"
className="connect-button hover:bg-[var(--button-accent-dark)]"
>
Switch Network
</Button>
Expand Down
21 changes: 17 additions & 4 deletions apps/academy/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { FunctionComponent } from "react";
import { type NavItem, TopBar } from "ui";
import { type NavItem, SideBar, TopBar } from "ui";

import { ConnectButton } from "@/components/ConnectButton";

Expand All @@ -22,11 +22,24 @@ const sampleMenus: NavItem[] = [
];

const PageHeader: FunctionComponent = () => {
// return <Header {...links} />;
return (
<header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between py-10">
<TopBar menus={sampleMenus} />
<header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between py-10 md:flex-row-reverse">
<ConnectButton />
<div className="flex lg:hidden">
<SideBar
menus={[
...sampleMenus,
{
name: "Get In Touch",
href: "/",
icon: "dd_logo",
},
]}
/>
</div>
<div className="hidden lg:flex">
<TopBar menus={sampleMenus} />
</div>
</header>
);
};
Expand Down
1 change: 0 additions & 1 deletion apps/academy/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import "@/styles.css";
import "ui/styles.css";
import "@rainbow-me/rainbowkit/styles.css";

import {
Expand Down
25 changes: 18 additions & 7 deletions apps/academy/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,31 @@ const Home: NextPageWithLayout = () => {
<main>
<div className="academy-grid">
<div className="academy-grid-col-1">
<div className="text-bttf-lg">
<h1>learn</h1>
<h1>web3 __</h1>
<h1>with</h1>
<h1>frens</h1>
<div className="hidden justify-center md:flex">
<div className="text-bttf-lg">
<h1>learn</h1>
<h1>web3 __</h1>
<h1>with</h1>
<h1>frens</h1>
</div>
</div>
<div className="description max-w-lg">
<p>Become a web3 developer with DeveloperDAO.</p>
</div>
<div className="flex w-full items-center justify-center">
<div className="hidden w-full items-center justify-center md:flex">
<Icons.scroll className="h-16 w-16" />
</div>
</div>
<div className="dd-nft" />
<div className="dd-nft">
<div className="flex h-full items-end justify-center md:hidden">
<div className="text-bttf-lg">
<h1>learn</h1>
<h1>web3 __</h1>
<h1>with</h1>
<h1>frens</h1>
</div>
</div>
</div>
</div>
<div className="main-container space-y-16 py-16">
<LearnWeb3Banner href="" />
Expand Down
17 changes: 7 additions & 10 deletions apps/academy/src/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,30 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "ui/styles.css";

.text-bttf {
@apply leading-[91%] tracking-[1px] transition-colors;
font-family: var(--font-future);
}

.academy-grid {
@apply mx-auto grid h-screen max-h-[1024px] max-w-screen-2xl grid-cols-1 text-white md:grid-cols-2;
@apply mx-auto flex max-w-screen-2xl flex-col-reverse text-white md:flex-row;
}

.academy-grid .academy-grid-col-1 {
@apply my-auto space-y-12 lg:pt-24;
@apply mb-28 mt-16 flex h-auto max-h-[1024px] w-full flex-col justify-center space-y-8 md:mb-0 md:h-screen md:w-1/2;
}

.academy-grid .text-bttf-lg {
@apply text-bttf mb-16 text-center text-6xl lg:text-8xl;
@apply text-bttf mb-6 text-center text-5xl lg:text-8xl;
}

.academy-grid .academy-grid-col-1 .description {
@apply mx-auto text-center text-2xl font-light;
@apply mx-auto text-center text-xl font-light md:text-2xl;
}

.dd-nft {
@apply relative hidden py-6 pr-6 md:flex md:justify-end;
@apply h-screen max-h-[547px] w-full md:max-h-[1024px] md:w-1/2;
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
url("/D_D_NFT_image.png"),
url("/dd_nft_image.png"),
var(--academy-bg-dark) -406.375px -146px / 219.132% 181.543% no-repeat;
box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.25);
background-repeat: no-repeat;
Expand Down
1 change: 1 addition & 0 deletions packages/tailwindcss-config/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ module.exports = {
"clash-display": "var(--font-clash-display)",
"zen-kaku": "var(--font-zen-kaku)",
andale: "var(--font-andale-mono)",
"death-star": "var(--font-death-star)",
sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
},
keyframes: {
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/Banners/LearnWeb3Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface HomePageBannerProps {
export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
return (
<Card className="banner flex-col lg:flex-row">
<div className="terminal-text">
<div className="terminal-text mt-8">
<div className="line">
<div>1</div>
<div className="text-white">
Expand Down Expand Up @@ -109,11 +109,11 @@ export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
</div>
</div>
</div>
<div>
<div className="mb-16">
<CardHeader className="flex-row justify-center">
<CardTitle className="title">LEARN WEB3</CardTitle>
</CardHeader>
<CardContent className="description max-w-xl">
<CardContent className="description max-w-xl p-1">
<p>
DeveloperDAO Academy offers learning resources to help you learn how to build web3
technologies.
Expand Down
12 changes: 6 additions & 6 deletions packages/ui/src/components/Banners/PartnerBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export interface PartnerBannerProps extends HomePageBannerProps {
export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
return (
<Card className="banner flex-col-reverse lg:flex-row">
<div>
<div className="mb-16">
<CardHeader className="flex-row justify-center">
<CardTitle className="title">Partner with D_D Academy</CardTitle>
</CardHeader>
<CardContent className="description max-w-2xl">
<CardContent className="description max-w-2xl p-1 pb-12 md:pb-1">
<p>
Developer DAO is a community of thousands of web3 builders creating a better internet.
Join us and help educate the next generation of developers.
Expand All @@ -30,11 +30,11 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
</Button>
</div>
</div>
<div className=" m-auto max-w-sm">
<div className="flex flex-row items-center gap-x-6">
<div className="mx-8 mt-8 max-w-sm md:m-auto">
<div className="flex flex-col items-center gap-x-6 md:flex-row">
<Image src={imgSrc} width={120} height={120} alt="partner" className="rounded-full" />
<div className="h-28 border" />
<div className=" flex flex-wrap gap-6">
<div className="separator" />
<div className=" flex flex-wrap items-center justify-center gap-6 md:justify-normal">
{[
"/partners/zerion.png",
"/partners/polygon-logo.png",
Expand Down
10 changes: 5 additions & 5 deletions packages/ui/src/components/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const Footer = () => {
return (
<footer className="main-container">
<div className="footer">
<nav aria-label="social">
<nav aria-label="social" className="px-4">
{socials.map((social) => {
const Icon = Icons[social.icon];
return (
Expand All @@ -39,20 +39,20 @@ export const Footer = () => {
);
})}
</nav>
<nav aria-label="quick links" className="divide-x">
<nav aria-label="quick links" className="h-20 divide-x">
{links.map((link) => (
<Link
href={link.href}
className="group inline-flex h-full items-center pl-6"
className="group inline-flex h-full items-center pl-4 md:pl-6"
key={link.href}
>
{link.name}
</Link>
))}
</nav>
<div className="divide-x">
<div className="flex flex-col gap-y-6 divide-x-0 divide-y md:flex-row md:divide-x md:divide-y-0">
<Icons.dd_logo className="h-32 w-40" />
<p className="max-w-xs pl-6 text-start">
<p className="max-w-xs py-6 pl-6 text-start md:py-0">
Developer DAO Foundation © 2023 Website content licensed under&emsp;
<Link href="https://creativecommons.org/licenses/by-nc/4.0/" className="underline">
CC BY-NC 4.0
Expand Down
23 changes: 21 additions & 2 deletions packages/ui/src/components/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface DDIcons {
clarity_blocks: (props: LucideProps) => JSX.Element;
dd_logo: (props: LucideProps) => JSX.Element;
hamburger_menu: (props: LucideProps) => JSX.Element;
hamburger_menu_close: (props: LucideProps) => JSX.Element;
checkmark: (props: LucideProps) => JSX.Element;
in_progress: (props: LucideProps) => JSX.Element;
nft_mint: (props: LucideProps) => JSX.Element;
Expand Down Expand Up @@ -131,16 +132,34 @@ export const Icons: DDIcons = {
hamburger_menu: (props: LucideProps) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
viewBox="0 0 20 20"
{...props}
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75H12a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 012 10z"
/>
</svg>
),
hamburger_menu_close: (props: LucideProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="32"
height="31"
viewBox="0 0 32 31"
fill="none"
>
<path
d="M5.00001 2.69135L27.6154 28.1454"
stroke="#44AF96"
strokeWidth="4"
strokeLinecap="round"
/>
<path d="M2 15.0581L29.0133 14.4987" stroke="#44AF96" strokeWidth="4" strokeLinecap="round" />
</svg>
),
checkmark: (props: LucideProps) => (
Expand Down
18 changes: 5 additions & 13 deletions packages/ui/src/components/SideBar/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import NextLink from "next/link";
import type { FC } from "react";

import { Icons } from "../Icons";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";

interface SubNavItem {
name: string;
Expand All @@ -23,21 +23,13 @@ export interface SideBarProps {
const SideBar: FC<SideBarProps> = ({ menus }) => {
return (
<Sheet>
<SheetTrigger asChild className="text-white">
<SheetTrigger asChild className="text-[#44AF96]">
<Icons.hamburger_menu className="h-8 w-8" />
</SheetTrigger>
<SheetContent position="left" className="w-full max-w-sm">
<SheetHeader className="text-left">
<SheetTitle className="inline-flex gap-1">
<Icons.dd_logo /> academy-logo
</SheetTitle>
</SheetHeader>
<div className="text-swagger gap-4 pt-10">
<SheetContent position="left" className="w-full bg-black pt-12 md:max-w-sm">
<div className="gap-4 pt-12">
{menus.map((menu, key) => (
<div
key={key}
className=" mb-3 rounded-lg bg-gray-50 px-3 py-4 text-left font-normal transition duration-200 hover:bg-gray-200 focus:bg-gray-300"
>
<div key={key} className="mobile-nav-item">
<NextLink href={menu.href} legacyBehavior passHref>
{menu.name}
</NextLink>
Expand Down
Loading

1 comment on commit 3cb32be

@vercel
Copy link

@vercel vercel bot commented on 3cb32be Nov 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

academy-turbo – ./apps/academy

academy-turbo-git-main-developdao.vercel.app
academy-turbo-developdao.vercel.app
academy-turbo-academy.vercel.app

Please sign in to comment.