diff --git a/.vscode/blandui.code-workspace b/.vscode/blandui.code-workspace index 668c498..df466ca 100644 --- 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 new file mode 100644 index 0000000..2902cf8 --- /dev/null +++ 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 new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ 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 new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ 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 new file mode 100644 index 0000000..4639c5c --- /dev/null +++ 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 = () => ( + +); + +export default Footer; diff --git a/apps/blandui-landing/app/components/Header.tsx b/apps/blandui-landing/app/components/Header.tsx new file mode 100644 index 0000000..1bfef85 --- /dev/null +++ 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 = () => ( +
+
+
+
+ +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ + +
+
+
+); + +export default Header; diff --git a/apps/blandui-landing/app/components/Logo.tsx b/apps/blandui-landing/app/components/Logo.tsx new file mode 100644 index 0000000..5729edf --- /dev/null +++ b/apps/blandui-landing/app/components/Logo.tsx @@ -0,0 +1,7 @@ +const Logo = () => ( + + + +); + +export default Logo; diff --git a/apps/blandui-landing/app/components/LogoWhite.tsx b/apps/blandui-landing/app/components/LogoWhite.tsx new file mode 100644 index 0000000..31ec8fd --- /dev/null +++ b/apps/blandui-landing/app/components/LogoWhite.tsx @@ -0,0 +1,7 @@ +const LogoWhite = () => ( + + + +); + +export default LogoWhite; diff --git a/apps/blandui-landing/app/components/Section1.tsx b/apps/blandui-landing/app/components/Section1.tsx new file mode 100644 index 0000000..37b3cc8 --- /dev/null +++ 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 = () => ( +
+
+ + Basic building block for your ideas. + + + Basic building block for your ideas. + + + + 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. + + + 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. + + +
+ + + +
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+); + +export default Section1; diff --git a/apps/blandui-landing/app/components/Section2.tsx b/apps/blandui-landing/app/components/Section2.tsx new file mode 100644 index 0000000..39e9d8e --- /dev/null +++ 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 = () => ( +
+
+ + Core features + + + Made to address your design needs from the ground up.
+ Bland was built with all these in mind. + +
+ +
+ { coreFeatures.map(({ title, description }) => ( +
+
+ +
+ + { title } + + + { description } + +
+ )) } +
+
+); + +export default Section2; diff --git a/apps/blandui-landing/app/components/Section3.tsx b/apps/blandui-landing/app/components/Section3.tsx new file mode 100644 index 0000000..e58685f --- /dev/null +++ b/apps/blandui-landing/app/components/Section3.tsx @@ -0,0 +1,15 @@ +import { Typography } from '@blandui/blandui-react'; + +const Section3 = () => ( +
+ + Interact with these templates + + + + Coming soon... + +
+); + +export default Section3; diff --git a/apps/blandui-landing/app/components/Section4.tsx b/apps/blandui-landing/app/components/Section4.tsx new file mode 100644 index 0000000..aaa285d --- /dev/null +++ b/apps/blandui-landing/app/components/Section4.tsx @@ -0,0 +1,49 @@ +import { Button, Typography } from '@blandui/blandui-react'; +import { SiDribbble } from '@icons-pack/react-simple-icons'; +import Image from 'next/image'; + +const Section4 = () => ( +
+
+
+ + Built with Bland + + + Here’s some of what you can build. We just give you the essentials. + +
+ + +
+ +
+ Example 1 + Example 2 + Example 3 + Example 4 +
+ +
+ Example 5 + Example 6 + Example 7 + Example 8 +
+ +
+ Example 2 + Example 3 +
+ +
+ Example 2 + Example 3 +
+
+); + +export default Section4; diff --git a/apps/blandui-landing/app/components/Section5.tsx b/apps/blandui-landing/app/components/Section5.tsx new file mode 100644 index 0000000..3cca6fc --- /dev/null +++ b/apps/blandui-landing/app/components/Section5.tsx @@ -0,0 +1,34 @@ +import { Button, Typography } from '@blandui/blandui-react'; +import { Play, Video } from 'lucide-react'; + +const Section5 = () => ( +
+
+
+ + How to use + + + Here’s quick video on how to use this UI Kit.
+ Check out our YouTube channel for more tutorials and other related content + +
+ + +
+ +
+
+ +
+ + Coming soon + +
+
+); + +export default Section5; diff --git a/apps/blandui-landing/app/globals.css b/apps/blandui-landing/app/globals.css new file mode 100644 index 0000000..53fbc0a --- /dev/null +++ b/apps/blandui-landing/app/globals.css @@ -0,0 +1,10 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + img, video { + max-width: initial; + height: initial; + } +} diff --git a/apps/blandui-landing/app/layout.tsx b/apps/blandui-landing/app/layout.tsx new file mode 100644 index 0000000..a2bc6fc --- /dev/null +++ b/apps/blandui-landing/app/layout.tsx @@ -0,0 +1,40 @@ +import type { Metadata } from 'next'; +// eslint-disable-next-line camelcase +import { Fira_Sans } from 'next/font/google'; +import { ReactNode } from 'react'; +import PlausibleProvider from 'next-plausible'; + +import Header from './components/Header'; +import Footer from './components/Footer'; + +import './globals.css'; + +const firaSans = Fira_Sans({ + subsets: ['latin'], + weight: ['400', '500', '600', '700'], + display: 'swap', +}); + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: ReactNode; +}>) { + return ( + + + + + +
+ {children} +