pavle.golubovic
/
website-new
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

fixes

master
Pavle Golubovic 2 роки тому
джерело
6661b836f4
коміт
d43e50f551
2 змінених файлів з 373 додано та 76 видалено
Розділений перегляд Показати статистику Diff
  1. 299
    0
      frontend/src/assets/graphics/CaseStudySVG.svg
  2. 74
    76
      frontend/src/pages/CaseStudyPage.jsx

+ 299
- 0
frontend/src/assets/graphics/CaseStudySVG.svg Переглянути файл

@@ -0,0 +1,299 @@
<svg
width="1440"
height="929"
viewBox="0 0 1440 929"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.2">
<g filter="url(#filter0_f_1721_2120)">
<circle
cx="226.737"
cy="525.339"
r="257.785"
transform="rotate(-29.6316 226.737 525.339)"
fill="url(#paint0_linear_1721_2120)"
/>
</g>
<g filter="url(#filter1_f_1721_2120)">
<path
d="M138.219 199.272L525.923 426.449L135.33 648.622L138.219 199.272Z"
fill="url(#paint1_linear_1721_2120)"
/>
</g>
</g>
<g filter="url(#filter2_f_1721_2120)">
<circle
cx="1342"
cy="426.326"
r="272.35"
transform="rotate(180 1342 426.326)"
fill="url(#paint2_linear_1721_2120)"
/>
</g>
<g filter="url(#filter3_f_1721_2120)">
<path
d="M1252.96 772L1015.59 360.856L1490.34 360.856L1252.96 772Z"
fill="url(#paint3_linear_1721_2120)"
/>
</g>
<mask
id="mask0_1721_2120"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="885"
y="164"
width="604"
height="604"
>
<circle
cx="1186.64"
cy="465.939"
r="297.477"
transform="rotate(180 1186.64 465.939)"
fill="#C4C4C4"
stroke="#F8BB54"
stroke-width="8.32103"
/>
</mask>
<g mask="url(#mask0_1721_2120)">
<path
d="M1663.59 624.649C1663.59 624.649 1523.13 654.046 1486.89 756.931C1452.23 855.558 1309.46 882.068 1309.46 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 575.2C1663.59 575.2 1491.26 609.128 1446.88 733.304C1404.56 851.849 1229.56 882.068 1229.56 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 525.611C1663.59 525.611 1459.52 564.21 1406.99 709.403C1356.88 848.277 1149.66 882.068 1149.66 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 476.16C1663.59 476.16 1427.66 519.292 1366.98 685.776C1309.21 844.568 1069.76 882.068 1069.76 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 426.709C1663.59 426.709 1395.8 474.374 1326.97 662.013C1261.54 840.859 989.984 882.068 989.984 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 377.122C1663.59 377.122 1364.06 429.32 1287.08 638.249C1213.75 837.288 910.087 882.068 910.087 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 327.671C1663.59 327.671 1332.2 384.54 1247.07 614.485C1166.08 833.58 830.188 882.068 830.188 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 278.22C1663.59 278.22 1300.34 339.622 1207.18 590.858C1118.41 829.871 750.29 882.068 750.29 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 228.631C1663.59 228.631 1268.6 294.566 1167.17 566.958C1070.73 826.3 670.513 882.068 670.513 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 179.184C1663.59 179.184 1236.73 249.648 1127.28 543.193C1023.06 822.591 590.614 882.068 590.614 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 129.596C1663.59 129.596 1204.87 204.731 1087.27 519.43C975.391 818.882 510.717 882.068 510.717 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 80.1408C1663.59 80.1408 1173.13 159.812 1047.38 495.665C927.72 815.31 430.82 882.068 430.82 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 30.6964C1663.59 30.6964 1141.27 114.894 1007.37 472.04C880.048 811.601 350.922 882.068 350.922 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 -18.8926C1663.59 -18.8926 1109.41 69.9763 967.365 448.138C832.377 807.892 271.143 882.068 271.143 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 -68.3474C1663.59 -68.3474 1077.67 25.0585 927.477 424.512C784.705 804.321 191.245 882.068 191.245 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 -117.802C1663.59 -117.802 1045.8 -19.8594 887.467 400.748C737.034 800.612 111.346 882.068 111.346 882.068"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 -167.391C1663.59 -167.391 1013.94 -64.9113 847.579 376.984C689.363 796.903 31.4487 882.069 31.4487 882.069"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
<path
d="M1663.59 -216.836C1663.59 -216.836 982.201 -109.695 807.569 353.22C641.691 793.332 -48.3309 882.069 -48.3309 882.069"
stroke="#F8BB54"
stroke-width="9.3531"
stroke-miterlimit="10"
/>
</g>
<defs>
<filter
id="filter0_f_1721_2120"
x="-176.065"
y="122.537"
width="805.604"
height="805.604"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="72.486"
result="effect1_foregroundBlur_1721_2120"
/>
</filter>
<filter
id="filter1_f_1721_2120"
x="26.6007"
y="90.5424"
width="608.051"
height="666.808"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="54.3645"
result="effect1_foregroundBlur_1721_2120"
/>
</filter>
<filter
id="filter2_f_1721_2120"
x="916.484"
y="0.812439"
width="851.027"
height="851.027"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="76.5816"
result="effect1_foregroundBlur_1721_2120"
/>
</filter>
<filter
id="filter3_f_1721_2120"
x="900.714"
y="245.983"
width="704.493"
height="640.889"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="57.4362"
result="effect1_foregroundBlur_1721_2120"
/>
</filter>
<linearGradient
id="paint0_linear_1721_2120"
x1="22.244"
y1="303.081"
x2="382.069"
y2="783.124"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#2400FF" />
<stop offset="1" stop-color="#00FFFF" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_1721_2120"
x1="138.219"
y1="199.272"
x2="394.762"
y2="650.29"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#BD00FF" />
<stop offset="1" stop-color="#00A3FF" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint2_linear_1721_2120"
x1="1125.95"
y1="191.511"
x2="1506.11"
y2="698.676"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#90278F" />
<stop offset="1" stop-color="#90278F" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint3_linear_1721_2120"
x1="1252.96"
y1="772"
x2="1252.96"
y2="223.808"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#8468BF" />
<stop offset="1" stop-color="#8468BF" stop-opacity="0" />
</linearGradient>
</defs>
</svg>

