Britton/next-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

trying out responsive hero on mac

Browse Source
This commit is contained in:
Jason Jordan
2025-07-10 11:52:38 -04:00
parent 06f29c816a
commit 76a1a828dc
7 changed files with 106 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tagline.tsx
+23 -3
View File
@@ -3,7 +3,6 @@
import { textColor, bgColor } from '@/interfaces/common'
interface TaglineProps {
className?: string;
bgColor: bgColor;
textColor: textColor;
textTop: string;
@@ -11,7 +10,7 @@ interface TaglineProps {
}
const Tagline: React.FC<TaglineProps> = (
{ className,
{
bgColor,
textColor,
textTop,
@@ -20,7 +19,8 @@ const Tagline: React.FC<TaglineProps> = (
) => {
return (
<div className='h-[calc(100vh-85px)]'>
<>
{/* <div className='h-[calc(100vh-85px)]'>
<div className="w-full h-screen aspect-16/9 absolute top-0 left-0 bg-britton-medium bg-blend-soft-light bg-[url('/images/bg.jpg')] bg-cover bg-position-[center_-4.5rem] rounded-b-3xl">
<div className="flex flex-col justify-center items-center py-20">
<div className="w-11/12 flex justify-start mt-58">
@@ -35,7 +35,27 @@ const Tagline: React.FC<TaglineProps> = (
</div>
</div>
</div>
</div> */}
<div className='h-[calc(100vh-85px)] lg:min-h-[640px] xl:min-h-[786px] 2xl:min-h-[1080px] flex'>
<div className="absolute top-0 left-0 w-full aspect-16/9 bg-cover bg-center bg-[url('/images/bg.jpg')] bg-britton-medium bg-blend-soft-light bg-position-[center_-4.5rem] rounded-b-3xl">
<div className="relative w-full h-full overflow-hidden">
<div className="absolute flex flex-col w-3/7 top-1/2 right-9/40">
<div className="flex justify-start">
<div className="w-4/5 relative bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl rounded-out-br-3xl py-3 px-4">
{textTop}
</div>
</div>
<div className="flex justify-end">
<div className="w-4/5 relative bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl rounded-out-tl-3xl py-3 px-4">
{textBottom}
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};