Skip to content
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

Stylistic fixes and adding join button #85

Merged
merged 3 commits into from
Feb 19, 2024
Merged

Stylistic fixes and adding join button #85

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bdb207e
feat(home): Add join us button at end of page
rayokamoto Feb 19, 2024
efae946
fix(home): Center sponsors on screen resize
rayokamoto Feb 19, 2024
73214f9
feat(home): Use join us link instead of button
rayokamoto Feb 19, 2024
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
64 changes: 39 additions & 25 deletions src/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Button from '@/components/Button';
import Duck from '@/components/Duck';
import FancyRectangle from '@/components/FancyRectangle';
import ImageCarousel from '@/components/ImageCarousel';
Expand Down Expand Up @@ -189,7 +190,7 @@ export default function HomePage() {

<div>
<h3>Supported By </h3>
<div className="flex flex-col md:flex-row">
<div className="flex flex-col smr:flex-row">
<h3 className="mb-2 mr-2 md:mb-0">Industry&apos;s </h3>
<FancyRectangle colour="orange" offset="6" filled={false}>
<div className="w-fit bg-orange px-2">
Expand All @@ -205,10 +206,10 @@ export default function HomePage() {
if (sponsors.length === 0) return;
return (
<Fragment key={type}>
<h3 className="text-2xl font-black capitalize lg:text-3xl">
<h3 className="text-center text-2xl font-black capitalize smr:text-left lg:text-3xl">
{type} Sponsors
</h3>
<div className="flex flex-wrap gap-6 pb-2">
<div className="flex flex-wrap justify-center gap-6 pb-2 smr:justify-start">
{sponsors.map(({ image, website, name }, i) => (
<a href={website} key={i} className="block" target="_blank">
<FancyRectangle colour="white" offset="10">
Expand All @@ -230,41 +231,54 @@ export default function HomePage() {
</section>

{/* CTA part 2 */}
<section>
<section className="mb-[1em] lg:mb-[6em] xl:mb-[10em]">
<div className="h-24"></div>
<div className="mb-[3em] md:mb-[8.75em] lg:md:mb-[11.3em]">
<div className="mb-[3em] md:mb-[8em] lg:mb-[6em]">
{/* <Grid /> */}
<Image
src="/images/rectangle-grid.svg"
alt="Rectangle Grid"
width={500}
height={500}
className="absolute -z-10 mt-12 w-[20em] md:w-[35em] lg:w-[35em]"
className="absolute -z-10 mt-10 w-[25em] md:w-[40em] lg:w-[45em]"
/>
</div>

<div className="relative z-10 ml-[2.5em] flex w-fit flex-col md:ml-[4.4em]">
<div className="relative mb-2 flex flex-row justify-end space-x-4 *:h-8 md:*:h-10">
<Duck colour="white" outline />
<Duck colour="white" outline />
<Duck colour="white" />
<Duck colour="white" />
<Duck colour="white" />
<div className="z-10 flex flex-col gap-20 xl:flex-row">
<div className="relative z-10 flex w-fit flex-col xl:ml-12">
<div className="relative mb-2 flex flex-row justify-end space-x-4 *:h-8 md:*:h-10">
<Duck colour="white" outline />
<Duck colour="white" outline />
<Duck colour="white" />
<Duck colour="white" />
<Duck colour="white" />
</div>
<div className="relative z-10 flex flex-row">
<div className="h-auto w-16 bg-orange"></div>
<div className="relative flex flex-col">
<span className="relative bg-white py-8 pl-4 pr-16 text-3xl font-black text-black lg:pr-32 lg:text-6xl">
Thinking about <span className="text-orange">Joining?</span>
</span>
<p className="border-2 border-white bg-grey py-4 pl-4 pr-16 text-lg lg:pr-32 lg:text-xl">
New members are always welcome!
</p>
</div>
</div>{' '}
</div>
<div className="relative z-10 flex flex-row">
<div className="h-auto w-10 bg-orange"></div>
<div className="relative flex flex-col">
<span className="relative bg-white px-4 py-2 text-2xl font-black text-black lg:text-3xl">
Thinking about <span className="text-orange"> Joining?</span>
</span>
<p className="border-2 border-white bg-grey px-4 py-2 text-lg lg:text-xl">
New members are always welcome!
</p>

<div className="h-fill flex flex-row justify-center py-4 xl:flex-col">
<div className="w-fit">
<Button
colour="purple"
href="/join"
width="w-64"
font="text-center text-black text-xl md:text-4xl lg:text-5xl"
>
Join Us
</Button>
</div>
</div>{' '}
</div>
</div>

<div className="h-16 smr:h-24 md:h-32 lg:h-20"></div>
</section>
</main>
);
Expand Down
5 changes: 3 additions & 2 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ interface ButtonProps {
type?: 'button' | 'submit' | 'reset';
width?: string;
loading?: boolean;
font?: string;
}

const Button = ({ children, colour, href, onClick, width, type, loading }: ButtonProps) => {
const Button = ({ children, colour, href, onClick, width, type, loading, font }: ButtonProps) => {
const isAnchor = !!href;
const Component = isAnchor ? 'a' : 'button';

Expand All @@ -23,7 +24,7 @@ const Button = ({ children, colour, href, onClick, width, type, loading }: Butto
href={isAnchor ? href : undefined}
onClick={onClick}
type={isAnchor ? undefined : type}
className={`${width} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 text-lg font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 lg:px-6 lg:py-2`}
disabled={loading}
>
{children}
Expand Down
Loading