+ 74
- 76
frontend/src/pages/CaseStudyPage.jsx Переглянути файл

@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import Animation_Diligent from '../assets/animation_diligent.webm';
import Wrapper from '../layout/Wrapper';
import CaseStudySvg from '../assets/graphics/CaseStudySVG.svg';

import PageLayout from '../layout/PageLayout';

@@ -52,12 +53,11 @@ export default function CaseStudyPage() {

const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);


useEffect(() => {
if (data && data[0].attributes) document.title = `Case Study: ${data[0].attributes.SlugHeading}`;
if (data && data[0].attributes)
document.title = `Case Study: ${data[0].attributes.SlugHeading}`;
}, [data]);


useAnalytics(helperString);

if (isLoading) {
@@ -112,6 +112,68 @@ export default function CaseStudyPage() {
</div>
</section>

{/* About the Client Section */}

<section
id="client"
className="flex flex-col items-center justify-center mt-4"
>
<div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
{data[0].attributes.AboutClient && (
<div className="w-full md:w-1/2">
<h3 className="h3-heading text-teal-600">
{data[0].attributes.AboutClient.title}
</h3>
{data[0].attributes.AboutClient.paragraph &&
data[0].attributes.AboutClient.paragraph.length > 0 &&
data[0].attributes.AboutClient.paragraph.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.ParagraphElement}
</p>
))}
</div>
)}
<div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
<div className="hidden md:inline-block"></div>
{data[0].attributes.Country && (
<div className="float-left md:float-right text-left md:text-right">
<h4 className="text-teal-600 font-semibold">
{data[0].attributes.Country.title}
</h4>
<p className="mt-4">{data[0].attributes.Country.info}</p>
</div>
)}
{data[0].attributes.Industry && (
<div className="float-left md:float-right text-left md:text-right">
<h4 className="text-teal-600 font-semibold">
{data[0].attributes.Industry.title}
</h4>
<p className="mt-4">{data[0].attributes.Industry.info}</p>
</div>
)}
</div>
</div>
</section>

