Skip to content
This repository was archived by the owner on Dec 10, 2024. It is now read-only.

Commit 579886c

Browse files
saeidexsaeidex
committed
add: Hero section
1 parent 154118e commit 579886c

File tree

18 files changed

+178
-38
lines changed

18 files changed

+178
-38
lines changed

‎apps/nextjs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@ubus/api": "workspace:*",
2424
"@ubus/auth": "workspace:*",
2525
"@ubus/db": "workspace:*",
26+
"@ubus/hooks": "workspace:*",
2627
"@ubus/ui": "workspace:*",
2728
"@ubus/validators": "workspace:*",
2829
"geist": "^1.3.1",

‎apps/nextjs/public/hero-map.svg

Lines changed: 9 additions & 0 deletions
Loading

‎apps/nextjs/public/t3-icon.svg

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎apps/nextjs/public/ubus-dark.svg

Lines changed: 1 addition & 1 deletion
Loading

‎apps/nextjs/public/ubus.svg

Lines changed: 1 addition & 1 deletion
Loading

‎apps/nextjs/src/app/(landing)/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from "react";
22

3+
import { Footer } from "../_components/footer";
34
import { Navbar } from "../_components/navbar";
45

56
const LandingPageLayout = (props: { children: React.ReactNode }) => {
67
return (
78
<>
89
<Navbar />
9-
<main className="container">{props.children}</main>
10+
<main>{props.children}</main>
11+
<Footer />
1012
</>
1113
);
1214
};

‎apps/nextjs/src/app/(landing)/page.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { Hero } from "../_components/hero";
2+
13
export default function HomePage() {
2-
return <div>Hello, World!</div>;
4+
return (
5+
<>
6+
<Hero />
7+
</>
8+
);
39
}

‎apps/nextjs/src/app/_components/footer.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const Footer = () => {
2+
return <div>Footer</div>;
3+
};

‎apps/nextjs/src/app/_components/hero.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
6+
import { cn } from "@ubus/ui";
7+
import { Button } from "@ubus/ui/button";
8+
import { MouseIcon, RightArrowIcon } from "@ubus/ui/icons";
9+
10+
export const Hero = ({ className }: { className?: string }) => {
11+
return (
12+
<section
13+
className={cn(
14+
"container grid min-h-[calc(100dvh-6rem)] px-12 lg:h-full",
15+
className,
16+
)}
17+
>
18+
<div className="relative flex flex-col items-center justify-between lg:flex-row">
19+
<div className="flex h-full max-w-[660px] flex-col justify-center gap-8 md:h-fit md:justify-start md:gap-6 lg:h-full lg:justify-center lg:gap-8">
20+
<h1 className="max-w-[180px] text-display-small font-bold sm:text-display-medium md:max-w-full md:text-display-large lg:max-w-fit">
21+
Track. Notify. Simplify.
22+
</h1>
23+
<h3 className="text-body-large lg:text-headline-small xl:text-headline-medium">
24+
Welcome to the IUBAT Bus Tracking System. Access live bus locations,
25+
schedules, and important updates all in one place.
26+
</h3>
27+
<Link href={"/Dashboard"}>
28+
<Button variant={"withIcon"}>
29+
Track now
30+
<RightArrowIcon className="h-5 w-5" />
31+
</Button>
32+
</Link>
33+
</div>
34+
<div className="absolute right-0 top-[20%] sm:top-[22%] md:static">
35+
<Image
36+
className="w-48 sm:w-52 md:h-full md:w-full lg:min-w-[509px]"
37+
src={"hero-map.svg"}
38+
height={377}
39+
width={509}
40+
alt="map image"
41+
/>
42+
</div>
43+
</div>
44+
<div className="grid place-items-center">
45+
<div className="flex animate-bounce items-center justify-center gap-5">
46+
<MouseIcon className={"fill-on-surface"} />
47+
<span className="text-headline-small">Scroll Down</span>
48+
</div>
49+
</div>
50+
</section>
51+
);
52+
};

