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.

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

Adding prismic integration #58

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
46 changes: 23 additions & 23 deletions app/components/about-page/about-component.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
export interface AboutProps {
image?: string;
title?: string;
description?: string;
}

const WeAreComponent = ({ image, title, description }: AboutProps) => {
return (
<div className="flex flex-col">
<img
src={image ?? "app/icons/community.png"}
alt={title ?? "About component image"}
className="h-full object-cover shadow-lg mb-4"
/>
<p className="text-2xl text-indigo-600 pt-9 pb-3"> {title ?? "Title"}</p>
<p className="py-4 text-base text-gray-500">
{description ?? "Lorem ipsum."}
</p>
</div>
);
};

export default WeAreComponent;
export interface AboutProps {
image?: string;
title?: string;
description?: string;
}
const WeAreComponent = ({ image, title, description }: AboutProps) => {
return (
<div className="flex flex-col">
<img
src={image ?? "app/icons/community.png"}
alt={title ?? "About component image"}
className="h-full object-cover shadow-lg mb-4"
/>
<p className="text-2xl text-indigo-600 pt-9 pb-3"> {title ?? "Title"}</p>
<p className="py-4 text-base text-gray-500">
{description ?? "Lorem ipsum."}
</p>
</div>
);
};
export default WeAreComponent;
2 changes: 1 addition & 1 deletion app/components/about-page/numbers-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,4 @@ const NumbersSection = () => {
);
};

export default NumbersSection;
export default NumbersSection;
2 changes: 1 addition & 1 deletion app/components/about-page/we-are-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ const WeAreComponent = ({ image, title, description }: AboutProps) => {
);
};

