Merge branch 'feat/breadcrumb'

Bland-UI · Sep 15, 2024 · 12992a1 · 12992a1
2 parents 29964a2 + 231fd8f
commit 12992a1
Show file tree

Hide file tree

Showing 35 changed files with 886 additions and 63 deletions.
diff --git a/.vscode/blandui.code-workspace b/.vscode/blandui.code-workspace
@@ -4,6 +4,10 @@
 			"name": "ROOT",
 			"path": "../"
 		},
+		{
+			"name": "apps/blandui-landing",
+			"path": "../apps/blandui-landing"
+		},
 		{
 			"name": "apps/storybook-react",
 			"path": "../apps/storybook-react"

diff --git a/apps/blandui-landing/.eslintrc.json b/apps/blandui-landing/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "eslint-config-lludol"],
+  "rules": {
+	"react-hooks/exhaustive-deps": "error",
+	"require-jsdoc": "off",
+	"no-unused-vars": "off",
+	"@typescript-eslint/no-unused-vars": "error",
+	"max-len": "off",
+	"@typescript-eslint/no-explicit-any": "warn"
+  }
+}
diff --git a/apps/blandui-landing/.gitignore b/apps/blandui-landing/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/blandui-landing/README.md b/apps/blandui-landing/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/apps/blandui-landing/app/components/Footer.tsx b/apps/blandui-landing/app/components/Footer.tsx
@@ -0,0 +1,63 @@
+import { Button, Typography } from '@blandui/blandui-react';
+import { SiFigma, SiGithub } from '@icons-pack/react-simple-icons';
+import { FileText } from 'lucide-react';
+import LogoWhite from './LogoWhite';
+
+const Footer = () => (
+	<footer className="py-7xl bg-surface-inverse">
+		<div className="w-11/12 sm:w-8/12 m-auto flex flex-col items-center gap-3xl text-white">
+			<LogoWhite/>
+
+			<div className="flex flex-col gap-md text-center">
+				<Typography type="heading" size='md' className='block sm:hidden font-semibold'>
+					A UI kit for those that want to be in control.
+				</Typography>
+				<Typography type="heading" size='lg' className='hidden sm:block font-semibold'>
+					A UI kit for those that want <br/>
+					to be in control.
+				</Typography>
+
+				<Typography type="body" size='md' className='block sm:hidden font-semibold'>
+					Bland strips down to the basics, giving you core components to shape as you see fit. We skip the frills and focus on the essentials, so you can build your vision from the ground up.
+				</Typography>
+				<Typography type="body" size='lg' className='hidden sm:block'>
+					Bland strips down to the basics, giving you core components to shape as <br/>
+					you see fit. We skip the frills and focus on the essentials, so you can <br/>
+					build your vision from the ground up.
+				</Typography>
+			</div>
+
+			<div className="flex gap-md">
+				<Button color='brand' variant='secondary' size="md">
+					<SiFigma size="1.25rem"/>
+					Get This UI Kit
+				</Button>
+				<Button color='brand' variant='secondary' size="md">
+					<FileText size="1.25rem"/>
+					View Docs
+				</Button>
+			</div>
+
+			<div className="flex sm:flex-row flex-col gap-3xl sm:gap-2xl">
+				<div className="flex gap-xl sm:gap-2xl">
+					<a href="#">Docs</a>
+					<a href="#">Components</a>
+					<a href="#">Playground</a>
+					<a href="#">About</a>
+				</div>
+
+				<div className="flex justify-center gap-xl sm:gap-2xl">
+					<a href="#">
+						<SiFigma size="1.5rem"/>
+					</a>
+
+					<a href="#">
+						<SiGithub size="1.5rem"/>
+					</a>
+				</div>
+			</div>
+		</div>
+	</footer>
+);
+
+export default Footer;
diff --git a/apps/blandui-landing/app/components/Header.tsx b/apps/blandui-landing/app/components/Header.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { Button } from '@blandui/blandui-react';
+import { SiFigma, SiGithub, SiX } from '@icons-pack/react-simple-icons';
+import {
+	Component, FileText, Info, Menu,
+} from 'lucide-react';
+import Logo from './Logo';
+
+const Header = () => (
+	<header className="w-full py-sm border-b-md border-b-bold border-dashed">
+		<div className="w-11/12 sm:w-8/12 m-auto flex sm:gap-lg justify-between sm:justify-center items-center">
+			<div className="flex gap-md items-center">
+				<div className="p-xs flex sm:hidden items-center justify-center bg-surface-3 rounded-sm text-bold">
+					<Menu size="1.25rem"/>
+				</div>
+				<Logo />
+			</div>
+
+			<div className="hidden sm:flex gap-lg">
+				<Button type="button" variant="secondary" color='brand'>
+					<FileText size="1.25rem"/>
+					Docs
+				</Button>
+
+				<Button type="button" variant="secondary" color='brand'>
+					<Component size="1.25rem"/>
+					Components
+				</Button>
+			</div>
+
+			<div className="hidden sm:block flex-1"></div>
+
+			<div className="hidden sm:flex gap-lg">
+				<Button type="button" variant="secondary" color='brand'>
+					<Info size="1.25rem"/>
+					About
+				</Button>
+
+				<Button type="button" variant="primary" color='brand'>
+					View
+					<SiFigma size="1.25rem"/>
+				</Button>
+			</div>
+
+			<div className="flex gap-xl sm:gap-lg">
+				<SiX size="1.5rem" />
+				<SiGithub size="1.5rem"/>
+			</div>
+		</div>
+	</header>
+);
+
+export default Header;
diff --git a/apps/blandui-landing/app/components/Logo.tsx b/apps/blandui-landing/app/components/Logo.tsx
@@ -0,0 +1,7 @@
+const Logo = () => (
+	<svg width="90" height="40" viewBox="0 0 90 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M14.518 18.556C16.1047 18.8507 17.3853 19.4287 18.36 20.29C19.3573 21.1287 19.856 22.4207 19.856 24.166C19.856 26.6367 18.972 28.3933 17.204 29.436C15.436 30.4787 12.9767 31 9.826 31H2.482V7.472H8.908C12.1267 7.472 14.586 7.948 16.286 8.9C17.986 9.852 18.836 11.382 18.836 13.49C18.836 14.8727 18.4167 15.9947 17.578 16.856C16.762 17.6947 15.742 18.2613 14.518 18.556ZM7.48 11.076V17.026H9.928C11.152 17.026 12.0927 16.7767 12.75 16.278C13.4073 15.7567 13.736 14.9747 13.736 13.932C13.736 12.8893 13.3847 12.1527 12.682 11.722C11.9793 11.2913 10.88 11.076 9.384 11.076H7.48ZM9.86 27.294C11.424 27.294 12.614 27.0673 13.43 26.614C14.246 26.138 14.654 25.254 14.654 23.962C14.654 21.6047 13.2033 20.426 10.302 20.426H7.48V27.294H9.86ZM27.786 31.544C26.3126 31.544 25.168 31.1247 24.352 30.286C23.536 29.4247 23.128 28.212 23.128 26.648V5.806L27.956 5.262V26.512C27.956 27.3053 28.2846 27.702 28.942 27.702C29.3046 27.702 29.622 27.634 29.894 27.498L30.88 30.932C29.9506 31.34 28.9193 31.544 27.786 31.544ZM46.9625 26.002C46.9625 26.7047 47.0645 27.226 47.2685 27.566C47.4725 27.8833 47.8125 28.1213 48.2885 28.28L47.2685 31.476C46.2032 31.3853 45.3305 31.136 44.6505 30.728C43.9932 30.32 43.4832 29.6853 43.1205 28.824C41.9418 30.6373 40.1398 31.544 37.7145 31.544C35.9238 31.544 34.4958 31.034 33.4305 30.014C32.3878 28.9713 31.8665 27.6227 31.8665 25.968C31.8665 23.996 32.5805 22.4887 34.0085 21.446C35.4365 20.4033 37.4878 19.882 40.1625 19.882H42.2365V18.998C42.2365 17.8873 41.9872 17.1167 41.4885 16.686C40.9898 16.2553 40.1625 16.04 39.0065 16.04C37.7372 16.04 36.1505 16.3573 34.2465 16.992L33.1585 13.762C35.4025 12.878 37.6238 12.436 39.8225 12.436C42.2705 12.436 44.0725 12.9687 45.2285 14.034C46.3845 15.0767 46.9625 16.6407 46.9625 18.726V26.002ZM39.0405 28.076C40.4005 28.076 41.4658 27.4073 42.2365 26.07V22.636H40.6385C38.0318 22.636 36.7285 23.6107 36.7285 25.56C36.7285 26.3533 36.9212 26.9767 37.3065 27.43C37.7145 27.8607 38.2925 28.076 39.0405 28.076ZM61.8503 12.436C63.4369 12.436 64.6723 12.9233 65.5563 13.898C66.4403 14.85 66.8822 16.176 66.8822 17.876V31H62.0543V18.692C62.0543 17.7173 61.8843 17.0373 61.5443 16.652C61.2269 16.244 60.7396 16.04 60.0823 16.04C59.4023 16.04 58.7789 16.2553 58.2123 16.686C57.6683 17.094 57.1356 17.7173 56.6143 18.556V31H51.7863V12.98H55.9683L56.3423 15.258C57.0903 14.3287 57.9063 13.626 58.7903 13.15C59.6969 12.674 60.7169 12.436 61.8503 12.436ZM87.0817 5.806V31H82.8317L82.5597 28.79C81.2904 30.626 79.5677 31.544 77.3917 31.544C75.1704 31.544 73.4704 30.694 72.2917 28.994C71.1357 27.2713 70.5577 24.9367 70.5577 21.99C70.5577 20.1313 70.8524 18.488 71.4417 17.06C72.0537 15.6093 72.915 14.476 74.0257 13.66C75.1364 12.844 76.417 12.436 77.8677 12.436C79.545 12.436 81.007 13.0367 82.2537 14.238V5.262L87.0817 5.806ZM78.8197 27.94C79.5224 27.94 80.1457 27.77 80.6897 27.43C81.2337 27.0673 81.755 26.512 82.2537 25.764V17.706C81.7777 17.1393 81.2904 16.72 80.7917 16.448C80.3157 16.1533 79.7604 16.006 79.1257 16.006C78.015 16.006 77.1424 16.4933 76.5077 17.468C75.8957 18.4427 75.5897 19.95 75.5897 21.99C75.5897 24.1433 75.8617 25.6733 76.4057 26.58C76.9724 27.4867 77.777 27.94 78.8197 27.94Z" fill="black"/>
+	</svg>
+);
+
+export default Logo;
diff --git a/apps/blandui-landing/app/components/LogoWhite.tsx b/apps/blandui-landing/app/components/LogoWhite.tsx
@@ -0,0 +1,7 @@
+const LogoWhite = () => (
+	<svg width="90" height="40" viewBox="0 0 90 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M14.518 18.556C16.1047 18.8507 17.3853 19.4287 18.36 20.29C19.3573 21.1287 19.856 22.4207 19.856 24.166C19.856 26.6367 18.972 28.3933 17.204 29.436C15.436 30.4787 12.9767 31 9.826 31H2.482V7.472H8.908C12.1267 7.472 14.586 7.948 16.286 8.9C17.986 9.852 18.836 11.382 18.836 13.49C18.836 14.8727 18.4167 15.9947 17.578 16.856C16.762 17.6947 15.742 18.2613 14.518 18.556ZM7.48 11.076V17.026H9.928C11.152 17.026 12.0927 16.7767 12.75 16.278C13.4073 15.7567 13.736 14.9747 13.736 13.932C13.736 12.8893 13.3847 12.1527 12.682 11.722C11.9793 11.2913 10.88 11.076 9.384 11.076H7.48ZM9.86 27.294C11.424 27.294 12.614 27.0673 13.43 26.614C14.246 26.138 14.654 25.254 14.654 23.962C14.654 21.6047 13.2033 20.426 10.302 20.426H7.48V27.294H9.86ZM27.786 31.544C26.3126 31.544 25.168 31.1247 24.352 30.286C23.536 29.4247 23.128 28.212 23.128 26.648V5.806L27.956 5.262V26.512C27.956 27.3053 28.2846 27.702 28.942 27.702C29.3046 27.702 29.622 27.634 29.894 27.498L30.88 30.932C29.9506 31.34 28.9193 31.544 27.786 31.544ZM46.9625 26.002C46.9625 26.7047 47.0645 27.226 47.2685 27.566C47.4725 27.8833 47.8125 28.1213 48.2885 28.28L47.2685 31.476C46.2032 31.3853 45.3305 31.136 44.6505 30.728C43.9932 30.32 43.4832 29.6853 43.1205 28.824C41.9418 30.6373 40.1398 31.544 37.7145 31.544C35.9238 31.544 34.4958 31.034 33.4305 30.014C32.3878 28.9713 31.8665 27.6227 31.8665 25.968C31.8665 23.996 32.5805 22.4887 34.0085 21.446C35.4365 20.4033 37.4878 19.882 40.1625 19.882H42.2365V18.998C42.2365 17.8873 41.9872 17.1167 41.4885 16.686C40.9898 16.2553 40.1625 16.04 39.0065 16.04C37.7372 16.04 36.1505 16.3573 34.2465 16.992L33.1585 13.762C35.4025 12.878 37.6238 12.436 39.8225 12.436C42.2705 12.436 44.0725 12.9687 45.2285 14.034C46.3845 15.0767 46.9625 16.6407 46.9625 18.726V26.002ZM39.0405 28.076C40.4005 28.076 41.4658 27.4073 42.2365 26.07V22.636H40.6385C38.0318 22.636 36.7285 23.6107 36.7285 25.56C36.7285 26.3533 36.9212 26.9767 37.3065 27.43C37.7145 27.8607 38.2925 28.076 39.0405 28.076ZM61.8503 12.436C63.4369 12.436 64.6723 12.9233 65.5563 13.898C66.4403 14.85 66.8822 16.176 66.8822 17.876V31H62.0543V18.692C62.0543 17.7173 61.8843 17.0373 61.5443 16.652C61.2269 16.244 60.7396 16.04 60.0823 16.04C59.4023 16.04 58.7789 16.2553 58.2123 16.686C57.6683 17.094 57.1356 17.7173 56.6143 18.556V31H51.7863V12.98H55.9683L56.3423 15.258C57.0903 14.3287 57.9063 13.626 58.7903 13.15C59.6969 12.674 60.7169 12.436 61.8503 12.436ZM87.0817 5.806V31H82.8317L82.5597 28.79C81.2904 30.626 79.5677 31.544 77.3917 31.544C75.1704 31.544 73.4704 30.694 72.2917 28.994C71.1357 27.2713 70.5577 24.9367 70.5577 21.99C70.5577 20.1313 70.8524 18.488 71.4417 17.06C72.0537 15.6093 72.915 14.476 74.0257 13.66C75.1364 12.844 76.417 12.436 77.8677 12.436C79.545 12.436 81.007 13.0367 82.2537 14.238V5.262L87.0817 5.806ZM78.8197 27.94C79.5224 27.94 80.1457 27.77 80.6897 27.43C81.2337 27.0673 81.755 26.512 82.2537 25.764V17.706C81.7777 17.1393 81.2904 16.72 80.7917 16.448C80.3157 16.1533 79.7604 16.006 79.1257 16.006C78.015 16.006 77.1424 16.4933 76.5077 17.468C75.8957 18.4427 75.5897 19.95 75.5897 21.99C75.5897 24.1433 75.8617 25.6733 76.4057 26.58C76.9724 27.4867 77.777 27.94 78.8197 27.94Z" fill="white"/>
+	</svg>
+);
+
+export default LogoWhite;
diff --git a/apps/blandui-landing/app/components/Section1.tsx b/apps/blandui-landing/app/components/Section1.tsx
@@ -0,0 +1,53 @@
+import { Button, Typography } from '@blandui/blandui-react';
+import { SiFigma } from '@icons-pack/react-simple-icons';
+import { ExternalLink } from 'lucide-react';
+
+const Section1 = () => (
+	<section className="w-11/12 sm:w-8/12 m-auto py-4xl sw:py-2xl flex gap-xl sm:gap-lg flex-col sm:flex-row">
+		<div className="flex flex-col gap-xl flex-[0.5]">
+			<Typography type="heading" size='md' className="font-semibold sm:hidden block">
+				Basic building block for your ideas.
+			</Typography>
+			<Typography type="display" size='sm' className="font-semibold hidden sm:block">
+				Basic building block for your ideas.
+			</Typography>
+
+			<Typography type="body" size='md' className="sm:hidden block">
+				Bland gives you core components to bring your ideas to life, skipping the fancy stuff to focus on the essentials. Our components let you design freely, making sure you are in control the whole time.
+			</Typography>
+			<Typography type="body" size='lg' className="hidden sm:block">
+				Bland gives you core components to bring your ideas to life, skipping the fancy stuff to focus on the essentials. Our components let you design freely, making sure you are in control the whole time.
+			</Typography>
+
+			<div className="flex gap-md">
+				<Button color='brand' variant='primary' size="md">
+					<SiFigma size="1.25rem"/>
+					Get This UI Kit
+				</Button>
+
+				<Button color='brand' variant='secondary' size="md">
+					View Docs
+				</Button>
+			</div>
+		</div>
+
+		<div className="flex flex-col justify-center gap-md flex-[0.5]">
+			<div className="p-2xl bg-surface-2 rounded-lg gap-xl">
+				<div className="flex gap-2xl items-center">
+					<Button color='brand' variant='primary' size="md">
+						Click Me
+					</Button>
+				</div>
+			</div>
+
+			<div className="hidden sm:flex justify-center">
+				<Button color='brand' variant='primary' size="md" className="shadow-brand-far-subtle">
+						Explore in Playground
+					<ExternalLink size="1.25rem"/>
+				</Button>
+			</div>
+		</div>
+	</section>
+);
+
+export default Section1;
diff --git a/apps/blandui-landing/app/components/Section2.tsx b/apps/blandui-landing/app/components/Section2.tsx
@@ -0,0 +1,69 @@
+import { Typography } from '@blandui/blandui-react';
+import { Component } from 'lucide-react';
+
+const coreFeatures: Array<{ title: string, description: string }> = [
+	{
+		title:       'Barebones components',
+		description: 'Components are simplified to the basics, allowing you to style them to fit your needs.',
+	},
+	{
+		title:       'The essentials',
+		description: 'Everything you need to get started: color, typography, spacing, icons, effects...',
+	},
+	{
+		title:       'Variables',
+		description: 'Use variables in Figma to gain even greater control over your design tokens.',
+	},
+	{
+		title:       'Responsive',
+		description: 'Designed with Autolayout to adapt, whether you enlarge or shrink within reasonable limits.',
+	},
+	{
+		title:       'Variants and properties',
+		description: 'Components come with variants and properties to accommodate a wide range of use cases.',
+	},
+	{
+		title:       'Open-source icons',
+		description: 'Makes use of the MIT-licensed Lucide icons, ensuring open-source flexibility.',
+	},
+	{
+		title:       'Constantly updated',
+		description: 'Components and it’s documentation will keep getting better with every update.',
+	},
+	{
+		title:       'Support',
+		description: 'Reach out anytime to give feedback, ask for assistance, or make a request.',
+	},
+];
+
+const Section2 = () => (
+	<section className="w-11/12 sm:w-8/12 m-auto py-4xl sm:py-7xl flex flex-col gap-4xl justify-center">
+		<div className="flex flex-col gap-md">
+			<Typography type="heading" size="md" className="font-semibold text-center">
+				Core features
+			</Typography>
+			<Typography type="body" size="md" className="text-center">
+				Made to address your design needs from the ground up.<br/>
+				Bland was built with all these in mind.
+			</Typography>
+		</div>
+
+		<div className="flex gap-md flex-col sm:grid sm:grid-cols-4 sm:gap-lg">
+			{ coreFeatures.map(({ title, description }) => (
+				<div key={title} className="flex flex-col gap-lg bg-surface-3 p-2xl border-sm border-bold rounded-lg">
+					<div className="w-fit flex items-center justify-center p-sm bg-surface-4 border-sm border-bold rounded-md text-subtle">
+						<Component size="1.25rem" />
+					</div>
+					<Typography type="body" size="lg" weight='medium'>
+						{ title }
+					</Typography>
+					<Typography type="body" size="md">
+						{ description }
+					</Typography>
+				</div>
+			)) }
+		</div>
+	</section>
+);
+
+export default Section2;
diff --git a/apps/blandui-landing/app/components/Section3.tsx b/apps/blandui-landing/app/components/Section3.tsx
@@ -0,0 +1,15 @@
+import { Typography } from '@blandui/blandui-react';
+
+const Section3 = () => (
+	<section className="w-11/12 sm:w-8/12 m-auto py-4xl sm:py-7xl flex flex-col gap-xl">
+		<Typography type="heading" size="md" className="font-semibold text-center">
+			Interact with these templates
+		</Typography>
+
+		<Typography type="body" size="lg" className="font-semibold text-center">
+			Coming soon...
+		</Typography>
+	</section>
+);
+
+export default Section3;