md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed homepage design

Browse Source
This commit is contained in:
Md Asif
2024-09-30 23:43:30 +05:30
parent 8022e3a662
commit 45bc3eff57
8 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Footer.jsx
View File

@@ -1,7 +1,8 @@
function Footer() {
return (
<footer>
<p>© 2021</p>
<footer className="flex justify-between p-2 px-7 font-body bg-tertiary text-sm text-primary dark:bg-tertiary-dark dark:text-primary-dark">
<p>Copyright © 2023, Tata Consultancy Services. All rights reserved</p>
<p>Privacy Policy | Terms of Use</p>
</footer>
);
}

10
src/components/FormBox.jsx
View File

@@ -1,9 +1,10 @@
import { PropTypes } from 'prop-types';
import clsx from 'clsx';
function FormBox({title, children}) {
function FormBox({title, children, alt = false}) {
return (
<div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
<label className='font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full'>{title}</label>
<div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
<label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>{title}</label>
{children}
</div>
);
@@ -11,7 +12,8 @@ function FormBox({title, children}) {
FormBox.propTypes = {
children: PropTypes.node.isRequired,
title: PropTypes.string.isRequired
title: PropTypes.string.isRequired,
alt: PropTypes.bool,
};
export default FormBox;

6
src/components/MenuBar.jsx
View File

@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
const SubMenu = ({ items }) => {
const {t} = useTranslation();
return (
<div className="
hidden absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
<div className="invisible opacity-0
absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary -translate-y-6
dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary z-50 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-200"
>
{items.map((subItem, index) => (
<div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">

2
src/components/Separator.jsx
View File

@@ -1,7 +1,7 @@
function Separator() {
return (
<div className="h-[2px]">
<div className="h-full w-full bg-white dark:bg-primary rounded-md"></div>
<div className="h-full w-full bg-white dark:bg-primary-dark rounded-md"></div>
</div>
)
}