‎apps/nextjs/src/app/_components/navbar.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import React from "react";
44
import Image from "next/image";
55
import Link from "next/link";
66
import { usePathname } from "next/navigation";
7-
import { useTheme } from "next-themes";
87

8+
import useThemeBasedValue from "@ubus/hooks/useThemeBasedValue";
99
import { cn } from "@ubus/ui";
1010
import { Button } from "@ubus/ui/button";
1111
import { MenuIcon } from "@ubus/ui/icons";
@@ -30,16 +30,7 @@ const links: ILink[] = [
3030
];
3131

3232
export const Navbar = () => {
33-
const { theme, resolvedTheme } = useTheme();
34-
const [logoSrc, setLogoSrc] = React.useState("ubus.svg");
35-
36-
React.useEffect(() => {
37-
if (theme === "dark" || resolvedTheme === "dark") {
38-
setLogoSrc("ubus.svg");
39-
} else {
40-
setLogoSrc("ubus-dark.svg");
41-
}
42-
}, [theme, resolvedTheme]);
33+
const logoSrc = useThemeBasedValue("ubus.svg", "ubus-dark.svg");
4334

4435
return (
4536
<nav className="border-outline">

‎apps/nextjs/src/app/_components/tailwind-indicator.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { env } from "~/env";
2+
3+
export function TailwindIndicator() {
4+
if (env.NODE_ENV === "production") return null;
5+
6+
return (
7+
<div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
8+
<div className="block sm:hidden">xs</div>
9+
<div className="hidden sm:block md:hidden">sm</div>
10+
<div className="hidden md:block lg:hidden">md</div>
11+
<div className="hidden lg:block xl:hidden">lg</div>
12+
<div className="hidden xl:block 2xl:hidden">xl</div>
13+
<div className="hidden 2xl:block">2xl</div>
14+
</div>
15+
);
16+
}

‎apps/nextjs/src/app/layout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TRPCReactProvider } from "~/trpc/react";
1111
import "~/app/globals.css";
1212

1313
import { env } from "~/env";
14+
import { TailwindIndicator } from "./_components/tailwind-indicator";
1415

1516
export const poppins = Poppins({
1617
weight: ["300", "400", "500", "600", "700"],
@@ -56,16 +57,15 @@ export default function RootLayout(props: { children: React.ReactNode }) {
5657
GeistMono.variable,
5758
)}
5859
>
59-
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
60+
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
6061
<TRPCReactProvider>
61-
<div className="container h-dvh !max-w-screen-xl">
62-
{props.children}
63-
</div>
62+
<div className="container min-h-dvh">{props.children}</div>
6463
</TRPCReactProvider>
6564
<div className="absolute bottom-4 right-4">
6665
<ThemeToggle />
6766
</div>
6867
<Toaster />
68+
<TailwindIndicator />
6969
</ThemeProvider>
7070
</body>
7171
</html>

‎packages/hooks/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "@ubus/hooks"
3+
}

‎packages/hooks/useThemeBasedValue.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useEffect, useState } from "react";
2+
import { useTheme } from "next-themes";
3+
4+
const useThemeBasedValue = <T>(lightValue: T, darkValue: T): T => {
5+
const { theme, resolvedTheme } = useTheme();
6+
const [value, setValue] = useState(lightValue);
7+
8+
useEffect(() => {
9+
if (theme === "dark" || resolvedTheme === "dark") {
10+
setValue(darkValue);
11+
} else {
12+
setValue(lightValue);
13+
}
14+
}, [theme, resolvedTheme, lightValue, darkValue]);
15+
16+
return value;
17+
};
18+
19+
export default useThemeBasedValue;