export default WeAreComponent;
export default WeAreComponent;
4 changes: 2 additions & 2 deletions app/components/footer/mailing-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ export default function MailingList() {
id="mailing-list-input"
type="email"
placeholder="Email"
className="flex-1 h-12 px-4 border border-r-0 border-[#4a4951] focus:outline-none"
className="flex-1 h-12 px-4 border border-r-0 border-[#4a4951] focus:outline-none object-cover shadow-buttonlight"
/>
<button
type="submit"
className="px-6 bg-[#f8ecff] border border-[#4a4951] text-[#333333] text-sm font-bold font-['IBM Plex Sans']"
className="px-6 bg-[#f8ecff] border border-[#4a4951] text-[#333333] text-sm font-bold font-['IBM Plex Sans'] object-cover shadow-button"
>
Join Mailing List!
</button>
Expand Down
1 change: 1 addition & 0 deletions app/components/icons/C4C.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgC4C = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
1 change: 1 addition & 0 deletions app/components/icons/Email.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgEmail = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
1 change: 1 addition & 0 deletions app/components/icons/Github.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgGithub = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
31 changes: 31 additions & 0 deletions app/components/icons/Laptop.tsx

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions app/components/icons/LaptopShadow.tsx

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions app/components/icons/Linkedin.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgLinkedin = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
18 changes: 18 additions & 0 deletions app/components/icons/OpenLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgOpenLink = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
viewBox="0 0 15 15"
{...props}
>
<path
fill="#333"
d="M9.056.875v1.556h2.792l-7.646 7.645L5.3 11.173l7.645-7.646V6.32H14.5V.875m-1.556 12.444H2.056V2.431H7.5V.875H2.056C1.192.875.5 1.575.5 2.431v10.888a1.556 1.556 0 0 0 1.556 1.556h10.888a1.556 1.556 0 0 0 1.556-1.556V7.875h-1.556z"
/>
</svg>
);
export default SvgOpenLink;
1 change: 1 addition & 0 deletions app/components/icons/Site.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const SvgSite = (props: SVGProps<SVGSVGElement>) => (
<svg
Expand Down
3 changes: 3 additions & 0 deletions app/components/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ export { default as Arrow } from "./Arrow";
export { default as C4C } from "./C4C";
export { default as Email } from "./Email";
export { default as Github } from "./Github";
export { default as LaptopShadow } from "./LaptopShadow";
export { default as Laptop } from "./Laptop";
export { default as Linkedin } from "./Linkedin";
export { default as OpenLink } from "./OpenLink";
export { default as Site } from "./Site";
export { default as SoftwareEngineer } from "./SoftwareEngineer";
export { default as WebsiteGear } from "./WebsiteGear";
167 changes: 83 additions & 84 deletions app/components/projects/case.tsx
Original file line number Diff line number Diff line change
@@ -1,108 +1,107 @@
import { ArrowLeftIcon } from "@radix-ui/react-icons";
import { OpenLink } from "../icons";

export interface CaseProps {
logo?: string;
title?: string;
description?: string;
problem_statement?: string;
solution?: string;
website_image?: string;
link?: string;
logo?: string | null;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why | null? If prismic returns null values by default ( i forgot if they do), then it would make sense for it to be either only string | null or kept as string | undefined and set to undefined wherever it is passed if it is null.

Side note: link?: string directly translates to link: string | undefined. docs

title?: string | null;
introduction?: string | null;
problem_statement?: string | null;
solution?: string | null;
website_image?: string | undefined;
link?: string | undefined;
}

const Case = ({ case: caseData }: { case: CaseProps }) => {
const {
logo,
title,
description,
introduction,
problem_statement,
solution,
website_image,
link,
} = caseData;

return (
<div className="flex flex-col items-center">
<div className="h-[1740.88px] flex-col justify-center items-center gap-[72px] inline-flex">
<div className="w-[1128px] justify-start items-center gap-6 inline-flex">
<div className="text-[#333333] text-5xl font-medium leading-[57.60px]">
{title ?? "Title"}
</div>
</div>
<div className="h-40 flex-col justify-start items-start gap-[98px] flex">
<div className="self-stretch justify-start items-start gap-[120px] inline-flex">
<div className="w-[744px] relative">
<div className="left-0 top-0 absolute text-[#333333] text-4xl font-medium leading-[43.20px]">
Introduction
</div>
<div className="w-[743px] left-[1px] top-[65px] absolute text-[#333333] text-base font-normal leading-tight">
{description ?? "Description"}
</div>
</div>
<div className="w-[264px] h-40 pt-[21px] pb-[20.71px] bg-[#fcfcfc] shadow border-2 border-[#4a4951] justify-center items-center flex">
<img
className="w-[264px] h-[118.29px]"
src={logo ?? "Logo"}
alt={`${title} Logo`}
/>
</div>
</div>
</div>
<div className="h-[311px] px-24 py-[72px] bg-[#fcfcfc] shadow border-2 border-[#4a4951] flex-col justify-start items-start gap-12 flex">
<div className="flex-col justify-start items-start gap-12 flex">
<div className="text-center text-[#6059cd] text-4xl font-medium leading-[43.20px]">
Problem Statement
</div>
<div className="justify-center items-center gap-2.5 inline-flex">
<div className="w-[936px] text-[#333333] text-base font-normal leading-tight">
{problem_statement ?? "Problem Statement"}
</div>
</div>
</div>
</div>
<div className="h-[311px] px-24 py-[72px] bg-[#fcfcfc] shadow border-2 border-[#4a4951] flex-col justify-start items-start gap-12 flex">
<div className="flex-col justify-start items-start gap-12 flex">
<div className="text-center text-[#6059cd] text-4xl font-medium leading-[43.20px]">
Our Solution
</div>
<div className="justify-center items-center gap-2.5 inline-flex">
<div className="w-[936px] text-[#333333] text-base font-normal leading-tight">
{solution ?? "Solution"}
</div>
</div>
</div>
<div className="flex flex-col items-center px-4 md:px-8 lg:px-16">
<div className="w-full max-w-5xl text-left my-8 flex">
<a
className="relative flex items-center justify-center ms-2 me-14"
href={"/projects"}
>
<div
className="absolute inset-0 h-20 w-20 rounded-full
bg-[radial-gradient(circle,_rgba(238,210,255,0.5)_30%,_transparent_70%)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
></div>
<ArrowLeftIcon className="relative z-10 h-8 w-8 text-gray-800" />
</a>
<h1 className="text-3xl md:text-5xl font-medium text-[#333333]">
{title ?? "Title"}
</h1>
</div>
<div className="flex flex-col lg:flex-row w-full max-w-5xl gap-8 my-8">
<div className="flex-1">
<h2 className="text-2xl md:text-4xl font-medium text-[#333333] mb-6">
Introduction
</h2>
<p className="text-base leading-relaxed text-[#333333]">
{introduction ?? "Introduction"}
</p>
</div>
<div className="flex-col justify-start items-center gap-8 flex">
<div className="w-[936px] h-[500.88px] relative">
<div className="w-48 h-48 lg:w-auto lg:h-auto bg-[#fcfcfc] object-cover shadow-default border-2 border-[#4a4951] flex items-center justify-center">
{logo ? (
<img
className="w-[936px] h-[14.55px] left-0 top-[486.33px] absolute opacity-60 mix-blend-multiply"
src="app\icons\image.png"
alt=""
className="max-w-full max-h-full"
src={logo}
alt={`${title} Logo`}
/>
) : (
<span className="text-gray-500">Logo</span>
)}
</div>
</div>

<div className="w-full max-w-5xl bg-[#fcfcfc] object-cover shadow-default border-2 border-[#4a4951] p-6 md:p-16 my-8">
<h2 className="text-2xl md:text-4xl font-medium text-[#6059cd] mb-4 md:mb-8">
Problem Statement
</h2>
<p className="text-base leading-relaxed text-[#333333]">
{problem_statement ?? "Problem Statement"}
</p>
</div>

<div className="w-full max-w-5xl bg-[#fcfcfc] object-cover shadow-default border-2 border-[#4a4951] p-6 md:p-16 my-8">
<h2 className="text-2xl md:text-4xl font-medium text-[#6059cd] mb-4 md:mb-8">
Our Solution
</h2>
<p className="text-base leading-relaxed text-[#333333]">
{solution ?? "Solution"}
</p>
</div>

<div className="w-full max-w-4xl flex flex-col items-center my-8">
<div className="relative w-full max-w-2xl border ">
{website_image && (
<img
className="w-[852.11px] h-[493.70px] left-[43.64px] top-0 absolute"
src="app\icons\laptop.png"
alt=""
className="relative z-10 w-full rounded-lg"
src={website_image}
alt={`${title} Website`}
/>
<div className="w-[685.09px] h-[424.88px] left-[132.25px] top-[22.11px] absolute">
<img
className="w-[685.40px] h-[459.79px] left-[-0.32px] top-[-0.53px] absolute"
src={website_image}
alt={`${title} Website`}
/>
</div>
</div>
<div className="self-stretch h-[38px] bg-[#fcfcfc] flex-col justify-start items-start flex">
<div className="self-stretch px-[18px] py-3 bg-[#fcfcfc] shadow border border-[#4a4951] justify-center items-center gap-2 inline-flex">
<a
href={link}
className="text-center text-[#333333] text-sm font-bold leading-[14px]"
>
Launch Live Website
</a>
</div>
</div>
)}
</div>
{link && (
<a
href={link}
target="_blank"
className="w-full mt-6 bg-[#fcfcfc] text-[#333333] text-center border border-[#4a4951] px-6 py-2 object-cover shadow-button font-bold text-sm hover:bg-[#EDBAFF] transition flex justify-center items-center gap-2"
rel="noreferrer"
>
Launch Live Website <OpenLink />
</a>
)}
</div>
</div>
);
};

export default Case;
export default Case;
Loading