{/* Domain Section */}
{/* {data[0].attributes.Domain && (
<section id="domain" className="flex flex-col items-center justify-center">
<div className="my-4 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
<h3 className="h3-heading">{data[0].attributes.Domain.title}</h3>
{data[0].attributes.Domain.paragraph &&
data[0].attributes.Domain.paragraph.length > 0 &&
data[0].attributes.Domain.paragraph.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.ParagraphElement}
</p>
))}
</div>
</div>
</section>
)} */}

{/* Stats */}
<Wrapper padding={' py-90p'}>
{data[0].attributes.Stat && (
<motion.section
@@ -123,7 +185,7 @@ export default function CaseStudyPage() {
>
{data[0].attributes.Stat.map((item, i) => (
<div key={i} className="flex flex-col">
<h2 className="display-number text-center">{item.value}+</h2>
<h2 className="display-number text-center">{item.value}</h2>
<h3 className="number-title text-center">{item.title}</h3>
</div>
))}
@@ -131,31 +193,8 @@ export default function CaseStudyPage() {
)}
</Wrapper>



{/* Domain Section */}
{data[0].attributes.Domain && (
<section
id="domain"
className="flex flex-col items-center justify-center"
>
<div className="my-4 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
<h3 className="h3-heading">{data[0].attributes.Domain.title}</h3>
{data[0].attributes.Domain.paragraph &&
data[0].attributes.Domain.paragraph.length > 0 &&
data[0].attributes.Domain.paragraph.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.ParagraphElement}
</p>
))}
</div>
</div>
</section>
)}

{/* Challanges, Solution Section */}
<section
{/* <section
id="challanges_solution"
className="flex flex-col items-center justify-center mt-8"
>
@@ -199,14 +238,11 @@ export default function CaseStudyPage() {
/>
)}
</div>
</section>
</section> */}

{/* Results Section */}
{data[0].attributes.Results && (
<section
id="results"
className="flex flex-col items-center justify-center"
>
<section id="results" className="flex flex-col items-center justify-center">
<div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
<h3 className="h3-heading text-dg-secondary">
@@ -224,10 +260,8 @@ export default function CaseStudyPage() {
</section>
)}


{/* Technologies Section */}
{data[0].attributes.Techonologies && (
{/* {data[0].attributes.Techonologies && (
<section id="technologies" className="flex flex-col justify-center mt-16">
<div className="my-4 flex flex-col w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
@@ -240,47 +274,11 @@ export default function CaseStudyPage() {
)}
</div>
</section>
)}
)} */}

{/* About the Client Section */}

<section id="client" className="flex flex-col items-center justify-center mt-4">
<div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
{data[0].attributes.AboutClient && (
<div className="w-full md:w-1/2">
<h3 className="h3-heading text-teal-600">
{data[0].attributes.AboutClient.title}
</h3>
{data[0].attributes.AboutClient.paragraph &&
data[0].attributes.AboutClient.paragraph.length > 0 &&
data[0].attributes.AboutClient.paragraph.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.ParagraphElement}
</p>
))}
</div>
)}
<div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
<div className="hidden md:inline-block"></div>
{data[0].attributes.Country && (
<div className="float-left md:float-right text-left md:text-right">
<h4 className="text-teal-600 font-semibold">
{data[0].attributes.Country.title}
</h4>
<p className="mt-4">{data[0].attributes.Country.info}</p>
</div>
)}
{data[0].attributes.Industry && (
<div className="float-left md:float-right text-left md:text-right">
<h4 className="text-teal-600 font-semibold">
{data[0].attributes.Industry.title}
</h4>
<p className="mt-4">{data[0].attributes.Industry.info}</p>
</div>
)}
</div>
</div>
</section>
<div className="absolute bottom-0">
<img src='' />
</div>

{/* CTA Section */}
{data[0].attributes.WorkTogether && (

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти