some responsive changes
This commit is contained in:
@@ -47,7 +47,7 @@ const InfoCard: React.FC<InfoCardProps> = (
|
||||
})}>
|
||||
<div className={classnames({
|
||||
"hidden" : !invert,
|
||||
"after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
|
||||
"after:absolute after:bottom-0 after:right-0 after:w-full after:h-[calc(100%-(var(--spacing)*23.5))] after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
|
||||
})}/>
|
||||
<div className={classnames("flex flex-col w-7/12")}>
|
||||
<div className={classnames(
|
||||
|
||||
@@ -21,23 +21,13 @@ const LandingPage: React.FC<LandingPageProps> = ({
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="absolute bottom-0 left-0 flex items-end w-full h-full">
|
||||
<div className="w-1/24 h-full flex justify-end">
|
||||
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||
<div className={classnames(
|
||||
"relative h-full border-l-6 rounded-out-br-4xl bg-bluetang border-atmosphere"
|
||||
)} />
|
||||
{/* <div className={classnames(
|
||||
"h-9 rounded-bl-4xl border-b-6 border-l-6",
|
||||
stripeColor, `border-${underlineBorder}`
|
||||
)} /> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="w-11/12 flex justify-start">
|
||||
<div className="w-1/24 h-full flex justify-end">
|
||||
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||
<div className={classnames(
|
||||
"w-full h-9 border-b-6 rounded-br-4xl",
|
||||
stripeColor, `border-${underlineBorder}`
|
||||
"relative h-full border-l-6 rounded-out-br-4xl bg-bluetang border-atmosphere"
|
||||
)} />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-start items-end pt-30">
|
||||
<div className="w-1/24 h-full flex justify-end">
|
||||
@@ -68,7 +58,7 @@ const LandingPage: React.FC<LandingPageProps> = ({
|
||||
<div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
|
||||
<div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
|
||||
</div>
|
||||
<div className={classnames("w-3/5 flex flex-col justify-center z-2")}>
|
||||
<div className={classnames("w-3/5 flex flex-col justify-center text-platinum z-2")}>
|
||||
<div className={classnames("text-4xl pb-8")}>
|
||||
Quick Access to Your Services
|
||||
</div>
|
||||
|
||||
@@ -18,11 +18,10 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||
|
||||
export default function Member() {
|
||||
return (
|
||||
<div className="relative w-full h-200">
|
||||
<div className="relative w-full h-full">
|
||||
<div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
|
||||
<div className="w-full -mb-[2px] flex justify-start">
|
||||
<div className="w-31 bg-atmosphere border-b-2 border-copper" />
|
||||
<div className="w-21/24 h-20 border-b-2 border-copper" />
|
||||
<div className="w-23/24 h-20 border-b-2 border-copper" />
|
||||
</div>
|
||||
<div className="w-1/24 h-full flex justify-start">
|
||||
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||
@@ -33,17 +32,20 @@ export default function Member() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full flex flex-col justify-start items-center">
|
||||
<div className="w-21/24">
|
||||
<div className="w-full">
|
||||
<div className="h-20 flex justify-between items-center">
|
||||
<div className={classnames('-ml-[1px] z-1')}>
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
width={205}
|
||||
height={60}
|
||||
/>
|
||||
<div className={classnames('flex items-center')}>
|
||||
<div className="w-31 h-20 bg-atmosphere" />
|
||||
<div className="-ml-8.5">
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
width={205}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mr-[55px] z-1">
|
||||
<div className="z-1 pr-20">
|
||||
<AccountDropdown userRole="member" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,7 +74,7 @@ export default function Member() {
|
||||
Benefits Documents
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex w-21/24 ml-8 pt-4">
|
||||
<div className="flex w-21/24 2xl:w-11/12 ml-8 pt-5 2xl:pt-7">
|
||||
<div className="w-full flex flex-col justify-start">
|
||||
<div className={classnames(
|
||||
"-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
|
||||
@@ -81,16 +83,16 @@ export default function Member() {
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className={classnames(
|
||||
"w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[20px]"
|
||||
"w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
|
||||
)}>
|
||||
</div>
|
||||
<div className="w-1/24 h-full flex justify-end">
|
||||
<div className="w-[calc(50%+10px)] flex flex-col justify-start z-1 bg-deepcove">
|
||||
<div className="w-1/21 h-full flex justify-end 2xl:pr-7.5">
|
||||
<div className="w-[calc(50%+6px)] 2xl:w-[calc(100%-6px)] flex flex-col justify-start z-1 bg-deepcove">
|
||||
<div className={classnames(
|
||||
"h-9 -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
|
||||
"h-9 w-full -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
<div className={classnames(
|
||||
"h-9 -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
|
||||
"h-9 w-full -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user