feat: update About page layout with new InfoCard and improved grid structure

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-19 21:31:55 +07:00
parent ee8c5ecc1f
commit c621257533
2 changed files with 30 additions and 8 deletions

View File

@ -22,7 +22,7 @@ const InfoCard = ({ imageSrc, imageAlt, heading, content, link, buttonText }: Ca
</p> </p>
))} ))}
<Link href={link}> <Link href={link}>
<Button className="p-5 font-semibold text-base mt-5">{buttonText}</Button> <Button className="p-6 font-semibold text-base mt-5">{buttonText}</Button>
</Link> </Link>
</div> </div>
); );

View File

@ -1,8 +1,5 @@
"use client"; "use client";
import Image from "next/image";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import InfoCard from "./infoCard"; import InfoCard from "./infoCard";
export default function About() { export default function About() {
@ -45,6 +42,7 @@ export default function About() {
const imageData = { const imageData = {
img1: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/individual_investors-0e85dfd02359a24ac4b232be008c7168fc57d3437a2f526f5d5889b874b20221.png", img1: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/individual_investors-0e85dfd02359a24ac4b232be008c7168fc57d3437a2f526f5d5889b874b20221.png",
img2: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/accredited_investors-42d6aa046861adb7f0648f26ca3f798b07f3b13bf7024f7dc17c17acb78fdf2c.png", img2: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/accredited_investors-42d6aa046861adb7f0648f26ca3f798b07f3b13bf7024f7dc17c17acb78fdf2c.png",
img3: "https://assets.republic.com/assets/static_pages/about/growth_opportunities/entrepreneurs-a0ff450c2f3ba0cea82e2c55cd9265ad5612455c79ec831adaa2c94d09a0e617.png",
}; };
return ( return (
@ -60,7 +58,7 @@ export default function About() {
</h1> </h1>
</div> </div>
<div className="mt-10"> <div className="mt-10">
<div className="grid grid-cols-2"> <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-3">
<InfoCard <InfoCard
imageSrc={imageData.img1} imageSrc={imageData.img1}
imageAlt="Image1" imageAlt="Image1"
@ -74,10 +72,34 @@ export default function About() {
link="/deals" link="/deals"
buttonText="Explore opportunities" buttonText="Explore opportunities"
/> />
<Separator orientation="vertical"></Separator> <Separator orientation="vertical" />
<div></div> <InfoCard
imageSrc={imageData.img2}
imageAlt="Image2"
heading="Accredited investors"
content={[
"The benefits of the Republic platform, optimized for",
"accredited investors. Access a curated investor",
"portal for unique private investment opportunities. ",
]}
link="/dataroom/overview"
buttonText="Learn more"
/>
</div> </div>
<div></div> <Separator className="mt-5 mb-5" />
<InfoCard
imageSrc={imageData.img3}
imageAlt="Image3"
heading="Entrepreneurs"
content={[
"Seek funding from a wider base of diverse",
"investors while simultaneously growing a loyal",
"base and leveraging Republics private investment",
"network.",
]}
link="/project/apply"
buttonText="Raise money"
/>
</div> </div>
{/* <div className="border border-border rounded-md"> {/* <div className="border border-border rounded-md">