├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── database │ ├── features_DB.js │ └── resources_DB.js ├── footer │ ├── Footer.jsx │ ├── Footer.module.css │ └── footer_DB.js ├── home │ ├── MainCard.jsx │ ├── MainDetails.jsx │ ├── Mainhero.jsx │ ├── index.js │ └── main.module.css └── navbar │ ├── Drawer.js │ ├── Navbar.js │ ├── Search.js │ └── pages.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── blog │ └── index.js ├── docs │ └── index.js ├── events │ ├── event.module.css │ └── index.jsx ├── features │ └── index.jsx ├── index.js └── resources │ └── index.jsx ├── public ├── angular.svg ├── angular_whiteTransparent_withMargin.png ├── code-icon.svg ├── devolopment.png ├── feature-icon.svg ├── joyful-development.svg ├── logo-nav@2x.png ├── loved-by-millions.svg ├── responsive-framework.svg ├── shield-large.svg └── speed-performance.svg ├── styles ├── Home.module.css └── globals.css └── yarn.lock /.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 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.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 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | 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. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /components/database/features_DB.js: -------------------------------------------------------------------------------- 1 | const logo = "/feature-icon.svg"; 2 | 3 | const featuresDb = [ 4 | { 5 | id: 1, 6 | title: "CROSS PLATFORM", 7 | image: logo, 8 | items: [ 9 | { 10 | itemId: 1, 11 | itemName: "Progressive Web Apps", 12 | itemDetails: 13 | "Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.", 14 | }, 15 | { 16 | itemId: 2, 17 | itemName: "Native", 18 | itemDetails: 19 | "Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.", 20 | }, 21 | { 22 | itemId: 3, 23 | itemName: "Desktop", 24 | itemDetails: 25 | "Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.", 26 | }, 27 | ], 28 | }, 29 | { 30 | id: 2, 31 | title: "SPEED AND PERFORMANCE", 32 | image: logo, 33 | items: [ 34 | { 35 | itemId: 1, 36 | itemName: "Code Generation", 37 | itemDetails: 38 | "Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.", 39 | }, 40 | { 41 | itemId: 2, 42 | itemName: "Universal", 43 | itemDetails: 44 | "Serve the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.", 45 | }, 46 | { 47 | itemId: 3, 48 | itemName: "Code Splitting", 49 | itemDetails: 50 | "Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.", 51 | }, 52 | ], 53 | }, 54 | { 55 | id: 3, 56 | title: "PRODUCTIVITY", 57 | image: logo, 58 | items: [ 59 | { 60 | itemId: 1, 61 | itemName: "Templates", 62 | itemDetails: 63 | "Quickly create UI views with simple and powerful template syntax.", 64 | }, 65 | { 66 | itemId: 2, 67 | itemName: "Angular CLI", 68 | itemDetails: 69 | "Command line tools: start building fast, add components and tests, then instantly deploy.", 70 | }, 71 | { 72 | itemId: 3, 73 | itemName: "IDEs", 74 | itemDetails: 75 | "Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.", 76 | }, 77 | ], 78 | }, 79 | { 80 | id: 4, 81 | title: "FULL DEVELOPMENT STORY", 82 | image: logo, 83 | items: [ 84 | { 85 | itemId: 1, 86 | itemName: "Testing", 87 | itemDetails: 88 | "With Karma for unit tests, you can know if you've broken things every time you save.", 89 | }, 90 | { 91 | itemId: 2, 92 | itemName: "Animation", 93 | itemDetails: 94 | "Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.", 95 | }, 96 | { 97 | itemId: 3, 98 | itemName: "Accessibility", 99 | itemDetails: 100 | "Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.", 101 | }, 102 | ], 103 | }, 104 | ]; 105 | 106 | export default featuresDb; 107 | -------------------------------------------------------------------------------- /components/database/resources_DB.js: -------------------------------------------------------------------------------- 1 | const resourcesDB = [ 2 | { 3 | id: 1, 4 | category: "development", 5 | resourceitems: [ 6 | { 7 | itemTitle: "IDEs", 8 | items: [ 9 | { 10 | itemHeading: 11 | "Amexio Canvas Web Based Drag and Drop IDE by MetaMagic", 12 | itemDetails: 13 | "Amexio Canvas is Drag and Drop Environment to create Fully Responsive Web and Smart Device HTML5/Angular Apps. Code will be auto generated and hot deployed by the Canvas for live testing. Out of the box 50+ Material Design Theme support. Commit your code to GitHub public or private repository.", 14 | }, 15 | { 16 | itemHeading: "Angular IDE by Webclipse", 17 | itemDetails: 18 | "Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.", 19 | }, 20 | { 21 | itemHeading: "IntelliJ IDEA", 22 | itemDetails: "Capable and Ergonomic Java * IDE", 23 | }, 24 | { 25 | itemHeading: "Visual Studio Code", 26 | itemDetails: 27 | "VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.", 28 | }, 29 | { 30 | itemHeading: "WebStorm", 31 | itemDetails: 32 | "Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js", 33 | }, 34 | ], 35 | }, 36 | { 37 | itemTitle: "Tooling", 38 | items: [ 39 | { 40 | itemHeading: "Angular CLI", 41 | itemDetails: 42 | "The official Angular CLI makes it easy to create and develop applications from initial commit to production deployment. It already follows our best practices right out of the box!", 43 | }, 44 | { 45 | itemHeading: "Angular ESLint", 46 | itemDetails: 47 | "The tooling which enables ESLint to lint Angular projects.", 48 | }, 49 | { 50 | itemHeading: "Angular Playground", 51 | itemDetails: 52 | "UI development environment for building, testing, and documenting Angular applications.", 53 | }, 54 | { 55 | itemHeading: "Angular Universal", 56 | itemDetails: "Server-side Rendering for Angular apps.", 57 | }, 58 | ], 59 | }, 60 | { 61 | itemTitle: "Data Libraries", 62 | items: [ 63 | { 64 | itemHeading: "Akita", 65 | itemDetails: "Akita is a state management pattern,", 66 | }, 67 | { 68 | itemHeading: "Angular Fire", 69 | itemDetails: "The official library for Firebase and Angular", 70 | }, 71 | { 72 | itemHeading: "Apollo", 73 | itemDetails: 74 | "Apollo is a data stack for modern apps, built with GraphQL.", 75 | }, 76 | { 77 | itemHeading: "ButterCMS", 78 | itemDetails: 79 | "ButterCMS is a headless CMS that lets you manage content using our dashboard and integrate it into your Angular Application", 80 | }, 81 | ], 82 | }, 83 | { 84 | itemTitle: "UI Components", 85 | items: [ 86 | { 87 | itemHeading: "ag-Grid", 88 | itemDetails: 89 | "A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.", 90 | }, 91 | { 92 | itemHeading: "Alyle UI", 93 | itemDetails: "Minimal Design, a set of components for Angular.", 94 | }, 95 | { 96 | itemHeading: "Amexio - Angular Extensions", 97 | itemDetails: 98 | "Amexio is a rich set of Angular components powered by HTML5 & CSS3 for Responsive Web Design and 80+ built-in Material Design Themes. Amexio has 3 Editions, Standard, Enterprise and Creative.", 99 | }, 100 | { 101 | itemHeading: "Angular & Material Design 2.0 for Bootstrap 5", 102 | itemDetails: 103 | "Free components, templates & plugins for the latest Bootstrap 4 styled in accordance with Material Design (guidelines introduced in 2015)", 104 | }, 105 | ], 106 | }, 107 | { 108 | itemTitle: "Cross-Platform Development", 109 | items: [ 110 | { 111 | itemHeading: "Electron", 112 | itemDetails: "Electron Platform for Angular.", 113 | }, 114 | { 115 | itemHeading: "Alyle UI", 116 | itemDetails: "Minimal Design, a set of components for Angular.", 117 | }, 118 | { 119 | itemHeading: "Amexio - Angular Extensions", 120 | itemDetails: 121 | "Amexio is a rich set of Angular components powered by HTML5 & CSS3 for Responsive Web Design and 80+ .", 122 | }, 123 | { 124 | itemHeading: "Angular & Material Design 2.0 for Bootstrap 5", 125 | itemDetails: 126 | "Free components, templates & plugins for the latest Bootstrap 4 styled in accordance with Material Design (guidelines introduced in 2015)", 127 | }, 128 | ], 129 | }, 130 | ], 131 | }, 132 | { 133 | id: 2, 134 | category: "education", 135 | resourceitems: [ 136 | { 137 | itemTitle: "Books", 138 | items: [ 139 | { 140 | itemHeading: "Angular from Scratch", 141 | itemDetails: "Learn Angular from Scratch, building a sales application", 142 | }, 143 | { 144 | itemHeading: "Angular Projects - Second Edition", 145 | itemDetails: "Build modern web apps by exploring Angular with 10 different projects and cutting-edge technologies", 146 | }, 147 | { 148 | itemHeading: "Angular Router", 149 | itemDetails: "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.", 150 | }, 151 | { 152 | itemHeading: "Angular-Buch (German)", 153 | itemDetails: "How to build Angular applications using NGRX", 154 | }, 155 | { 156 | itemHeading: "Becoming a Ninja with Angular", 157 | itemDetails: "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why", 158 | }, 159 | { 160 | itemHeading: "Developing with Angular", 161 | itemDetails: "Practical journey with Angular framework, ES6, TypeScript, webpack and Angular CLI.", 162 | }, 163 | { 164 | itemHeading: "How to integrate ButterCMS into Angular 2+ App", 165 | itemDetails: "Integrate a Headless CMS into your Angular App, create blog posts and pages", 166 | }, 167 | ], 168 | }, 169 | { 170 | itemTitle: "Workshops & Onsite Training", 171 | items: [ 172 | { 173 | itemHeading: "Accelebrate", 174 | itemDetails: "Customized, Instructor-Led Angular Training", 175 | }, 176 | { 177 | itemHeading: "Angular Projects - Second Edition", 178 | itemDetails: "Build modern web apps by exploring Angular with 10 different projects and cutting-edge technologies", 179 | }, 180 | { 181 | itemHeading: "Angular Academy (Canada)", 182 | itemDetails: "Angular Academy is a two day hands-on public course given in-person across Canada!", 183 | }, 184 | { 185 | itemHeading: "Angular-Buch (German)", 186 | itemDetails: "How to build Angular applications using NGRX", 187 | }, 188 | { 189 | itemHeading: "Becoming a Ninja with Angular", 190 | itemDetails: "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why", 191 | }, 192 | { 193 | itemHeading: "Developing with Angular", 194 | itemDetails: "Practical journey with Angular framework, ES6, TypeScript, webpack and Angular CLI.", 195 | }, 196 | { 197 | itemHeading: "How to integrate ButterCMS into Angular 2+ App", 198 | itemDetails: "Integrate a Headless CMS into your Angular App, create blog posts and pages", 199 | }, 200 | ], 201 | }, 202 | { 203 | itemTitle: "Online Training", 204 | items: [ 205 | { 206 | itemHeading: "Accelebrate", 207 | itemDetails: "Customized, Instructor-Led Angular Training", 208 | }, 209 | { 210 | itemHeading: "Angular Projects - Second Edition", 211 | itemDetails: "Build modern web apps by exploring Angular with 10 different projects and cutting-edge technologies", 212 | }, 213 | { 214 | itemHeading: "Angular Academy (Canada)", 215 | itemDetails: "Angular Academy is a two day hands-on public course given in-person across Canada!", 216 | }, 217 | { 218 | itemHeading: "Accelebrate", 219 | itemDetails: "Customized, Instructor-Led Angular Training", 220 | }, 221 | { 222 | itemHeading: "Angular Projects - Second Edition", 223 | itemDetails: "Build modern web apps by exploring Angular with 10 different projects and cutting-edge technologies", 224 | }, 225 | { 226 | itemHeading: "Angular Academy (Canada)", 227 | itemDetails: "Angular Academy is a two day hands-on public course given in-person across Canada!", 228 | }, 229 | ], 230 | }, 231 | ], 232 | }, 233 | { 234 | id: 3, 235 | category: "community", 236 | resourceitems: [ 237 | { 238 | itemTitle: "Community Curations", 239 | items: [ 240 | { 241 | itemHeading: "Angular Builders", 242 | itemDetails: "A collection of Angular builders for your Angular projects", 243 | }, 244 | { 245 | itemHeading: "Angular Community Meetup", 246 | itemDetails: "Angular-RU Community on GitHub is a single entry point for all resources, chats, podcasts and meetups for Angular in Russia.", 247 | }, 248 | { 249 | itemHeading: "Angular Conferences and Angular Camps in Moscow, Russia.", 250 | itemDetails: "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.", 251 | }, 252 | { 253 | itemHeading: "Angular inDepth", 254 | itemDetails: "Peer-reviewed Angular articles and tutorials.", 255 | }, 256 | { 257 | itemHeading: "Angular Nation", 258 | itemDetails: "Angular Nation is a free private network created for Angular developers to network, collaborate, and ask questions.", 259 | }, 260 | { 261 | itemHeading: "Angular Subreddit", 262 | itemDetails: "An Angular-dedicated subreddit.", 263 | }, 264 | { 265 | itemHeading: "API Based CMS with Butter", 266 | itemDetails: "Add API Based CMS to your Angular app", 267 | }, 268 | ], 269 | }, 270 | { 271 | itemTitle: "Podcasts", 272 | items: [ 273 | { 274 | itemHeading: "Adventures in Angular", 275 | itemDetails: "Adventures in Angular is a weekly podcast dedicated to the Angular platform and related technologies, tools, languages, and practices.", 276 | }, 277 | { 278 | itemHeading: "Angular Experience (NgXP)", 279 | itemDetails: "Weekly technical-adjacent podcast by Brooke Avery & Erik Slack. Don't just code in Angular, come enjoy the Angular Experience!", 280 | }, 281 | { 282 | itemHeading: "Angular Router", 283 | itemDetails: "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.", 284 | }, 285 | { 286 | itemHeading: "Angular-Buch (German)", 287 | itemDetails: "How to build Angular applications using NGRX", 288 | }, 289 | { 290 | itemHeading: "Becoming a Ninja with Angular", 291 | itemDetails: "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why", 292 | }, 293 | { 294 | itemHeading: "Developing with Angular", 295 | itemDetails: "Practical journey with Angular framework, ES6, TypeScript, webpack and Angular CLI.", 296 | }, 297 | { 298 | itemHeading: "How to integrate ButterCMS into Angular 2+ App", 299 | itemDetails: "Integrate a Headless CMS into your Angular App, create blog posts and pages", 300 | }, 301 | ], 302 | }, 303 | ], 304 | }, 305 | ]; 306 | 307 | export default resourcesDB; 308 | -------------------------------------------------------------------------------- /components/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Container, Grid, Link, Typography } from "@mui/material"; 2 | import React from "react"; 3 | import styles from "./Footer.module.css"; 4 | import footerData from "./footer_DB"; 5 | 6 | export default function Footer() { 7 | return ( 8 |
9 | 10 | 11 | {footerData.map((item, idx) => ( 12 | 13 | {item.heading} 14 |
    15 | {item.lists.map((item, idx) => ( 16 |
  • 17 | 18 | {item.listName} 19 | 20 |
    • 21 | ))} 22 |
23 | 24 | ))} 25 | 26 | 27 | 28 | Super-powered by Google ©2010-2022. 29 | 30 | 31 | Code licensed under an MIT-style License. Documentation licensed 32 | under CC BY 4.0. 33 | 34 | 35 | Version 14.2.8-local+sha.7c4f77a062. 36 | 37 | 38 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: #1976d2; 3 | position: relative; 4 | line-height: 24px; 5 | line-height: 2.4rem; 6 | flex: 1; 7 | padding: 48px 25px; 8 | z-index: 0; 9 | font-weight: 300; 10 | } 11 | .footer::after { 12 | content: ""; 13 | position: absolute; 14 | z-index: -1; 15 | top: 0; 16 | bottom: 0; 17 | left: 0; 18 | right: 0; 19 | background: url(/angular_whiteTransparent_withMargin.png) top 0 left 0 20 | repeat, 21 | url(/angular_whiteTransparent_withMargin.png) top 80px left 160px 22 | repeat; 23 | opacity: 0.05; 24 | background-size: 320px auto; 25 | } 26 | 27 | .oderlist { 28 | list-style: none; 29 | padding: 0; 30 | line-height: 2rem; 31 | } 32 | -------------------------------------------------------------------------------- /components/footer/footer_DB.js: -------------------------------------------------------------------------------- 1 | const footerData = [ 2 | { 3 | id: 1, 4 | heading: "RESOURCES", 5 | lists: [ 6 | { 7 | listName: "About", 8 | link: "#", 9 | }, 10 | { 11 | listName: "Resource listing", 12 | link: "#", 13 | }, 14 | { 15 | listName: "Press kit", 16 | link: "#", 17 | }, 18 | { 19 | listName: "Blog", 20 | link: "#", 21 | }, 22 | { 23 | listName: "Usage analytics", 24 | link: "#", 25 | }, 26 | ], 27 | }, 28 | { 29 | id: 2, 30 | heading: "HELP", 31 | lists: [ 32 | { 33 | listName: "Stack Overflow", 34 | link: "#", 35 | }, 36 | { 37 | listName: "Join Discord", 38 | link: "#", 39 | }, 40 | { 41 | listName: "Gitter", 42 | link: "#", 43 | }, 44 | { 45 | listName: "Report Issues", 46 | link: "#", 47 | }, 48 | { 49 | listName: "Code of Conduct", 50 | link: "#", 51 | }, 52 | ], 53 | }, 54 | { 55 | id: 3, 56 | heading: "COMMUNITY", 57 | lists: [ 58 | { 59 | listName: "Events", 60 | link: "#", 61 | }, 62 | { 63 | listName: "Meetups", 64 | link: "#", 65 | }, 66 | { 67 | listName: "Twitter", 68 | link: "#", 69 | }, 70 | { 71 | listName: "GitHub", 72 | link: "#", 73 | }, 74 | { 75 | listName: "Contribute", 76 | link: "#", 77 | }, 78 | ], 79 | }, 80 | { 81 | id: 4, 82 | heading: "LANGUAGES", 83 | lists: [ 84 | { 85 | listName: "Español", 86 | link: "#", 87 | }, 88 | { 89 | listName: "简体中文版", 90 | link: "#", 91 | }, 92 | { 93 | listName: "正體中文版", 94 | link: "#", 95 | }, 96 | { 97 | listName: "日本語版", 98 | link: "#", 99 | }, 100 | { 101 | listName: "한국어", 102 | link: "#", 103 | }, 104 | { 105 | listName: "Complete language list", 106 | link: "#", 107 | }, 108 | ], 109 | }, 110 | ]; 111 | 112 | export default footerData; 113 | -------------------------------------------------------------------------------- /components/home/MainCard.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardActionArea, 4 | CardContent, 5 | Container, 6 | Grid, 7 | Typography, 8 | } from "@mui/material"; 9 | import Image from "next/image"; 10 | import React from "react"; 11 | // import logo from "../../assets/code-icon.svg"; 12 | 13 | export default function MainCard() { 14 | return ( 15 | 16 | 22 | 33 | 34 | 35 | 36 | 37 | 43 | TRY IT NOW 44 | 45 | 46 | Explore Angular`s capabilities with a ready-made sample app. 47 | No setup required. 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /components/home/MainDetails.jsx: -------------------------------------------------------------------------------- 1 | import { Container, Divider, Grid, Typography } from "@mui/material"; 2 | import React from "react"; 3 | import Image from "next/image"; 4 | 5 | 6 | export default function MainDetails() { 7 | return ( 8 | <> 9 | 10 | 17 | 18 | framework 19 | 20 | 21 | 22 | DEVELOP ACROSS ALL PLATFORMS 23 | 24 | 30 | Learn one way to build applications with Angular and reuse your 31 | code and abilities to build apps for any deployment target. For 32 | web, mobile web, native mobile and native desktop. 33 | 34 | 35 | 36 | 37 | 44 | 45 | 46 | DEVELOP ACROSS ALL PLATFORMS 47 | 48 | 54 | Learn one way to build applications with Angular and reuse your 55 | code and abilities to build apps for any deployment target. For 56 | web, mobile web, native mobile and native desktop. 57 | 58 | 59 | 60 | framework 61 | 62 | 63 | 64 | 71 | 72 | framework 73 | 74 | 75 | 76 | DEVELOP ACROSS ALL PLATFORMS 77 | 78 | 84 | Learn one way to build applications with Angular and reuse your 85 | code and abilities to build apps for any deployment target. For 86 | web, mobile web, native mobile and native desktop. 87 | 88 | 89 | 90 | 91 | 92 | 99 | 100 | 101 | 102 | DEVELOP ACROSS ALL PLATFORMS 103 | 104 | 110 | Learn one way to build applications with Angular and reuse your 111 | code and abilities to build apps for any deployment target. For 112 | web, mobile web, native mobile and native desktop. 113 | 114 | 115 | 116 | framework 117 | 118 | 119 | 120 | 121 | 122 | 123 | ); 124 | } 125 | -------------------------------------------------------------------------------- /components/home/Mainhero.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Grid, Typography } from "@mui/material"; 2 | import { Container } from "@mui/system"; 3 | import React from "react"; 4 | import style from "./main.module.css"; 5 | import Image from "next/image"; 6 | 7 | export default function Mainhero() { 8 | return ( 9 |
10 |
11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | {"The modern web developer's platform"} 26 | 27 | 51 |
52 | 53 | 54 | 55 |
56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /components/home/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Mainhero from "./Mainhero"; 3 | import MainDetails from "./MainDetails"; 4 | import MainCard from "./MainCard"; 5 | export default function Home() { 6 | return ( 7 |
8 | 9 | 10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /components/home/main.module.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | position: absolute; 7 | width: 100%; 8 | min-height: 500px; 9 | height: 80vh; 10 | max-height: 580px; 11 | box-sizing: border-box; 12 | padding: 48px 48px 32px; 13 | overflow: hidden; 14 | -webkit-transform: skewY(8deg); 15 | transform: skewY(8deg); 16 | -webkit-transform-origin: 100%; 17 | transform-origin: 100%; 18 | z-index: -1; 19 | margin-top: -80px; 20 | } 21 | .background { 22 | background-color: #1976d2 !important; 23 | background: linear-gradient(145deg, #0d47a1, #42a5f5); 24 | color: #fff; 25 | } 26 | 27 | .cardDesign { 28 | box-shadow: 8px 12px 40px -19px rgba(0, 0, 0, 0.52); 29 | -webkit-box-shadow: 8px 12px 40px -19px rgba(0, 0, 0, 0.52); 30 | -moz-box-shadow: 8px 12px 40px -19px rgba(0, 0, 0, 0.52); 31 | } 32 | 33 | .heading { 34 | font-size: 2.9rem; 35 | color: #fff; 36 | } 37 | 38 | 39 | @media only screen and (max-width: 650px) { 40 | .hero { 41 | -webkit-transform: skewY(0deg); 42 | transform: skewY(0deg); 43 | } 44 | .heading { 45 | font-size: 2.1rem; 46 | text-align: center; 47 | } 48 | .button{ 49 | text-align: center; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /components/navbar/Drawer.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | Box, 4 | Drawer, 5 | List, 6 | ListItem, 7 | ListItemButton, 8 | ListItemIcon, 9 | ListItemText, 10 | } from "@mui/material"; 11 | import MenuIcon from "@mui/icons-material/Menu"; 12 | 13 | 14 | export default function TemporaryDrawer() { 15 | const [state, setState] = React.useState({ 16 | left: false, 17 | }); 18 | 19 | const toggleDrawer = (anchor, open) => (event) => { 20 | if ( 21 | event.type === "keydown" && 22 | (event.key === "Tab" || event.key === "Shift") 23 | ) { 24 | return; 25 | } 26 | 27 | setState({ ...state, [anchor]: open }); 28 | }; 29 | 30 | const list = (anchor) => ( 31 | 37 | 38 | {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( 39 | 40 | 41 | 42 | 43 | 44 | ))} 45 | 46 | 47 | ); 48 | const anchor = "left"; 49 | return ( 50 |
51 | 52 | 53 | 59 | {list(anchor)} 60 | 61 | 62 |
63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /components/navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import {useContext, useState} from "react"; 2 | import { 3 | Divider, 4 | IconButton, 5 | AppBar, 6 | Box, 7 | Toolbar, 8 | Container, 9 | Button, 10 | } from "@mui/material"; 11 | 12 | import Link from "next/link"; 13 | import Image from "next/image"; 14 | import { useTheme } from "@mui/material/styles"; 15 | import { useRouter } from "next/router"; 16 | import { Search , SearchIconWrapper , StyledInputBase} from "./Search"; 17 | import pages from "./pages" 18 | // icons 19 | import DarkModeIcon from "@mui/icons-material/DarkMode"; 20 | import TwitterIcon from "@mui/icons-material/Twitter"; 21 | import GitHubIcon from "@mui/icons-material/GitHub"; 22 | import SearchIcon from "@mui/icons-material/Search"; 23 | import YouTubeIcon from "@mui/icons-material/YouTube"; 24 | import LightModeIcon from "@mui/icons-material/LightMode"; 25 | import Drawer from "./Drawer"; 26 | 27 | function Navbar({ ColorModeContext }) { 28 | const [toggle, setToggle] = useState(true) 29 | 30 | const router = useRouter(); 31 | const theme = useTheme(); 32 | const { pathname } = router; 33 | const colorMode = useContext(ColorModeContext); 34 | 35 | const appbar = { 36 | backgroundColor: `${pathname === "/" ? "transparent" : "#1976d2"}`, 37 | boxShadow: `${pathname === "/" && "none"}`, 38 | position: "none", 39 | }; 40 | 41 | const handleClick = () => { 42 | setToggle(!toggle); 43 | console.log(toggle); 44 | 45 | } 46 | return ( 47 | 192 | ); 193 | } 194 | export default Navbar; 195 | -------------------------------------------------------------------------------- /components/navbar/Search.js: -------------------------------------------------------------------------------- 1 | import { InputBase } from "@mui/material"; 2 | import { styled, alpha } from "@mui/material/styles"; 3 | import { useTheme } from "@mui/material/styles"; 4 | 5 | export const Search = styled("div")(({ theme }) => ({ 6 | position: "relative", 7 | borderRadius: "20px", 8 | backgroundColor: alpha(theme.palette.common.white, 1), 9 | color: alpha(theme.palette.common.black, 1), 10 | "&:hover": { 11 | backgroundColor: alpha(theme.palette.common.white, 1), 12 | }, 13 | marginLeft: 0, 14 | width: "100%", 15 | [theme.breakpoints.up("md")]: { 16 | marginLeft: theme.spacing(1), 17 | width: "auto", 18 | }, 19 | })); 20 | 21 | export const SearchIconWrapper = styled("div")(({ theme }) => ({ 22 | padding: theme.spacing(0, 2), 23 | height: "100%", 24 | position: "absolute", 25 | pointerEvents: "none", 26 | display: "flex", 27 | alignItems: "center", 28 | justifyContent: "center", 29 | })); 30 | 31 | export const StyledInputBase = styled(InputBase)(({ theme }) => ({ 32 | color: "inherit", 33 | "& .MuiInputBase-input": { 34 | padding: theme.spacing(1, 1, 1, 0), 35 | paddingLeft: `calc(1em + ${theme.spacing(4)})`, 36 | transition: theme.transitions.create("width"), 37 | width: "80%", 38 | [theme.breakpoints.up("sm")]: { 39 | width: "13ch", 40 | "&:focus": { 41 | width: "15ch", 42 | }, 43 | }, 44 | }, 45 | })); 46 | 47 | -------------------------------------------------------------------------------- /components/navbar/pages.js: -------------------------------------------------------------------------------- 1 | const pages = [ 2 | { 3 | id: 1, 4 | name: "FEATURES", 5 | path: "/features", 6 | }, 7 | { 8 | id: 2, 9 | name: "RESOURCES", 10 | path: "/resources", 11 | }, 12 | ]; 13 | 14 | export default pages -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-next-web", 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 | "@emotion/react": "^11.10.4", 13 | "@emotion/styled": "^11.10.4", 14 | "@mui/icons-material": "^5.10.9", 15 | "@mui/lab": "^5.0.0-alpha.104", 16 | "@mui/material": "^5.10.10", 17 | "@mui/x-data-grid": "^5.17.8", 18 | "next": "12.3.1", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0" 21 | }, 22 | "devDependencies": { 23 | "eslint": "8.26.0", 24 | "eslint-config-next": "12.3.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import { useState, useMemo, createContext } from "react"; 3 | import Footer from "../components/footer/Footer"; 4 | import Navbar from "../components/navbar/Navbar"; 5 | import { ThemeProvider, createTheme } from "@mui/material/styles"; 6 | import CssBaseline from "@mui/material/CssBaseline"; 7 | 8 | function MyApp({ Component, pageProps }) { 9 | const [mode, setMode] = useState("light"); 10 | const ColorModeContext = createContext({ toggleColorMode: () => {} }); 11 | const colorMode = useMemo( 12 | () => ({ 13 | toggleColorMode: () => { 14 | setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); 15 | }, 16 | }), 17 | [] 18 | ); 19 | 20 | const theme = useMemo( 21 | () => 22 | createTheme({ 23 | palette: { 24 | mode, 25 | }, 26 | }), 27 | [mode] 28 | ); 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 |