Skip to content
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

feat(landing-page): update landing page #74

Merged
merged 2 commits into from
Sep 21, 2024
Merged

feat(landing-page): update landing page #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22c1715
feat(landing-page): update landing page
ruru-m07 Sep 21, 2024
d522e20
fix(UI): fix landing page layout bugs
ruru-m07 Sep 21, 2024
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
78 changes: 73 additions & 5 deletions apps/www/app/(home)/page.tsx → apps/www/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import Hero from "../../components/hero";
import Hero from "@/components/hero";
import {
Heart,
LayoutTemplate,
LibraryBig,
Palette,
Plus,
Expand All @@ -13,10 +15,11 @@ import { cn } from "@/utils/cn";
import { File, Folder, Files } from "fumadocs-ui/components/files";
import { Spinner } from "ruru-ui/components/spinner";
import dynamic from "next/dynamic";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import { GitHubLogoIcon, HeartIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Button } from "ruru-ui/components/button";
import { Footer } from "@/components/footer";
import ContributorCounter from "@/components/contributor-count";
import Image from "next/image";

const CodeBlockServer = dynamic(
() => import("@/components/ui/code-block-server"),
Expand Down Expand Up @@ -81,9 +84,9 @@ export default function App() {
return (
<>
<main>
<div className="dark:bg-[#050505]">
<div>
<Hero />
<div className="border w-[80%] m-auto">
<div className="border w-[80%] m-auto z-10 bg-[#050505] mt-5">
<div
className="relative p-6 text-center text-3xl font-bold py-14"
style={{
Expand Down Expand Up @@ -360,6 +363,71 @@ export default function App() {

<ShapratorHorizontal />

<div className="flex flex-col items-center justify-center py-10">
<Heart size={36} className="mb-3" />
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
Made Possible by You.
</h3>
<p className="text-sm text-muted-foreground my-3">
Ruru UI is 100% powered by passion and open source community.
</p>

<ContributorCounter repoOwner={"ruru-m07"} repoName={"ruru-ui"} />

<p className="text-sm text-muted-foreground my-3">
Some of our best contributors.
</p>
</div>

<ShapratorHorizontal />

<div className="flex">
<Link href={"/theme"} className="w-1/2 border-r">
<div className="z-10 p-4">
<div className="flex items-center ml-5 mt-5">
<Palette size={20} strokeWidth={1.5} className="mr-2" />
<h2 className="text-base font-medium">Theming</h2>
</div>
<p className="text-muted-foreground text-xs ml-5 mt-2">
Customize theme your components.
</p>
</div>
<div>
<Image
src="/assets/theme.svg"
alt="theme"
width={715}
height={409}
/>
</div>
</Link>
<Link href={"/blocks"} className="w-1/2 bg-[#080808]">
<div className="z-10 p-4">
<div className="flex items-center ml-5 mt-5">
<LayoutTemplate
size={20}
strokeWidth={1.5}
className="mr-2"
/>
<h2 className="text-base font-medium">Blocks</h2>
</div>
<p className="text-muted-foreground text-xs ml-5 mt-2">
The Blocks To Build Your App Faster
</p>
</div>
<div>
<Image
src="/assets/blocks.svg"
alt="blocks"
width={715}
height={409}
/>
</div>
</Link>
</div>

<ShapratorHorizontal />

<div
className="relative p-6 text-center text-3xl font-bold py-14"
style={{
Expand Down
58 changes: 58 additions & 0 deletions apps/www/components/contributor-count.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import type { HTMLAttributes } from "react";
import Image from "next/image";
import { cn } from "@/utils/cn";
import { fetchContributors } from "@/utils/get-contributors";

export interface ContributorCounterProps
extends HTMLAttributes<HTMLDivElement> {
repoOwner: string;
repoName: string;
displayCount?: number;
}

export default async function ContributorCounter({
repoOwner,
repoName,
displayCount = 20,
...props
}: ContributorCounterProps): Promise<React.ReactElement> {
const contributors = await fetchContributors(repoOwner, repoName);
const topContributors = contributors
.filter((contributor) => contributor.login !== "turbobot-temp")
.slice(0, displayCount);

return (
<div
{...props}
className={cn("flex flex-col items-center gap-4", props.className)}
>
<div className="flex flex-row flex-wrap items-center justify-center md:pe-4">
{topContributors.map((contributor, i) => (
<a
key={contributor.login}
href={`https://github.com/${contributor.login}`}
rel="noreferrer noopener"
target="_blank"
className="size-10 overflow-hidden rounded-full border-4 border-[#050505] bg-fd-background md:-mr-4 md:size-12"
style={{
zIndex: topContributors.length - i,
}}
>
<Image
src={contributor.avatar_url}
alt={`${contributor.login}'s avatar`}
unoptimized
width={48}
height={48}
/>
</a>
))}
{displayCount < contributors.length ? (
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
+{contributors.length - displayCount}
</div>
) : null}
</div>
</div>
);
}
99 changes: 72 additions & 27 deletions apps/www/components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,68 @@ import { GitHubLogoIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Button, buttonVariants } from "ruru-ui/components/button";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { cn } from "@/utils/utils";

const Hero = () => {
const router = useRouter();

return (
<main className="flex items-center justify-center bg-[url('/assets/rings-bg.svg')] w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center">
<main className="flex items-center justify-center w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center bg-[#05050541]">
<Image
className="absolute top-0 ring-0 -z-10"
src={"/assets/background_dots.svg"}
alt="bg dots"
width={1508}
height={904}
/>
<Image
className="absolute -top-3 ring-0 -z-10"
src={"/assets/shaders.svg"}
alt="bg dots"
width={1508}
height={1114}
/>
<Image
className="absolute top-2 left-2 -z-10"
src={"/assets/glowing_logo.svg"}
alt="bg dots"
width={100}
height={100}
/>
<div
aria-hidden="true"
className="bg-[radial-gradient(_50%_50%_at_50%_50%,_#fff_0,_hsla(0,_0%,_100%,_0)_100%_)] opacity-[0.06] rotate-45 w-full -top-[80px] max-w-[1800px]"
className="opacity-[0.06] rotate-45 w-full -top-[80px] max-w-[1800px]"
></div>
<div className="flex flex-col items-center max-w-[800px] px-[16px] py-[0] -mt-72">
<div className="flex flex-col items-center max-w-[800px] px-[16px] -mt-72 z-10">
<h1 className="text-4xl font-bold text-center space-x-2 ">
<span
className="[box-shadow:0_0_0_2px_#666] px-[2px] py-[0] relative inline-flex mr-2"
style={{ letterSpacing: "-2px" }}
className="[box-shadow:0_0_0_1.5px_#444444] px-[2px] py-[0] relative inline-flex mr-2"
style={{ letterSpacing: "1px" }}
>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ top: "-3px", left: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ top: "-4px", left: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ right: "-3px", top: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ right: "-4px", top: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", left: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-4px", left: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", right: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-4px", right: "-4px" }}
></div>
<div className="words_width_animat inline-block w-[fit-content] tracking-[-1px] leading-[16px] rounded-[3px] px-[4px] py-px text-[12px] bg-[#666] absolute -top-[28px] left-2/4 -translate-x-1/2">
<div className="words_width_animat font-medium inline-block w-[fit-content] tracking-[-1px] leading-[16px] rounded-[3px] px-[5px] py-[2px] text-[10px] bg-[#4d4d4d] absolute -top-[28px] left-2/4 -translate-x-1/2">
330 x 56
</div>
Craft Seamless
<span className="words_comma__9_pb3">,</span>
</span>
<span>
<span style={{ letterSpacing: "1px" }}>
<text className="stroke-[#f1f1f1] stroke-[0.2px]">
{" "}
<span className="word_large_text text-[3rem] leading-none">
Expand All @@ -58,7 +81,10 @@ const Hero = () => {
</span>
<br />
<div className="my-7" />
<span className="px-[2px] py-[0] relative inline-flex">
<span
className="px-[2px] py-[0] relative inline-flex"
style={{ letterSpacing: "1px" }}
>
<div className="words_width_lens_body inline-block justify-center items-center tracking-[-1px] leading-[16px] rounded-[50%] border-[solid] border-[1px] border-[#2e2e2e] text-[12px] absolute -top-[15px] left-[28%] -translate-x-1/2">
<div
className="m-[3px] w-[63px] h-[63px] rounded-[50%] bg-[rgba(255,_255,_255,_0.2)] [box-shadow:0_4px_30px_rgba(0,_0,_0,_0.1)] backdrop-filter backdrop-blur-[1.2px]"
Expand All @@ -68,26 +94,34 @@ const Hero = () => {
</div>
Customizable
</span>
<span className="mx-52" />
<span className="relative words_interfaces after:content-[''] after:absolute after:h-[60px] after:w-[6px] after:-top-[17px] after:-left-[10px] after:rounded-full after:bg-[#f0f0f0] before:content-[''] before:absolute before:h-[6px] before:w-[205px] before:-top-[5px] before:-left-[20px] before:rounded-full before:bg-[#f0f0f0] ">
<span className="w-5" />
<span
className={cn(
"relative words_interfaces",
"after:content-[''] after:absolute after:h-[60px] after:w-[6px] after:-top-[17px] after:-left-[10px] after:rounded-full after:bg-[#f0f0f0]",
"before:content-[''] before:absolute before:h-[6px] before:w-[205px] before:-top-[1px] before:-left-[25px] before:rounded-full before:bg-[#f0f0f0] ",
)}
style={{ letterSpacing: "1px" }}
>
Interfaces
</span>
<span>with</span>
<span className="relative underline-clip after:content-[''] after:absolute after:top-[95%] after:w-[150%] after:[aspect-ratio:5_/_1] after:left-2/4 after:-translate-x-1/2 after:translate-y-[0] after:rounded-[50%] after:border-[2px] after:border-[solid] after:border-[hsl(0,0%,90%)] after:[clip-path:polygon(0_0,_50%_50%,_100%_0)]">
<span style={{ letterSpacing: "1px" }}>with</span>
<span
className={cn(
"relative underline-clip",
"after:content-[''] after:absolute after:top-[95%] after:w-[150%] after:[aspect-ratio:5_/_1] after:left-2/4 after:-translate-x-1/2 after:translate-y-[0] after:rounded-[50%] after:border-[2px] after:border-[solid] after:border-[hsl(0,0%,90%)] after:[clip-path:polygon(0_0,_50%_50%,_100%_0)]",
)}
style={{ letterSpacing: "1px" }}
>
Ruru UI
</span>
</h1>
<p className="text-muted-foreground text-lg mx-20 mt-6 mb-6 text-center ">
<p className="text-muted-foreground text-lg mx-20 mt-9 mb-9 text-center ">
the ultimate design system and UI library for creating seamless,
beautiful, and highly customizable user interfaces.
</p>
<div className="flex space-x-3">
<div className="flex space-x-3 mt-2">
<Button onClick={() => router.push("/docs")}>Get Started</Button>
{/* <Button variant={"secondary"}>
<Link target="_blank" className="flex items-center" href={"https://github.com/ruru-m07/ruru-ui"}>
<GitHubLogoIcon className="mr-2" /> Give a star
</Link>
</Button> */}
<Button
onClick={() =>
window.open("https://github.com/ruru-m07/ruru-ui", "_blank")
Expand All @@ -97,6 +131,17 @@ const Hero = () => {
<GitHubLogoIcon className="mr-2" /> Give a star
</Button>
</div>
<div className="fixed h-[50px] border rounded-full mt-10 flex justify-around items-center px-2 top-0 backdrop-blur-xl bg-primary-foreground/35">
{["docs", "blocks", "theme", "sponsors"].map((i) => (
<Link
key={i}
href={`/${i}`}
className="text-muted-foreground hover:text-primary text-sm hover:border hover:border-border border border-transparent hover:bg-secondary/55 rounded-full py-1 px-4"
>
{i.charAt(0).toUpperCase() + i.slice(1)}
</Link>
))}
</div>
</div>
</main>
);
Expand Down
Loading