Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mujeebsulayman/brain3-dapp-ui
https://github.com/mujeebsulayman/brain3-dapp-ui
tailwindcss vite vitejs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mujeebsulayman/brain3-dapp-ui
- Owner: MujeebSulayman
- Created: 2024-07-13T07:09:33.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-29T16:56:00.000Z (5 months ago)
- Last Synced: 2024-07-29T22:45:35.846Z (5 months ago)
- Topics: tailwindcss, vite, vitejs
- Language: JavaScript
- Homepage: https://brain3-dapp-ui.vercel.app
- Size: 11.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Web3 Dapp UI website
Brain3 - Modern UI/ website, developed using React.js and Tailwind CSS, exemplifies modern UI/ principles. Its sleek design, seamless animations, and overall user experience set a high standard, serving as a reference or inspiration for future modern applications or websites in general.
- Vite
- React.js
- Tailwind CSS
## 🔋 Features
👉 **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.
👉 **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling
👉 **Complex UI Geometry**: Utilizes tailwindcss for intricate shapes like circular feature displays, grid lines, and side lines.
👉 **Latest UI Trends**: Incorporates modern design elements such as bento grids.
👉 **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.
👉 **Responsive**: Ensures seamless functionality and aesthetics across all devices
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/MujeebSulayman/Brain3-UI-design.git
cd Brain3
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🕸️ Snippets
.vscode/settings.json
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.addMissingImports": "explicit"
},
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": false,
"prettier.jsxSingleQuote": false,
"prettier.trailingComma": "es5",
"prettier.arrowParens": "always",
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"[svg]": {
"editor.defaultFormatter": "jock.svg"
}
}
```
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
import { fontFamily } from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./public/assets/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
color: {
1: '#AC6AFF',
2: '#FFC876',
3: '#FF776F',
4: '#7ADB78',
5: '#858DFF',
6: '#FF98E2',
},
stroke: {
1: '#26242C',
},
n: {
1: '#FFFFFF',
2: '#CAC6DD',
3: '#ADA8C3',
4: '#757185',
5: '#3F3A52',
6: '#252134',
7: '#15131D',
8: '#0E0C15',
9: '#474060',
10: '#43435C',
11: '#1B1B2E',
12: '#2E2A41',
13: '#6C7275',
},
},
fontFamily: {
sans: ['var(--font-sora)', ...fontFamily.sans],
code: 'var(--font-code)',
grotesk: 'var(--font-grotesk)',
},
letterSpacing: {
tagline: '.15em',
},
spacing: {
0.25: '0.0625rem',
7.5: '1.875rem',
15: '3.75rem',
},
opacity: {
15: '.15',
},
transitionDuration: {
DEFAULT: '200ms',
},
transitionTimingFunction: {
DEFAULT: 'linear',
},
zIndex: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
},
borderWidth: {
DEFAULT: '0.0625rem',
},
backgroundImage: {
'radial-gradient': 'radial-gradient(var(--tw-gradient-stops))',
'conic-gradient':
'conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)',
'benefit-card-1': 'url(assets/benefits/card-1.svg)',
'benefit-card-2': 'url(assets/benefits/card-2.svg)',
'benefit-card-3': 'url(assets/benefits/card-3.svg)',
'benefit-card-4': 'url(assets/benefits/card-4.svg)',
'benefit-card-5': 'url(assets/benefits/card-5.svg)',
'benefit-card-6': 'url(assets/benefits/card-6.svg)',
},
},
},
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addBase({});
addComponents({
'.container': {
'@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]':
{},
},
'.h1': {
'@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]':
{},
},
'.h2': {
'@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight':
{},
},
'.h3': {
'@apply text-[2rem] leading-normal md:text-[2.5rem]': {},
},
'.h4': {
'@apply text-[2rem] leading-normal': {},
},
'.h5': {
'@apply text-2xl leading-normal': {},
},
'.h6': {
'@apply font-semibold text-lg leading-8': {},
},
'.body-1': {
'@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8':
{},
},
'.body-2': {
'@apply font-light text-[0.875rem] leading-6 md:text-base': {},
},
'.caption': {
'@apply text-sm': {},
},
'.tagline': {
'@apply font-grotesk font-light text-xs tracking-tagline uppercase':
{},
},
'.quote': {
'@apply font-code text-lg leading-normal': {},
},
'.button': {
'@apply font-code text-xs font-bold uppercase tracking-wider': {},
},
});
addUtilities({
'.tap-highlight-color': {
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
},
});
}),
],
};
```
index.css
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-sora: 'Sora', sans-serif;
--font-code: 'Source Code Pro', monospace;
--font-grotesk: 'Space Grotesk', sans-serif;
}
* {
scroll-behavior: smooth;
}
@layer base {
body {
@apply font-sans bg-n-8 text-n-1 text-base;
}
}
.rotate-45 {
@apply rotate-[45deg];
}
.rotate-90 {
@apply rotate-[90deg];
}
.rotate-135 {
@apply rotate-[135deg];
}
.rotate-180 {
@apply rotate-[180deg];
}
.rotate-225 {
@apply rotate-[225deg];
}
.rotate-270 {
@apply rotate-[270deg];
}
.rotate-315 {
@apply rotate-[315deg];
}
.rotate-360 {
@apply rotate-[360deg];
}
.-rotate-45 {
@apply rotate-[-45deg];
}
.-rotate-90 {
@apply rotate-[-90deg];
}
.-rotate-135 {
@apply rotate-[-135deg];
}
.-rotate-180 {
@apply rotate-[-180deg];
}
.-rotate-225 {
@apply rotate-[-225deg];
}
.-rotate-270 {
@apply rotate-[-270deg];
}
.-rotate-315 {
@apply rotate-[-315deg];
}
.-rotate-360 {
@apply rotate-[-360deg];
}
```
constants/index.js
```javascript
import {
benefitIcon1,
benefitIcon2,
benefitIcon3,
benefitIcon4,
benefitImage2,
chromecast,
disc02,
discord,
discordBlack,
facebook,
figma,
file02,
framer,
homeSmile,
instagram,
notification2,
notification3,
notification4,
notion,
photoshop,
plusSquare,
protopie,
raindrop,
recording01,
recording03,
roadmap1,
roadmap2,
roadmap3,
roadmap4,
searchMd,
slack,
sliders04,
telegram,
twitter,
yourlogo,
} from '../../public/assets';
export const navigation = [
{
id: '0',
title: 'Features',
url: '#features',
},
{
id: '1',
title: 'Pricing',
url: '#pricing',
},
{
id: '2',
title: 'How to use',
url: '#how-to-use',
},
{
id: '3',
title: 'Roadmap',
url: '#roadmap',
},
{
id: '4',
title: 'New account',
url: '#signup',
onlyMobile: true,
},
{
id: '5',
title: 'Sign in',
url: '#login',
onlyMobile: true,
},
];
export const heroIcons = [homeSmile, file02, searchMd, plusSquare];
export const notificationImages = [notification4, notification3, notification2];
export const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo];
export const Brain3Services = [
'Photo generating',
'Photo enhance',
'Seamless Integration',
];
export const Brain3ServicesIcons = [
recording03,
recording01,
disc02,
chromecast,
sliders04,
];
export const roadmap = [
{
id: '0',
title: 'Voice recognition',
text: 'Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.',
date: 'May 2023',
status: 'done',
imageUrl: roadmap1,
colorful: true,
},
{
id: '1',
title: 'Gamification',
text: 'Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.',
date: 'May 2023',
status: 'progress',
imageUrl: roadmap2,
},
{
id: '2',
title: 'Chatbot customization',
text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.",
date: 'May 2023',
status: 'done',
imageUrl: roadmap3,
},
{
id: '3',
title: 'Integration with APIs',
text: 'Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.',
date: 'May 2023',
status: 'progress',
imageUrl: roadmap4,
},
];
export const collabText =
"With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.";
export const collabContent = [
{
id: '0',
title: 'Seamless Integration',
text: collabText,
},
{
id: '1',
title: 'Smart Automation',
},
{
id: '2',
title: 'Top-notch Security',
},
];
export const collabApps = [
{
id: '0',
title: 'Figma',
icon: figma,
width: 26,
height: 36,
},
{
id: '1',
title: 'Notion',
icon: notion,
width: 34,
height: 36,
},
{
id: '2',
title: 'Discord',
icon: discord,
width: 36,
height: 28,
},
{
id: '3',
title: 'Slack',
icon: slack,
width: 34,
height: 35,
},
{
id: '4',
title: 'Photoshop',
icon: photoshop,
width: 34,
height: 34,
},
{
id: '5',
title: 'Protopie',
icon: protopie,
width: 34,
height: 34,
},
{
id: '6',
title: 'Framer',
icon: framer,
width: 26,
height: 34,
},
{
id: '7',
title: 'Raindrop',
icon: raindrop,
width: 38,
height: 32,
},
];
export const pricing = [
{
id: '0',
title: 'Basic',
description: 'AI chatbot, personalized recommendations',
price: '0',
features: [
'An AI chatbot that can understand your queries',
'Personalized recommendations based on your preferences',
'Ability to explore the app and its features without any cost',
],
},
{
id: '1',
title: 'Premium',
description: 'Advanced AI chatbot, priority support, analytics dashboard',
price: '9.99',
features: [
'An advanced AI chatbot that can understand complex queries',
'An analytics dashboard to track your conversations',
'Priority support to solve issues quickly',
],
},
{
id: '2',
title: 'Enterprise',
description: 'Custom AI chatbot, advanced analytics, dedicated account',
price: null,
features: [
'An AI chatbot that can understand your queries',
'Personalized recommendations based on your preferences',
'Ability to explore the app and its features without any cost',
],
},
];
export const benefits = [
{
id: '0',
title: 'Ask anything',
text: 'Lets users quickly find answers to their questions without having to search through multiple sources.',
backgroundUrl: 'assets/benefits/card-1.svg',
iconUrl: benefitIcon1,
imageUrl: benefitImage2,
},
{
id: '1',
title: 'Improve everyday',
text: 'The app uses natural language processing to understand user queries and provide accurate and relevant responses.',
backgroundUrl: 'assets/benefits/card-2.svg',
iconUrl: benefitIcon2,
imageUrl: benefitImage2,
light: true,
},
{
id: '2',
title: 'Connect everywhere',
text: 'Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.',
backgroundUrl: 'assets/benefits/card-3.svg',
iconUrl: benefitIcon3,
imageUrl: benefitImage2,
},
{
id: '3',
title: 'Fast responding',
text: 'Lets users quickly find answers to their questions without having to search through multiple sources.',
backgroundUrl: 'assets/benefits/card-4.svg',
iconUrl: benefitIcon4,
imageUrl: benefitImage2,
light: true,
},
{
id: '4',
title: 'Ask anything',
text: 'Lets users quickly find answers to their questions without having to search through multiple sources.',
backgroundUrl: 'assets/benefits/card-5.svg',
iconUrl: benefitIcon1,
imageUrl: benefitImage2,
},
{
id: '5',
title: 'Improve everyday',
text: 'The app uses natural language processing to understand user queries and provide accurate and relevant responses.',
backgroundUrl: 'assets/benefits/card-6.svg',
iconUrl: benefitIcon2,
imageUrl: benefitImage2,
},
];
export const socials = [
{
id: '0',
title: 'Discord',
iconUrl: discordBlack,
url: '#',
},
{
id: '1',
title: 'Twitter',
iconUrl: twitter,
url: '#',
},
{
id: '2',
title: 'Instagram',
iconUrl: instagram,
url: '#',
},
{
id: '3',
title: 'Telegram',
iconUrl: telegram,
url: '#',
},
{
id: '4',
title: 'Facebook',
iconUrl: facebook,
url: '#',
},
];
```
components/Section.jsx
```javascript
import SectionSvg from '../../public/assets/svg/SectionSvg';
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
{children}
{crosses && (
<>
>
)}
);
export default Section;
```
components/Roadmap.jsx
```javascript
import Button from './Button';
import Heading from './Heading';
import Section from './Section';
import Tagline from './TagLine';
import { roadmap } from '../constants';
import { check2, grid, loading1 } from '../../public/assets';
import { Gradient } from './design/Roadmap';
const Roadmap = () => (
{roadmap.map((item) => {
const status = item.status === 'done' ? 'Done' : 'In progress';
return (
{item.date}
{status}
{item.title}
{item.text}
);
})}
Our roadmap
);
export default Roadmap;
```