diff --git a/app/globals.css b/app/globals.css index 7cc41ff..c25bf69 100644 --- a/app/globals.css +++ b/app/globals.css @@ -5,7 +5,7 @@ @layer base { :root { @apply font-body; - @apply text-base; + @apply text-xl; @apply text-neutral-700; --accent: 0, 128, 108; --accent-light: 0, 230, 195; @@ -24,18 +24,9 @@ } body { - @apply grid; - @apply bg-neutral-50; - grid-template-columns: - 1fr - min(1000px, 100%) - 1fr; + @apply bg-white; } - body > * { - grid-column: 2; - @apply px-3; - } } diff --git a/app/layout.tsx b/app/layout.tsx index 91309b8..fa35bf3 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import React from "react" +import Navbar from "@/components/Navbar" const inter = Inter({ subsets: ["latin"] }) @@ -17,7 +18,10 @@ export default function RootLayout({ }>) { return ( - {children} + + + {children} + ) } diff --git a/app/page.tsx b/app/page.tsx index 4d5c1db..a112e01 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,9 +4,6 @@ import LogoCcv from "@/components/assets/LogoCcv" export default function Home() { return ( -
- - -
+
) } diff --git a/components/NavLinks.tsx b/components/NavLinks.tsx new file mode 100644 index 0000000..b9e7b8a --- /dev/null +++ b/components/NavLinks.tsx @@ -0,0 +1,55 @@ +"use client" +import Link from "next/link" +import { usePathname } from "next/navigation" +import { DisclosureButton } from "@headlessui/react" +import React from "react" + +interface NavLinksProps { + linkType?: string +} + +const NavLinks: React.FC = ({ linkType }) => { + const paths = [ + { slug: "/services", title: "Services" }, + { slug: "/our-work", title: "Our Work" }, + { slug: "/help", title: "Help" }, + { slug: "/about", title: "About" }, + { slug: "/blog", title: "Blog" }, + ] + const pathname = usePathname() + if (linkType === "mobile") { + //block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 + return ( + <> + {paths.map((path) => { + return ( + + {path.title} + + ) + })} + + ) + } + return ( + <> + {paths.map((path) => { + return ( + + {path.title} + + ) + })} + + ) +} +export default NavLinks diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..da1e0c8 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,100 @@ +import LogoCcv from "@/components/assets/LogoCcv" +import LogoBrown from "@/components/assets/LogoBrown" +import NavLinks from "@/components/NavLinks" + +import { + Disclosure, + DisclosureButton, + DisclosurePanel, +} from "@headlessui/react" +import { + MagnifyingGlassIcon, + DocumentTextIcon, +} from "@heroicons/react/20/solid" +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline" +import Link from "next/link" + +const Navbar = () => { + return ( + +
+
+
+
+ + Brown IT Website + + + + Home + + +
+
+ +
+
+ {/* Mobile menu button */} + + + Open main menu + +
+
+
+ + +
+ +
+
+
+ +
+
+
+
+
+ + +
+ +
+ + + ) +} +export default Navbar diff --git a/components/assets/LogoBrown.tsx b/components/assets/LogoBrown.tsx index 9fbdfdb..b316dc6 100644 --- a/components/assets/LogoBrown.tsx +++ b/components/assets/LogoBrown.tsx @@ -1,6 +1,11 @@ import React from "react" -const LogoBrown: React.FC = () => { +export interface LogoProps { + width?: number + height?: number +} + +const LogoBrown: React.FC = ({ width = 75 }) => { return ( <> { xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" - width="100%" + width={width} viewBox="0 0 3078 1273" enableBackground="new 0 0 3078 1273" > diff --git a/components/assets/LogoCcv.tsx b/components/assets/LogoCcv.tsx index a4cc1a2..bc6acd0 100644 --- a/components/assets/LogoCcv.tsx +++ b/components/assets/LogoCcv.tsx @@ -1,12 +1,14 @@ import React from "react" +import { LogoProps } from "@/components/assets/LogoBrown" -const LogoCcv: React.FC = () => { +const LogoCcv: React.FC = ({ width = 75 }) => { return ( <>