frontAnswerer/src/assets/LandingPict/notebook.tsx

536 lines
18 KiB
TypeScript
Raw Normal View History

2023-12-16 14:55:56 +00:00
import { Box } from "@mui/material";
interface Props {
color?: string;
}
export default function Notebook({ color }: Props) {
return (
<Box
sx={{
height: "171px",
width: "279px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="279"
height="171"
viewBox="0 0 279 171"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M123.717 1.39258V3.94582L126.959 3.94582C127.348 3.94582 127.663 4.26075 127.663 4.64924V6.96329C127.663 7.60426 128.182 8.12386 128.823 8.12386L150.642 8.12386C151.283 8.12386 151.802 7.60426 151.802 6.96329V4.64924C151.802 4.26075 152.117 3.94582 152.506 3.94582L155.284 3.94582V1.39258L123.717 1.39258Z"
fill="black"
/>
<circle
cx="139.409"
cy="4.55077"
r="1.06935"
transform="rotate(-180 139.409 4.55077)"
fill="url(#paint0_linear_3_590)"
/>
<circle
cx="139.385"
cy="4.52608"
r="0.580283"
fill="url(#paint1_radial_3_590)"
/>
<g filter="url(#filter0_f_3_590)">
<path
d="M139.383 4.17799C139.291 4.17799 139.202 4.2269 139.137 4.31396C139.072 4.40102 139.035 4.5191 139.035 4.64222C139.035 4.76534 139.072 4.88342 139.137 4.97048C139.202 5.05754 139.291 5.10645 139.383 5.10645L139.383 4.64222L139.383 4.17799Z"
fill="url(#paint2_linear_3_590)"
/>
</g>
<g filter="url(#filter1_f_3_590)">
<circle cx="139.384" cy="4.29403" r="0.116057" fill="#50326D" />
</g>
<g filter="url(#filter2_f_3_590)">
<path
d="M139.501 5.10643C139.624 5.10643 139.742 5.05752 139.829 4.97046C139.916 4.8834 139.965 4.76533 139.965 4.6422C139.965 4.51908 139.916 4.40101 139.829 4.31395C139.742 4.22689 139.624 4.17798 139.501 4.17798L139.501 4.6422L139.501 5.10643Z"
fill="url(#paint3_linear_3_590)"
/>
</g>
<g filter="url(#filter3_f_3_590)">
<ellipse
cx="139.5"
cy="4.75815"
rx="0.232113"
ry="0.116057"
fill="url(#paint4_linear_3_590)"
/>
</g>
<path
d="M117.914 159.462H139.501V162.711H121.164C119.369 162.711 117.914 161.257 117.914 159.462Z"
fill="url(#paint5_radial_3_590)"
/>
<path
d="M117.914 159.462H139.501V162.711H121.164C119.369 162.711 117.914 161.257 117.914 159.462Z"
fill="url(#paint6_linear_3_590)"
/>
<path
d="M161.088 159.462H139.501V162.712H157.838C159.633 162.712 161.088 161.257 161.088 159.462Z"
fill="url(#paint7_radial_3_590)"
/>
<path
d="M161.088 159.462H139.501V162.712H157.838C159.633 162.712 161.088 161.257 161.088 159.462Z"
fill="url(#paint8_linear_3_590)"
/>
<path
d="M249.523 169.443L248.826 168.747H264.958L264.262 169.443H249.523Z"
fill="url(#paint9_linear_3_590)"
/>
<rect
x="249.521"
y="169.443"
width="14.8552"
height="0.232113"
rx="0.116057"
fill="#2A2A2A"
/>
<path
d="M249.754 169.675H264.145L263.813 170.165C263.725 170.294 263.58 170.371 263.424 170.371H250.474C250.319 170.371 250.173 170.294 250.086 170.165L249.754 169.675Z"
fill="url(#paint10_linear_3_590)"
/>
<path
d="M14.6241 169.443L13.9277 168.747H30.0596L29.3633 169.443H14.6241Z"
fill="url(#paint11_linear_3_590)"
/>
<rect
x="14.625"
y="169.443"
width="14.6231"
height="0.232113"
rx="0.116057"
fill="#2A2A2A"
/>
<path
d="M14.8555 169.675H29.0144L28.6894 170.162C28.6024 170.293 28.456 170.371 28.2992 170.371H15.5707C15.4139 170.371 15.2675 170.293 15.1805 170.162L14.8555 169.675Z"
fill="url(#paint12_linear_3_590)"
/>
<path
d="M21.9376 6.79972C21.9376 3.23858 24.8245 0.35171 28.3857 0.35171L250.613 0.35171C254.174 0.35171 257.061 3.23858 257.061 6.79973V159.11L21.9376 159.11L21.9376 6.79972Z"
stroke="url(#paint13_linear_3_590)"
strokeWidth="0.70342"
/>
<path
d="M22.633 6.79261C22.633 3.61996 25.2049 1.048 28.3776 1.048L250.619 1.048C253.792 1.048 256.364 3.61994 256.364 6.7926V159.11L22.633 159.11L22.633 6.79261Z"
fill="black"
stroke="#2D2E31"
strokeWidth="0.70342"
/>
<rect
x="22.9805"
y="153.891"
width="233.042"
height="5.57072"
fill="url(#paint14_linear_3_590)"
/>
<g filter="url(#filter4_iii_3_590)">
<path
d="M0 159.462L279 159.462V164.057C279 166.647 276.9 168.746 274.311 168.746L4.68946 168.746C2.09954 168.746 0 166.647 0 164.057L0 159.462Z"
fill="#D1D2D4"
/>
<path
d="M0 159.462L279 159.462V164.057C279 166.647 276.9 168.746 274.311 168.746L4.68946 168.746C2.09954 168.746 0 166.647 0 164.057L0 159.462Z"
fill="url(#paint15_linear_3_590)"
/>
</g>
<mask
id="mask0_3_590"
// style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="26"
y="10"
width="227"
height="144"
>
<rect
x="26.0039"
y="10.0527"
width="226.184"
height="143.839"
fill="#D9D9D9"
/>
</mask>
<g mask="url(#mask0_3_590)">
<rect
x="26.0039"
y="10.0525"
width="226.184"
height="143.839"
fill="#F0F1F6"
/>
</g>
<defs>
<filter
id="filter0_f_3_590"
x="138.709"
y="3.85232"
width="0.998971"
height="1.57978"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.162829"
result="effect1_foregroundBlur_3_590"
/>
</filter>
<filter
id="filter1_f_3_590"
x="138.125"
y="3.0356"
width="2.51719"
height="2.51694"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.571191"
result="effect1_foregroundBlur_3_590"
/>
</filter>
<filter
id="filter2_f_3_590"
x="139.174"
y="3.85232"
width="1.11616"
height="1.57978"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.162829"
result="effect1_foregroundBlur_3_590"
/>
</filter>
<filter
id="filter3_f_3_590"
x="138.887"
y="4.2613"
width="1.22643"
height="0.993766"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="0.190397"
result="effect1_foregroundBlur_3_590"
/>
</filter>
<filter
id="filter4_iii_3_590"
x="0"
y="156.648"
width="279"
height="12.0981"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<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.98605" />
<feGaussianBlur stdDeviation="1.40684" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.502066 0 0 0 0 0.502766 0 0 0 0 0.504167 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_3_590"
/>
<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="-1.40684" />
<feGaussianBlur stdDeviation="0.586183" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.900764 0 0 0 0 0.904549 0 0 0 0 0.908333 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_3_590"
result="effect2_innerShadow_3_590"
/>
<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="-0.234473" />
<feGaussianBlur stdDeviation="0.35171" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.616667 0 0 0 0 0.616667 0 0 0 0 0.616667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_3_590"
result="effect3_innerShadow_3_590"
/>
</filter>
<linearGradient
id="paint0_linear_3_590"
x1="138.529"
y1="3.98464"
x2="140.227"
y2="4.99109"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#222222" />
<stop offset="1" stop-color="#0B0B0B" />
</linearGradient>
<radialGradient
id="paint1_radial_3_590"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(139.385 4.47333) rotate(37.875) scale(0.601477 0.605921)"
>
<stop stop-color="#152457" />
<stop offset="1" />
</radialGradient>
<linearGradient
id="paint2_linear_3_590"
x1="139.122"
y1="4.28115"
x2="139.417"
y2="5.07777"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#20569B" />
<stop offset="0.677083" stop-color="#061127" />
</linearGradient>
<linearGradient
id="paint3_linear_3_590"
x1="139.849"
y1="5.00327"
x2="139.615"
y2="4.16228"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3D6495" />
<stop offset="0.71875" stop-color="#061127" />
</linearGradient>
<linearGradient
id="paint4_linear_3_590"
x1="139.809"
y1="4.83552"
x2="139.7"
y2="4.56205"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3291AF" />
<stop offset="1" stop-color="#3291AF" stop-opacity="0" />
</linearGradient>
<radialGradient
id="paint5_radial_3_590"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(128.707 159.462) rotate(90) scale(4.52621 30.0669)"
>
<stop stop-color="white" />
<stop offset="1" stop-color="#D9D9D9" />
</radialGradient>
<linearGradient
id="paint6_linear_3_590"
x1="118.32"
y1="161.551"
x2="122.556"
y2="159.462"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.00209588" stop-color="#242424" />
<stop offset="0.34936" stop-color="#EFEFEF" />
</linearGradient>
<radialGradient
id="paint7_radial_3_590"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(150.295 159.462) rotate(90) scale(4.52621 30.0669)"
>
<stop stop-color="white" />
<stop offset="1" stop-color="#D9D9D9" />
</radialGradient>
<linearGradient
id="paint8_linear_3_590"
x1="160.682"
y1="161.551"
x2="156.446"
y2="159.462"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.00209588" stop-color="#242424" />
<stop offset="0.34936" stop-color="#EFEFEF" />
</linearGradient>
<linearGradient
id="paint9_linear_3_590"
x1="248.826"
y1="168.863"
x2="264.842"
y2="168.863"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D1D2D4" />
<stop offset="0.063237" stop-color="#818181" />
<stop offset="0.507008" stop-color="#D0D0D0" />
<stop offset="0.864583" stop-color="#818181" />
<stop offset="1" stop-color="#D1D2D4" />
</linearGradient>
<linearGradient
id="paint10_linear_3_590"
x1="249.99"
y1="169.907"
x2="264.145"
y2="169.907"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#4D4D4D" />
<stop offset="0.156699" stop-color="#292929" />
<stop offset="0.501829" stop-color="#6A6A6A" />
<stop offset="0.884758" stop-color="#2E2D2D" />
<stop offset="1" stop-color="#4D4D4D" />
</linearGradient>
<linearGradient
id="paint11_linear_3_590"
x1="13.9277"
y1="168.863"
x2="29.9435"
y2="168.863"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D1D2D4" />
<stop offset="0.063237" stop-color="#818181" />
<stop offset="0.507008" stop-color="#D0D0D0" />
<stop offset="0.864583" stop-color="#818181" />
<stop offset="1" stop-color="#D1D2D4" />
</linearGradient>
<linearGradient
id="paint12_linear_3_590"
x1="15.0876"
y1="169.907"
x2="29.0144"
y2="169.907"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#4D4D4D" />
<stop offset="0.156699" stop-color="#292929" />
<stop offset="0.501829" stop-color="#6A6A6A" />
<stop offset="0.884758" stop-color="#2E2D2D" />
<stop offset="1" stop-color="#4D4D4D" />
</linearGradient>
<linearGradient
id="paint13_linear_3_590"
x1="16.9437"
y1="-2.17555e-06"
x2="77.177"
y2="59.8852"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A8A8A8" />
<stop offset="1" stop-color="#737475" />
</linearGradient>
<linearGradient
id="paint14_linear_3_590"
x1="139.501"
y1="153.891"
x2="139.501"
y2="159.462"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#2D2D2D" />
<stop offset="1" />
</linearGradient>
<linearGradient
id="paint15_linear_3_590"
x1="0"
y1="164.104"
x2="279"
y2="164.104"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A9AAAC" />
<stop
offset="0.0205416"
stop-color="#F2F2F2"
stop-opacity="0.921875"
/>
<stop offset="0.0339099" stop-color="#787879" />
<stop
offset="0.124814"
stop-color="#D6D6D6"
stop-opacity="0.606575"
/>
<stop offset="0.515625" stop-color="#E4E4E4" stop-opacity="0" />
<stop
offset="0.864583"
stop-color="#D7D7D7"
stop-opacity="0.666378"
/>
<stop offset="0.973923" stop-color="#848484" />
<stop offset="0.992314" stop-color="#F4F4F4" />
<stop offset="1" stop-color="#BFBFBF" />
</linearGradient>
</defs>
</svg>
</Box>
);
}