├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── components │ ├── Cta.tsx │ ├── Faq.tsx │ ├── Features.tsx │ ├── Footer.tsx │ ├── Hero.tsx │ ├── Navbar.tsx │ └── Pricing.tsx ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── assets │ ├── CNN.svg │ ├── Clutch.svg │ ├── Facebook.svg │ ├── Feed.svg │ ├── Google.svg │ ├── Gradient.svg │ ├── Image.svg │ ├── Logo.svg │ ├── Menu.svg │ ├── Plus.svg │ ├── Slack.svg │ ├── Trustpilot.svg │ ├── User.svg │ ├── X.svg │ ├── arrow.png │ ├── blue-button.svg │ ├── check.svg │ ├── feature-1.svg │ ├── feature-2.svg │ ├── feature-3.svg │ ├── green-button.svg │ └── pink-button.svg ├── next.svg └── vercel.svg ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | 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. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /app/components/Cta.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Arrow from "../../public/assets/arrow.png"; 3 | 4 | export function Cta() { 5 | return ( 6 |
7 |

8 | Monitor your website like a pro 9 |

10 |

11 | Join over 800+ happy site owners boosting productivity and efficiency! 12 |

13 | 14 |
15 | 18 | 19 | 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /app/components/Faq.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as Accordion from "@radix-ui/react-accordion"; 4 | import Plus from "../../public/assets/Plus.svg"; 5 | import Image from "next/image"; 6 | 7 | const items = [ 8 | { 9 | question: "Ut enim ad minima veniam, quis nostrum exercitationem ullam?", 10 | answer: 11 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.", 12 | }, 13 | { 14 | question: "Ut enim ad minima veniam, quis nostrum exercitationem ullam?", 15 | answer: 16 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.", 17 | }, 18 | { 19 | question: "Ut enim ad minima veniam, quis nostrum exercitationem ullam?", 20 | answer: 21 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.", 22 | }, 23 | { 24 | question: "Ut enim ad minima veniam, quis nostrum exercitationem ullam?", 25 | answer: 26 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.", 27 | }, 28 | { 29 | question: "Ut enim ad minima veniam, quis nostrum exercitationem ullam?", 30 | answer: 31 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.", 32 | }, 33 | ]; 34 | 35 | export function Faq() { 36 | return ( 37 |
38 |
39 |

40 | Frequently Asked Questions 41 |

42 |

43 | Lets clarify some of your questions 44 |

45 |

46 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 47 | eiusmod tempor incididunt ut labore 48 |

49 |
50 | 51 |
52 | 58 | {items.map((item, index) => ( 59 |
60 | 64 | 65 | 66 |

67 | {item.question} 68 |

69 | 70 | See more 75 | 76 | 77 | 78 | 79 | 80 |

{item.answer}

81 | 82 | 83 |
84 | ))} 85 | 86 |
87 |
88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /app/components/Features.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Feature1 from "../../public/assets/feature-1.svg"; 3 | import Feature2 from "../../public/assets/feature-2.svg"; 4 | import Feature3 from "../../public/assets/feature-3.svg"; 5 | import Check from "../../public/assets/check.svg"; 6 | import bluebutton from "../../public/assets/blue-button.svg"; 7 | import greenButton from "../../public/assets/green-button.svg"; 8 | import pinkButton from "../../public/assets/pink-button.svg"; 9 | 10 | export function Features() { 11 | return ( 12 |
13 |
14 | Feature 1 image 19 |
20 |

21 | Sales Monitoring 22 |

23 |

24 | Simplify your sales monitoring 25 |

26 | feature 1 image 31 |

32 | Stay on top of things and revamp your work process with our 33 | game-changing feature. Get a birds eye view with our customizable 34 | dashboard. 35 |

36 | 37 |
    38 |
  • 39 | 40 | Checkmark 41 | 42 | Lorem ipsum dolor sit amet 43 |
    • 44 |
  • 45 | 46 | Checkmark 47 | 48 | Lorem ipsum dolor sit amet 49 |
    • 50 |
  • 51 | 52 | Checkmark 53 | 54 | Lorem ipsum dolor sit amet 55 |
    • 56 |
57 | 58 |

59 | Learn More{" "} 60 | 61 | Learn more 62 | 63 |

64 |
65 |
66 | 67 |
68 | Feature 1 image 73 |
74 |

75 | Customer Support 76 |

77 |

78 | Get in touch with your customers 79 |

80 | feature 1 image 85 |

86 | Stay on top of things and revamp your work process with our 87 | game-changing feature. Get a birds eye view with our customizable 88 | dashboard. 89 |

90 | 91 |
    92 |
  • 93 | 94 | Checkmark 95 | 96 | Lorem ipsum dolor sit amet 97 |
    • 98 |
  • 99 | 100 | Checkmark 101 | 102 | Lorem ipsum dolor sit amet 103 |
    • 104 |
  • 105 | 106 | Checkmark 107 | 108 | Lorem ipsum dolor sit amet 109 |
    • 110 |
111 | 112 |

113 | Learn More{" "} 114 | 115 | Learn more 116 | 117 |

118 |
119 |
120 | 121 |
122 | Feature 1 image 127 |
128 |

129 | Growth Monitoring 130 |

131 |

132 | Monitor your sites new subscribers 133 |

134 | feature 1 image 139 |

140 | Stay on top of things and revamp your work process with our 141 | game-changing feature. Get a birds eye view with our customizable 142 | dashboard. 143 |

144 | 145 |
146 |
147 |

100+

148 |

Lorem ipsum dolor sit

149 |
150 |
151 |

800+

152 |

Conse adipiscing elit

153 |
154 |
155 | 156 |

157 | Learn More{" "} 158 | 159 | Learn more 160 | 161 |

162 |
163 |
164 |
165 | ); 166 | } 167 | -------------------------------------------------------------------------------- /app/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Logo from "../../public/assets/Logo.svg"; 3 | import Facebook from "../../public/assets/Facebook.svg"; 4 | import Twitter from "../../public/assets/X.svg"; 5 | import Feed from "../../public/assets/Feed.svg"; 6 | 7 | export function Footer() { 8 | return ( 9 |
10 |
11 | Logo 12 |

Jan Marshal

13 |
14 | 15 | 21 | 22 |

23 | © Copyright 2024. Your Site. All rights reserved. 24 |

25 | 26 |
27 | Facebook 28 | Feed 29 | Twitter 30 |
31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /app/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import BlurArrow from "../../public/assets/blue-button.svg"; 3 | import Gradient from "../../public/assets/Gradient.svg"; 4 | import HeroImage from "../../public/assets/Image.svg"; 5 | import Google from "../../public/assets/Google.svg"; 6 | import Slack from "../../public/assets/Slack.svg"; 7 | import Truspilot from "../../public/assets/Trustpilot.svg"; 8 | import Cnn from "../../public/assets/CNN.svg"; 9 | import Cluth from "../../public/assets/Clutch.svg"; 10 | 11 | export function Hero() { 12 | return ( 13 |
14 |
15 |

16 | Start monitoring your website like a pro 17 |

18 |

19 | Get a birds eye view with our customizable dashboard. Stay on top of 20 | things! Revamp your work process with our game-changing feature. Boost 21 | productivity and efficiency! 22 |

23 | 24 |
25 | 28 | 34 |
35 |
36 | 37 |
38 | Gradient 43 | 44 |
45 | hero image 50 | 51 |
52 |

53 | Trusted by these companies 54 |

55 |
56 | 57 | 58 | 59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /app/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Logo from "../../public/assets/Logo.svg"; 3 | import User from "../../public/assets/User.svg"; 4 | import Menu from "../../public/assets/Menu.svg"; 5 | 6 | const navLinks = [ 7 | { name: "Features" }, 8 | { name: "Pricing" }, 9 | { name: "Enterprise" }, 10 | { name: "Careers" }, 11 | ]; 12 | 13 | export function Navbar() { 14 | return ( 15 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /app/components/Pricing.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Check from "../../public/assets/check.svg"; 3 | 4 | export function Pricing() { 5 | return ( 6 |
7 |

8 | Flexible plans for you 9 |

10 |

11 | No hidden fees! 12 |

13 | 14 |
15 |
16 |
17 |

18 | Free Trial 19 |

20 |

21 | Perfect for testing the waters 22 |

23 | 24 |

25 | 0$/mo 26 |

27 | 28 |
    29 |
  • 30 | 31 | included 32 | 33 | Lorem ipsum dolor sit amet 34 |
    • 35 |
  • 36 | 37 | included 38 | 39 | Lorem ipsum dolor sit amet 40 |
    • 41 |
  • 42 | 43 | included 44 | 45 | Lorem ipsum dolor sit amet 46 |
    • 47 |
48 |
49 | 52 |
53 | 54 |
55 |
56 |

57 | Business 58 |

59 |

60 | Perfect for small businesses 61 |

62 | 63 |

64 | 500$/mo 65 |

66 | 67 |
    68 |
  • 69 | 70 | included 71 | 72 | Lorem ipsum dolor sit amet 73 |
    • 74 |
  • 75 | 76 | included 77 | 78 | Lorem ipsum dolor sit amet 79 |
    • 80 |
  • 81 | 82 | included 83 | 84 | Lorem ipsum dolor sit amet 85 |
    • 86 |
  • 87 | 88 | included 89 | 90 | Lorem ipsum dolor sit amet 91 |
    • 92 |
  • 93 | 94 | included 95 | 96 | Lorem ipsum dolor sit amet 97 |
    • 98 |
99 |
100 | 103 |
104 | 105 |
106 |
107 |

108 | Enterprise 109 |

110 |

111 | Perfect for big companies 112 |

113 | 114 |

Custom

115 | 116 |

117 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 118 | eiusmod tempor incididunt ut labore. 119 |

120 |

121 | Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit 122 | aut fugit. Lorem ipsum dolor sit amet, consectetur adipiscing 123 | elit. 124 |

125 |
126 | 129 |
130 |
131 |
132 | ); 133 | } 134 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ski043/nextjs-14-ui-ux/538b1953e6dea6ac763bd1bae8c63bc7c76abb84/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Inter } from 'next/font/google' 3 | import './globals.css' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Cta } from "./components/Cta"; 2 | import { Faq } from "./components/Faq"; 3 | import { Features } from "./components/Features"; 4 | import { Footer } from "./components/Footer"; 5 | import { Hero } from "./components/Hero"; 6 | import { Navbar } from "./components/Navbar"; 7 | import { Pricing } from "./components/Pricing"; 8 | 9 | export default function Home() { 10 | return ( 11 | <> 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-ux-website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@radix-ui/react-accordion": "^1.1.2", 13 | "next": "14.0.4", 14 | "react": "^18", 15 | "react-dom": "^18" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "autoprefixer": "^10.0.1", 22 | "eslint": "^8", 23 | "eslint-config-next": "14.0.4", 24 | "postcss": "^8", 25 | "tailwindcss": "^3.3.0", 26 | "typescript": "^5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/assets/CNN.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Clutch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Feed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/Plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/assets/Slack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/assets/Trustpilot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/User.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/assets/X.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ski043/nextjs-14-ui-ux/538b1953e6dea6ac763bd1bae8c63bc7c76abb84/public/assets/arrow.png -------------------------------------------------------------------------------- /public/assets/blue-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/assets/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/green-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/assets/pink-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | --------------------------------------------------------------------------------