Skip to content

update: brand consistency for homepage #4526

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

Merged
carlagn merged 6 commits into from
Feb 22, 2023
Merged

update: brand consistency for homepage #4526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
20d0214
Update icons
Feb 20, 2023
0803598
Tweak ui for homepage
Feb 21, 2023
d066636
Update headings import
Feb 21, 2023
55ba8ff
Add icon to links on more section
Feb 21, 2023
a6120a0
revert headings styling
Feb 21, 2023
82043ce
remove arrows from links on more links section
Feb 22, 2023
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
198 changes: 133 additions & 65 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@
"version": "1.0.0",
"author": "Nilufar Bava <bava@prisma.io>",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/pro-regular-svg-icons": "^6.3.0",
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@mdx-js/loader": "1.6.22",
"@mdx-js/mdx": "1.6.22",
"@mdx-js/react": "1.6.22",
"@philpl/buble": "0.19.7",
"@prisma/client": "^4.8.1",
"@prisma/lens": "0.0.419",
"@prisma/lens": "0.0.420",
"algoliasearch": "4.14.2",
"babel-plugin-styled-components": "2.0.7",
"gatsby": "4.22.1",
Expand Down
36 changes: 36 additions & 0 deletions src/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'
import styled from 'styled-components'

interface IconProps {
icon: IconProp
color?: string
className?: string
width?: string
height?: string
btn?: boolean
}

const FontAwesomeIconHolder = styled(FontAwesomeIcon)<{
width: string
height: string
btn: boolean
}>`
${(props) => (props.width !== '100%' ? `max-width: ${props.width}` : ``)};
${(props) => (props.height !== '100%' ? `max-height: ${props.height}` : ``)};
${(props) => (props.btn ? `margin-left: 8px;` : '')}
height: 100%;
width: 100%;
`

export const Icon = ({ icon, color, className, width, height, btn }: IconProps) => (
<FontAwesomeIconHolder
className={className}
icon={icon}
color={color ? color : 'currentColor'}
width={width ? width : 'unset'}
height={height ? height : 'unset'}
btn={btn ? btn : false}
/>
)
142 changes: 128 additions & 14 deletions src/icons/home/CLI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,134 @@
import * as React from 'react'
export default () => (
<svg width="65" height="67" viewBox="0 0 65 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" width="64" height="50" rx="4" fill="#2D3748" />
<path
d="M23.3887 21.7122L17.6106 21.7122"
stroke="#9AE6B4"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.625 10.625L16.875 15.875L11.375 21.3749"
stroke="#9AE6B4"
strokeWidth="2"
strokeLinecap="round"
<svg width="79" height="65" viewBox="0 0 79 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_216_12149)">
<path
d="M0.683594 2.16422C0.683594 1.14477 1.30227 0.318359 2.06547 0.318359H77.5508C78.314 0.318359 78.9327 1.14477 78.9327 2.16422V62.4552C78.9327 63.4747 78.314 64.301 77.5508 64.301H2.06547C1.30227 64.301 0.683594 63.4747 0.683594 62.4552V2.16422Z"
fill="#2D3748"
/>
<path
d="M0.683594 2.16422C0.683594 1.14477 1.30227 0.318359 2.06547 0.318359H77.5508C78.314 0.318359 78.9327 1.14477 78.9327 2.16422V62.4552C78.9327 63.4747 78.314 64.301 77.5508 64.301H2.06547C1.30227 64.301 0.683594 63.4747 0.683594 62.4552V2.16422Z"
fill="url(#paint0_linear_216_12149)"
fillOpacity="0.4"
/>
<path
d="M11.7098 13.486C13.3811 13.486 14.736 12.1311 14.736 10.4598C14.736 8.78847 13.3811 7.43359 11.7098 7.43359C10.0385 7.43359 8.68359 8.78847 8.68359 10.4598C8.68359 12.1311 10.0385 13.486 11.7098 13.486Z"
fill="#4A5568"
/>
<path
d="M21.2215 13.486C22.8928 13.486 24.2477 12.1311 24.2477 10.4598C24.2477 8.78847 22.8928 7.43359 21.2215 7.43359C19.5502 7.43359 18.1953 8.78847 18.1953 10.4598C18.1953 12.1311 19.5502 13.486 21.2215 13.486Z"
fill="#4A5568"
/>
<path
d="M30.7313 13.486C32.4026 13.486 33.7575 12.1311 33.7575 10.4598C33.7575 8.78847 32.4026 7.43359 30.7313 7.43359C29.06 7.43359 27.7051 8.78847 27.7051 10.4598C27.7051 12.1311 29.06 13.486 30.7313 13.486Z"
fill="#4A5568"
/>
<g filter="url(#filter0_dd_216_12149)">
<rect
x="7.16797"
y="17.6982"
width="64.8473"
height="41.2021"
rx="3.45852"
fill="#5A67D8"
/>
<path
d="M27.3887 30.1504C27.002 29.7207 27.002 29.0762 27.4316 28.6895C27.8613 28.3027 28.5059 28.3027 28.8926 28.7324L36.7988 37.3262C37.1855 37.7129 37.1855 38.3574 36.7988 38.7441L28.8926 47.3379C28.5059 47.7246 27.8613 47.7676 27.4316 47.3809C27.002 46.9941 27.002 46.3496 27.3887 45.9199L34.6504 38.0137L27.3887 30.1504ZM50.8496 45.5762C51.4082 45.5762 51.8809 46.0488 51.8809 46.6074C51.8809 47.209 51.4082 47.6387 50.8496 47.6387H37.7871C37.1855 47.6387 36.7559 47.209 36.7559 46.6074C36.7559 46.0488 37.1855 45.5762 37.7871 45.5762H50.8496Z"
fill="white"
/>
</g>
</g>
<rect
x="1.54822"
y="1.18299"
width="76.5198"
height="62.2534"
rx="6.05242"
stroke="url(#paint1_radial_216_12149)"
strokeOpacity="0.46"
strokeWidth="1.72926"
strokeLinejoin="round"
/>
<defs>
<filter
id="filter0_dd_216_12149"
x="4.16797"
y="17.6982"
width="71.0312"
height="49.2188"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="5" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0901961 0 0 0 0 0.168627 0 0 0 0 0.301961 0 0 0 0.08 0"
/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_216_12149" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0901961 0 0 0 0 0.168627 0 0 0 0 0.301961 0 0 0 0.04 0"
/>
<feBlend
mode="normal"
in2="effect1_dropShadow_216_12149"
result="effect2_dropShadow_216_12149"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_216_12149"
result="shape"
/>
</filter>
<linearGradient
id="paint0_linear_216_12149"
x1="71.9487"
y1="-16.769"
x2="33.3903"
y2="52.5317"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1A202C" />
<stop offset="1" stopColor="#1A202C" stopOpacity="0" />
</linearGradient>
<radialGradient
id="paint1_radial_216_12149"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(11.9913 59.384) rotate(-41.9775) scale(114.685 352.279)"
>
<stop stopColor="white" />
<stop offset="1" stopColor="white" />
</radialGradient>
<clipPath id="clip0_216_12149">
<rect
x="0.683594"
y="0.318359"
width="78.2491"
height="63.9827"
rx="6.91705"
fill="white"
/>
</clipPath>
</defs>
</svg>
)
Loading