Skip to content

213 update header and footer #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Deepthi-Chand merged 8 commits into from
Mar 25, 2025
Merged

213 update header and footer #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c659991
update opub version
sanjaypinna Mar 24, 2025
aad5b76
add primary blue color
sanjaypinna Mar 24, 2025
103fcb4
add logo
sanjaypinna Mar 24, 2025
372c807
update header UI as per hi-fi designs
sanjaypinna Mar 24, 2025
1fda73a
update dashboard header
sanjaypinna Mar 24, 2025
4bdd057
update footer and add secondary color
sanjaypinna Mar 25, 2025
c0975c2
add search and update active navigation color
sanjaypinna Mar 25, 2025
316c639
replace logo and add globe
sanjaypinna Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions app/[locale]/(user)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { notFound, usePathname } from 'next/navigation';
import { Icon, Text } from 'opub-ui';
import React from 'react';

import { Icons } from '@/components/icons';
import MainFooter from '../dashboard/components/main-footer';
import { MainNav } from '../dashboard/components/main-nav';

Expand All @@ -25,12 +21,7 @@ export default function Layout({ children }: UserLayoutProps) {

return (
<div className="flex h-full grow flex-col">
<header
className="relative z-2 px-4 py-3 shadow-elementTopNav"
style={{
backgroundColor: 'var( --background-alpha-medium)',
}}
>
<header className="relative z-2 p-6 lg:px-10 lg:py-6 shadow-elementTopNav bg-primaryBlue">
<MainNav hideSearch={hideSearch} />
</header>
<>{children}</>
Expand Down
104 changes: 44 additions & 60 deletions app/[locale]/dashboard/components/main-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,64 @@ import Link from 'next/link';
import { Icon, Text } from 'opub-ui';

import { Icons } from '@/components/icons';
import { IconBinary, IconBinaryTree } from '@tabler/icons-react';

const MainFooter = () => {
return (
<>
<div
style={{
backgroundColor: 'var( --background-alpha-medium)',
}}
>
<div className="flex flex-wrap items-center justify-start gap-8 p-10 md:justify-center lg:justify-center lg:gap-32 ">
<div className="flex items-center gap-8 ">
<Link href="/">
<div className="flex items-center gap-2">
<Icon source={Icons.logo} size={24} color="success" />
<div className="bg-primaryBlue">
<div className="flex flex-col gap-8 p-6 lg:px-28 lg:py-10">
<div className="flex flex-wrap justify-between gap-8 ">
{' '}
<div className="flex items-center gap-2">
<Image src={'/logo.png'} width={38} height={38} alt="logo" />
<Text variant="headingXl" className="text-surfaceDefault" as="h1">
CivicDataSpace
</Text>
</div>
<div className=" flex flex-col lg:items-end gap-2">
<div>
{' '}
<Text
variant="headingLg"
className="text-surfaceDefault"
as="h1"
color="highlight"
className=" font-bold text-borderWarningSubdued"
>
CivicDataSpace
Follow Us
</Text>
</div>
</Link>
<div>
<Link href={'https://civicdatalab.in'} target="_blank">
<Image src={'/cdl.svg'} width={96} alt={'cdl'} height={94} />
</Link>{' '}

<div className=" flex gap-3">
<div className=" h-10 w-10 rounded-5 bg-secondaryOrange p-2">
<Icon source={Icons.twitter} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-secondaryOrange p-2">
<Icon source={Icons.linkedin} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-secondaryOrange p-2">
<Icon source={Icons.facebook} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-secondaryOrange p-2">
<Icon source={Icons.github} size={24} color="onBgDefault" />
</div>
</div>
</div>
</div>
<div className=" flex gap-6">
<Link href={'#'} className=" text-baseIndigoSolid2">
About Us
</Link>
<Link href={'#'} className=" text-baseIndigoSolid2">
Sitemap
</Link>
<Link href={'#'} className=" text-baseIndigoSolid2">
Contact Us
</Link>
</div>
<div className=" flex flex-col gap-2">
<Text
color="highlight"
className=" font-bold text-borderWarningSubdued"
>
Follow Us
</Text>
<div className=" flex gap-3">
<div className=" h-10 w-10 rounded-5 bg-baseBlueSolid8 p-2">
<Icon source={Icons.twitter} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-baseBlueSolid8 p-2">
<Icon source={Icons.linkedin} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-baseBlueSolid8 p-2">
<Icon source={Icons.facebook} size={24} color="onBgDefault" />
</div>
<div className=" h-10 w-10 rounded-5 bg-baseBlueSolid8 p-2">
<Icon source={Icons.github} size={24} color="onBgDefault" />
</div>
<div className=" flex justify-between flex-wrap">
<div className=" flex gap-6">
<Link href={'#'}>
<Text color="onBgDefault"> About Us</Text>
</Link>
<Link href={'#'}>
<Text color="onBgDefault"> Sitemap</Text>
</Link>
<Link href={'#'}>
<Text color="onBgDefault"> Contact Us</Text>
</Link>
</div>

</div>
</div>
</div>
<div className=" bg-baseBlueSolid6 p-2">
<div className=" m-auto flex items-center gap-2 md:pl-4 lg:w-5/6 lg:pl-8">
<Icon source={Icons.info} size={24} />

<Text variant="bodyMd">
This Platform is designed, developed and hosted by CivicDataLab for
Data Exchange
</Text>
</div>
</div>
</>
);
};
Expand Down
Loading
Loading