Skip to content

A modern UI/UX landing page focused on showcasing the capabilities and potential use cases of GPT-3. Built using Next.js and designed with BEM methodology for maintainable and scalable CSS. Deployed to Vercel for easy deployment and hosting. Demonstrates how modern design principles and cutting-edge technologies can create an effective landing page

Notifications You must be signed in to change notification settings

rezaan6/gpt3-modern-ui-ux

Repository files navigation

GPT3 Modern Landing Page

Table of Contents

Description

A modern UI/UX landing page centered around the theme of GPT-3. The website will be built using Next.js, a popular React-based framework for building server-side rendered applications. Features a clean and intuitive user interface that showcases the capabilities of GPT-3 and highlights its potential use cases.

Designed using BEM (Block Element Modifier) methodology for CSS styling. This methodology aims to improve the maintainability and scalability of CSS by creating modular and reusable stylesheets that are easy to read and understand. BEM encourages the use of descriptive class names that reflect the purpose of the CSS rule, making it easier to understand how different elements are related and how they interact with each other.

Finally, deployed to Vercel, a cloud-based platform for deploying and hosting websites and applications. Vercel provides an easy-to-use interface for deploying Next.js applications, as well as a range of other features such as custom domains, HTTPS support, and automatic scaling.

Overall, this project aims to demonstrate how modern UI/UX design principles, along with cutting-edge technologies like Next.js and BEM, can be used to create a stunning and effective landing page that showcases the capabilities of GPT-3.

Tech Stack

Overview (wait until GIFs load)

OverView

Folder Structure

.
|-- README.md        
|-- next-env.d.ts    
|-- next.config.js   
|-- package-lock.json
|-- package.json     
|-- public
|   |-- next.svg     
|   |-- thirteen.svg 
|   `-- vercel.svg
|-- src
|   |-- app
|   |   |-- api
|   |   |   `-- hello       
|   |   |       `-- route.ts
|   |   |-- favicon.ico     
|   |   |-- globals.css     
|   |   |-- layout.tsx
|   |   `-- page.tsx
|   |-- assets
|   |   |-- ai.png
|   |   |-- atlassian.png
|   |   |-- blog01.png
|   |   |-- blog02.png
|   |   |-- blog03.png
|   |   |-- blog04.png
|   |   |-- blog05.png
|   |   |-- dropbox.png
|   |   |-- google.png
|   |   |-- logo.png
|   |   |-- logo.svg
|   |   |-- people.png
|   |   |-- possibility.png
|   |   |-- shopify.png
|   |   `-- slack.png
|   |-- components
|   |   |-- article
|   |   |   |-- Article.tsx
|   |   |   `-- article.css
|   |   |-- brand
|   |   |   |-- Brand.tsx
|   |   |   |-- brand.css
|   |   |   `-- imports.js
|   |   |-- cta
|   |   |   |-- CTA.tsx
|   |   |   `-- cta.css
|   |   |-- feature
|   |   |   |-- Feature.tsx
|   |   |   `-- feature.css
|   |   |-- index.js
|   |   `-- navbar
|   |       |-- Navbar.tsx
|   |       `-- navbar.css
|   |-- containers
|   |   |-- blog
|   |   |   |-- Blog.tsx
|   |   |   |-- blog.css
|   |   |   `-- imports.js
|   |   |-- features
|   |   |   |-- Features.tsx
|   |   |   `-- features.css
|   |   |-- footer
|   |   |   |-- Footer.tsx
|   |   |   `-- footer.css
|   |   |-- header
|   |   |   |-- Header.tsx
|   |   |   `-- header.css
|   |   |-- index.js
|   |   |-- possibility
|   |   |   |-- Possibility.tsx
|   |   |   `-- possibility.css
|   |   `-- whatGPT3
|   |       |-- WhatGPT3.tsx
|   |       `-- whatGPT3.css
|   `-- logo.svg
`-- tsconfig.json

About

A modern UI/UX landing page focused on showcasing the capabilities and potential use cases of GPT-3. Built using Next.js and designed with BEM methodology for maintainable and scalable CSS. Deployed to Vercel for easy deployment and hosting. Demonstrates how modern design principles and cutting-edge technologies can create an effective landing page

Topics

Resources

Stars

Watchers

Forks