Skip to content
Snippets Groups Projects
Commit 8ca0fe22 authored by Matt Kirby's avatar Matt Kirby
Browse files

Sticky navbar now

parent 36435dd5
No related branches found
No related tags found
1 merge request!8create "Basic components"
export default function Hero() {
return (
<div className="bg-white">
<div className="bg-c-pink">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
<h1 className="text-4xl font-bold tracking-tight text-c-green sm:text-6xl">
Welcome to Daily
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
fugiat veniam occaecat fugiat aliqua.
<p className="mt-6 text-lg leading-8 text-white">
Hello there! Welcome to Daily - a social media plaform focussed on finding the answers to sometimes weird, always wonderful yet totally random daily thoughts.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
className="rounded-md bg-pink-400 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white hover:text-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
className="rounded-md bg-c-green px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-white hover:text-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
>
Sign Up
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
<a href="#" className="text-sm font-semibold leading-6 text-c-green">
Log In <span aria-hidden="true"></span>
</a>
</div>
......
import { FC, Fragment, PropsWithChildren } from 'react'
import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { User } from '@/types/user'
......@@ -30,15 +30,15 @@ type NavBarProps = {
const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
children,
user
}) => {
}) => {
return (
<>
<div className="min-h-full min-w-full">
<Disclosure as="nav" className="bg-c-pink">
<Disclosure as="nav" className="bg-c-pink fixed w-full">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
<div className={`flex h-16 items-center justify-between`}>
{user !== null &&
<div className="flex items-center">
......
......@@ -2,6 +2,7 @@ import NavBar from "@/components/navigation/NavBar";
import AnswerCard from "@/components/post/AnswerCard";
import Post from "@/components/post/Post";
import Question from "@/components/question/Question";
import { useEffect, useState } from "react";
const user = {
Name: 'Tom Cook',
......@@ -14,16 +15,15 @@ const user = {
const Feed = () => {
return(
<>
<div className="w-full">
<NavBar user={user} />
</div>
<div className="flex w-full bg-c-pink flex-col items-center py-3">
<div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
<div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
<div className="p-8">
<div className={`p-8 bg-c-pink`}>
<h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
</div>
<p className="text-c-green">Most recent answer</p>
......
......@@ -24,7 +24,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<main className='min-h-screen bg-c-pink'>
<NavBar user={null}>
{user &&
<Hero />
......
......@@ -18,7 +18,7 @@ const UserPost = () => {
<div className="w-full">
<NavBar user={user} />
</div>
<div className="flex w-full bg-c-pink flex-col items-center py-3">
<div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
<div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
<div className="p-8">
<h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment