Skip to content

Commit

Permalink
fix: responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@royalpinto007
royalpinto007 committed Nov 12, 2023
1 parent 1d88d26 commit 3324249
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 169 deletions.
2 changes: 1 addition & 1 deletion app/src/components/Contact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Contact() {
</h2>

<form
className="flex flex-col w-full items-left"
className="flex flex-col w-full items-left sm:items-center lg:items-left md:items-left xl:items-left 2xl:items-left"
onSubmit={handleSubmit}
id="contactForm"
>
Expand Down
6 changes: 3 additions & 3 deletions app/src/components/Hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import contact from "../assets/contact.svg";
export default function Example() {
return (
<section id="about">
<div className="bg-black lg:px-10 lg:pt-20 lg:pr-40 pb-7 lg:pb-10 lg:pl-40">
<div className="bg-black lg:px-10 lg:pt-20 lg:pr-40 lg:pb-10 lg:pl-40">
<div className="lg:flex lg:items-center">
<Carousel
leftControl=" "
Expand Down Expand Up @@ -52,13 +52,13 @@ export default function Example() {
/>
</div>
</Carousel>
<div className="sm:pb-20 lg:text-right text-center pt-2 lg:pl-20 lg:ml-20 ">
<div className="sm:pb-0 lg:text-right text-center pt-2 lg:pl-20 lg:ml-20 ">
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl ">
<span style={{ color: "#FF9933" }}>Bhar</span>
<span style={{ color: "#FFFFFF" }}>atG</span>
<span style={{ color: "#138808" }}>oDev</span>
</h1>
<p className="text-center pt-2 sm:pb-40 md:pb-10">
<p className="text-center pt-2 sm:pb-0 md:pb-10">
<span style={{ color: "#FFFFFF" }}>
Website, App & Graphic Design Specialists
</span>
Expand Down
191 changes: 96 additions & 95 deletions app/src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Disclosure } from "@headlessui/react";
import Auth from "./Auth";


const navigation = [
{ name: "Projects", href: "#projects", current: false },
{ name: "Services", href: "#services", current: false },
Expand All @@ -16,104 +15,106 @@ export default function Navbar() {
const isUserSignedIn = false;
return (
<>






<Disclosure as="nav" className="bg-black sticky top-0 left-0 z-50 nav-display">

<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="relative flex h-16">

<div className="flex flex-1 items-center pl-2 sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
<a href="/">
<img
<Disclosure
as="nav"
className="bg-black sticky top-0 left-0 z-50 nav-display"
>
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="relative flex h-16">
<div className="flex flex-1 items-center pl-2 sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
<a href="/">
<img
className="h-8 w-auto pr-4"
src="./logo.png"
alt="BharatGoDev"/>
</a>
</div>
<div className="text-align block ">
<div className="flex sm:space-x-1 md:space-x-4 md:pt-4">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white",
"rounded-md px-2 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
))}
</div>
</div>
</div>

<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
{isUserSignedIn ? (
<Auth />
) : (
<a
href="/login"
className="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
>
Log in
</a>
)}
</div>
</div>
</div>


</Disclosure>
<Disclosure as="nav" className="bg-black sticky top-0 z-50 nav-hidden">
alt="BharatGoDev"
/>
</a>
</div>
<div className="text-align block sm:pt-4 lg:pt-0 md:pt-0 xl:pt-0">
<div className="flex sm:space-x-1 md:space-x-4 md:pt-4">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white",
"rounded-md px-2 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
))}
</div>
</div>
</div>

<Disclosure.Button className="flex top-0 left-0 bg-gray-900 text-white rounded-md">
<svg className="h-6 w-6 text-white left-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</Disclosure.Button>
<Disclosure.Panel className="text-gray-600 sm:hidden ">
<ul className="pt-4 ">
{navigation.map((item) => (
<li key={item.name} className="pb-1">
<a
href={item.href}
className={classNames(
item.current
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white",
"rounded-md px-3 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
</li>
))}
</ul>
{isUserSignedIn ? (
<Auth />
) : (
<a
href="/login"
className="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
{isUserSignedIn ? (
<Auth />
) : (
<a
href="/login"
className="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
>
Log in
</a>
)}
</div>
</div>
</div>
</Disclosure>
<Disclosure as="nav" className="bg-black sticky top-0 z-50 nav-hidden">
<Disclosure.Button className="flex top-0 left-0 bg-gray-900 text-white rounded-md">
<svg
className="h-6 w-6 text-white left-0"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
Log in
</a>
)}

</Disclosure.Panel>

</Disclosure>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</Disclosure.Button>
<Disclosure.Panel className="text-gray-600 sm:hidden ">
<ul className="pt-4 ">
{navigation.map((item) => (
<li key={item.name} className="pb-1">
<a
href={item.href}
className={classNames(
item.current
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white",
"rounded-md px-3 py-2 text-sm font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</a>
</li>
))}
</ul>
{isUserSignedIn ? (
<Auth />
) : (
<a
href="/login"
className="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
>
Log in
</a>
)}
</Disclosure.Panel>
</Disclosure>
</>
);
}
2 changes: 1 addition & 1 deletion app/src/components/Projects.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Example() {
return (
<section id="projects">
<div className="bg-black pb-3">
<div className="bg-black pb-3 pt-20 sm:pt-0 lg:pt-0 md:pt-0 xl:pt-0">
<div className="mx-auto max-w-2xl pb-0 px-4 sm:px-6 sm:py-5 lg:max-w-7xl lg:px-8">
<h2 className="text-2xl font-bold tracking-tight text-white">
{" "}
Expand Down
Loading

0 comments on commit 3324249

Please sign in to comment.