‎packages/ui/src/button.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const buttonVariants = cva(
1111
variants: {
1212
variant: {
1313
primary:
14-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
14+
"bg-primary-container text-on-primary-container shadow hover:bg-primary-container/90 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90",
1515
destructive:
1616
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
1717
outline:
@@ -20,6 +20,8 @@ const buttonVariants = cva(
2020
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
2121
ghost: "hover:bg-accent hover:text-accent-foreground !px-3",
2222
link: "text-primary underline-offset-4 hover:underline",
23+
withIcon:
24+
"gap-2 bg-primary-container p-0 !pr-[22px] pl-6 text-on-primary-container shadow *:fill-on-primary-container hover:bg-primary-container/90 dark:bg-primary dark:text-primary-foreground dark:*:fill-on-primary dark:hover:bg-primary/90",
2325
},
2426
size: {
2527
sm: "h-8 px-3 text-xs",

‎packages/ui/src/icons.tsx

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const MenuIcon = ({
66
className,
77
...props
88
}: {
9-
className?: React.HtmlHTMLAttributes<"svg">;
9+
className?: string;
1010
props?: React.HtmlHTMLAttributes<"svg">;
1111
}) => (
1212
<svg
@@ -26,5 +26,49 @@ const MenuIcon = ({
2626
/>
2727
</svg>
2828
);
29+
const MouseIcon = ({
30+
className,
31+
...props
32+
}: {
33+
className?: string;
34+
props?: React.HtmlHTMLAttributes<"svg">;
35+
}) => (
36+
<svg
37+
className={cn("h-[38px] w-[28px]", className)}
38+
width="28"
39+
height="39"
40+
viewBox="0 0 28 39"
41+
fill="none"
42+
xmlns="http://www.w3.org/2000/svg"
43+
{...props}
44+
>
45+
<path
46+
fillRule="evenodd"
47+
clipRule="evenodd"
48+
d="M14 4.40437C8.20101 4.40437 3.5 9.04433 3.5 14.768V25.1316C3.5 30.8553 8.20101 35.4953 14 35.4953C19.799 35.4953 24.5 30.8553 24.5 25.1316V14.768C24.5 9.04433 19.799 4.40437 14 4.40437ZM0 14.768C0 7.13644 6.26801 0.949829 14 0.949829C21.732 0.949829 28 7.13644 28 14.768V25.1316C28 32.7632 21.732 38.9498 14 38.9498C6.26801 38.9498 0 32.7632 0 25.1316V14.768Z"
49+
/>
50+
<path
51+
fillRule="evenodd"
52+
clipRule="evenodd"
53+
d="M14 7.85893C14.9665 7.85893 15.75 8.63226 15.75 9.58621V16.4953C15.75 17.4492 14.9665 18.2226 14 18.2226C13.0335 18.2226 12.25 17.4492 12.25 16.4953V9.58621C12.25 8.63226 13.0335 7.85893 14 7.85893Z"
54+
/>
55+
</svg>
56+
);
57+
const RightArrowIcon = ({
58+
className,
59+
...props
60+
}: {
61+
className?: string;
62+
props?: React.HtmlHTMLAttributes<"svg">;
63+
}) => (
64+
<svg
65+
className={className}
66+
xmlns="http://www.w3.org/2000/svg"
67+
viewBox="0 0 448 512"
68+
{...props}
69+
>
70+
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
71+
</svg>
72+
);
2973

30-
export { MenuIcon };
74+
export { MenuIcon, MouseIcon, RightArrowIcon };

‎pnpm-lock.yaml

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tooling/tailwind/base.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ export default {
66
theme: {
77
extend: {
88
fontSize: {
9-
"heading-large": [
9+
"display-large": [
1010
"3.5625rem",
1111
{ lineHeight: "4rem", fontWeight: "400" },
1212
],
13-
"heading-medium": [
13+
"display-medium": [
1414
"2.8125rem",
1515
{ lineHeight: "3.25rem", fontWeight: "400" },
1616
],
17-
"heading-small": [
17+
"display-small": [
1818
"2.5rem",
1919
{ lineHeight: "2.75rem", fontWeight: "400" },
2020
],

0 commit comments

Comments
 (0)