diff --git a/components/Flyoutmenu.txt b/components/Flyoutmenu.txt new file mode 100644 index 0000000..bbcd885 --- /dev/null +++ b/components/Flyoutmenu.txt @@ -0,0 +1,76 @@ +import { Fragment } from 'react' +import { Popover, Transition } from '@headlessui/react' +import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid' +import { + ArrowPathIcon, + ChartPieIcon, + CursorArrowRaysIcon, + FingerPrintIcon, + SquaresPlusIcon, +} from '@heroicons/react/24/outline' + +const solutions = [ + { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon }, + { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon }, + { name: 'Security', description: "Your customers' data will be safe and secure", href: '#', icon: FingerPrintIcon }, + { name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: SquaresPlusIcon }, + { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon }, +] +const callsToAction = [ + { name: 'Watch demo', href: '#', icon: PlayCircleIcon }, + { name: 'Contact sales', href: '#', icon: PhoneIcon }, +] + +export default function Example() { + return ( + + + Solutions + + + + +
+
+ {solutions.map((item) => ( +
+
+
+
+ + {item.name} + + +

{item.description}

+
+
+ ))} +
+
+ {callsToAction.map((item) => ( + + + ))} +
+
+ + + + ) +} \ No newline at end of file diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 2da7355..a9db752 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,68 +1,85 @@ +import { useState } from 'react' +import { Dialog } from '@headlessui/react' +import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' +import { navitems } from '../public/_data/navbar' +import Link from 'next/link' -import { navitems } from "../public/_data/navbar"; -import Image from "next/image"; -import Link from "next/link"; -import { useState } from "react"; -import logo from "../public/logo.svg"; - -type Props = { - children?: React.ReactNode; -} - -export default function Navbar(props: Props) { - const [isOpen, setIsopen] = useState(false); - const ToggleSidebar = () => { - isOpen === true ? setIsopen(false) : setIsopen(true); - }; +export default function Navbar() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return ( <> - - - + + + + + - ); -} \ No newline at end of file + ) +} diff --git a/package-lock.json b/package-lock.json index 6f86b39..35ab704 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", + "@headlessui/react": "^1.7.14", + "@heroicons/react": "^2.0.17", "@mui/material": "^5.12.1", "@types/node": "18.15.13", "@types/react": "18.0.38", @@ -349,6 +351,29 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz", + "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==", + "dependencies": { + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@heroicons/react": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.17.tgz", + "integrity": "sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", diff --git a/package.json b/package.json index cd2c7a4..f5d07bb 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "dependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", + "@headlessui/react": "^1.7.14", + "@heroicons/react": "^2.0.17", "@mui/material": "^5.12.1", "@types/node": "18.15.13", "@types/react": "18.0.38", diff --git a/public/_data/navbar.ts b/public/_data/navbar.ts index f10a28a..99c21f5 100644 --- a/public/_data/navbar.ts +++ b/public/_data/navbar.ts @@ -1,6 +1,6 @@ export const navitems = [ - { id: 1, item: "Jobs", pageRoute: "jobs" }, + { id: 1, item: "Jobs", pageRoute: "/jobs" }, { id: 2, item: "Dashboard", pageRoute: "dashboard" }, { id: 3, item: "Orders", pageRoute: "orders" }, - { id: 3, item: "Notifications", pageRoute: "notifications" }, + { id: 4, item: "Notifications", pageRoute: "notifications" }, ]; diff --git a/public/icons/bx-chevron-down.svg b/public/icons/bx-chevron-down.svg new file mode 100644 index 0000000..c0617eb --- /dev/null +++ b/public/icons/bx-chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bce63b0..9315019 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,12 +7,12 @@ import Navbar from '../../components/Navbar' export default function Home() { return ( <> -
+
-

The ultimate teams app

+

The ultimate teams app

) diff --git a/src/pages/jobs/index.tsx b/src/pages/jobs/index.tsx index 3379e4d..9660cc3 100644 --- a/src/pages/jobs/index.tsx +++ b/src/pages/jobs/index.tsx @@ -1,9 +1,70 @@ -import React from 'react' +import React, { useState } from 'react' +import Link from "next/link" +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + + export default function Jobs() { return ( <> - + ) } + + + +function TabButtons() { + const [tabIndex, setTabIndex] = useState(0); + const handleTabChange = (event: any, newTabIndex: number) => { + setTabIndex(newTabIndex); + } + return ( + <> + + + + + + + + + + + + {tabIndex === 0 && ( + + + The first tab + + )} + {tabIndex === 1 && ( + + + The second tab + + + )} + {tabIndex === 2 && ( + + The third tab + + )} + {tabIndex === 3 && ( + + The fourth tab + + )} + + + + ) +} \ No newline at end of file diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx new file mode 100644 index 0000000..260cd1a --- /dev/null +++ b/src/pages/projects/index.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function Projects() { + return ( + <> + + + ) +} diff --git a/tailwind.config.js b/tailwind.config.js index d53b2ea..d619e6c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,15 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + + // Or if using `src` directory: + "./src/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, + extend: {}, }, plugins: [], -} +} \ No newline at end of file