pavle.golubovic
/
website-new
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

about strapi

blog-new
Pavle Golubovic 3年前
親
b4a8074aac
コミット
0fc6a182da
4個のファイルの変更、200行の追加、186行の削除
分割表示 差分情報を表示
  1. 1
    1
      frontend/src/components/shared/CardValues.jsx
  2. 3
    3
      frontend/src/components/shared/PageTitle.jsx
  3. 1
    1
      frontend/src/layout/Wrapper.jsx
  4. 195
    181
      frontend/src/pages/About.jsx

+ 1
- 1
frontend/src/components/shared/CardValues.jsx ファイルの表示

@@ -4,7 +4,7 @@ export default function CardValues(props) {
return (
<div className="flex flex-col justify-center items-start text-left card-no-hover w-full">
<div className="flex flex-row justify-start items-center">
<img src={props.image} alt="Icon" width={27} />
<img src={props.image} alt={props.alt} width={27} />
<h3 className="h3-heading ml-2">{props.heading}</h3>
</div>
<p className="paragraph mt-2">{props.paragraph}</p>

+ 3
- 3
frontend/src/components/shared/PageTitle.jsx ファイルの表示

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'

const PageTitle = ({heading, subheading, left, color, pb }) => {
return (
<div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " text-[#9B32CE]" : " ") + (pb ? ' pb-2' :' ')}>
<h6 className={"subheading" + (left ? " text-left":" text-center")}>{subheading}</h6>
<h1 className={"heading" + (left ? " text-left":" text-center")}>{heading}</h1>
<div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " text-dg-secondary" : " ") + (pb ? ' pb-2' :' ')}>
<h6 className={"subheading text-inherit" + (left ? " text-left":" text-center")}>{subheading}</h6>
<h1 className={"heading text-inherit" + (left ? " text-left":" text-center")}>{heading}</h1>
</div>
)
}

+ 1
- 1
frontend/src/layout/Wrapper.jsx ファイルの表示

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'

const Wrapper = ({bg, padding ,children, hideOverflow}) => {
return (
<div className={(bg ? "bg-baby-blue dark:bg-dg-primary-1600 h-fit" : "")+(padding)+(hideOverflow ? ' overflow-hidden' : '')}>
<div className={"w-full " + (bg ? "bg-baby-blue dark:bg-dg-primary-1600 h-fit" : "")+(padding)+(hideOverflow ? ' overflow-hidden' : '')}>
<div className="max-w-custom relative mx-auto px-16p">
{children}
</div>

+ 195
- 181
frontend/src/pages/About.jsx ファイルの表示

@@ -28,9 +28,6 @@ import ReactHelmet from '../components/shared/ReactHelmet';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import useDataApi from './../hooks/useDataApi';




const _data = {
heading: {
subheading: 'About Us',
@@ -195,34 +192,37 @@ const _data = {
const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = [
'AboutUs',
'AboutUsCard',
'AboutUsCard.Image',
'Values',
'Heading.Image',
'Section.Image',
'ItalicSection.Section.Image',
'Mission.Image',
'Vision.Image',
'Values.Items',
'Values.Items.Image',
'Partners',
'Partners.images',
'Indrustries',
'Industries.Items',
'Industries.Items.Image',
'Timeline',
'Timeline.Steps'
'Timeline.Steps',
'SEO.metaSocial',
'SEO.metaImage',
'SEO.metaSocial.image',
];

export default function About() {

const strapi = strapiApiBuilder('aboutpage', strapiPopulate);

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

useAnalytics('Home page');
useAnalytics('About page');

useEffect(() => {
document.title = 'About Us';
}, []);


useEffect(() => {
console.log(data);
}, [data]);

if (isLoading) {
return (
@@ -237,187 +237,201 @@ export default function About() {

return (
<PageLayout>
{data.SEO && <ReactHelmet seo={data.SEO} />}
{/* {data.SEO && <ReactHelmet seo={data.SEO} />} */}
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
{/* Heading Section */}
<section
id="heading"
className="flex flex-col items-center justify-center max-w-custom m-auto"
>
<div className="mb-8 flex flex-col md:flex-row gap-4 lg-gap-0 justify-start items-start w-full px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<h6 className="subheading">{_data.heading.subheading}</h6>
<h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
<p className="paragraph mt-4">{_data.heading.paragraph}</p>
</div>
<img
src={_data.heading.imgUrl}
alt="Our Team's image"
className="w-full md:w-1/2 text-center -ml-2 lg-ml-0"
/>
</div>
</section>

{/* The After Heading pt.1 Section */}
<section
id="after_heading"
className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2"
>
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center max-w-custom m-auto w-full px-8 xl:px-0">
<img
src={_data.segment1.imgUrl}
alt="Our Team's image"
className="w-full md:w-1/2 text-center mt-8 md:mt-0"
/>
<div className="w-full md:w-1/2 md:pl-16">
<p className="paragraph mt-4">{_data.segment1.paragraph}</p>
</div>
</div>
</section>

{/* The After Heading pt.2 Section */}
<section id="after_heading" className="flex flex-col items-center justify-center">
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<p className="paragraph mt-4">{_data.segment2.paragraph}</p>
</div>
<img
src={_data.segment2.imgUrl}
alt="Office's image"
className="w-full md:w-1/2 text-center"
/>
</div>
</section>

{/* Highlighted Text Section */}
<section
id="highlight"
className="flex flex-col items-center justify-center mt-16"
>
<HighlighedText text={_data.subtitle} />
</section>

{/* Info Section */}
<section id="info" className="flex flex-col items-center justify-center mt-16">
<div className="flex flex-col items-center justify-center w-full">
<img
src={_data.subtitleImgUrl}
alt="Info image"
className="max-w-[660px] w-full"
/>
<p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
{_data.italicParagraph}
</p>
</div>
</section>
{data ? (
<section
id="heading"
className="flex flex-col items-center justify-center max-w-custom m-auto w-full"
>
<Wrapper>
<div className="flex flex-col md:flex-row gap-8p w-full">
<div className="w-full md:w-1/2">
<PageTitle
heading={data.Heading.Title}
subheading={data.Heading.Subtitle}
left
color
/>
<p className="mt-4 paragraph">{data.Heading.Paragraph}</p>
</div>
<img
src={api_url + data.Heading.Image.data.attributes.url}
alt="Our Team's image"
className="w-full md:w-1/2 text-center -ml-2 lg-ml-0"
/>
</div>
</Wrapper>
</section>
) : null}

{data ? (
<section
id="sections"
className="flex flex-col items-center justify-center max-w-custom m-auto w-full"
>
{data.Section.map((item, index) => (
<div key={index}>
<Wrapper>
<div
className={
'flex flex-col gap-8 w-full items-center' +
(index % 2 == 0 ? ' md:flex-row-reverse' : ' md:flex-row')
}
>
<p className="mt-4 paragraph w-full md:w-1/2">{item.Paragraph}</p>
<img
src={api_url + item.Image.data.attributes.url}
alt="Our Team's image"
className="w-full md:w-1/2 text-center -ml-2 lg-ml-0"
/>
</div>
</Wrapper>
</div>
))}
</section>
) : null}

{data ? (
<>
<section
id="highlight"
className="flex flex-col items-center justify-center mt-16"
>
<HighlighedText text={data.ItalicSection.Italic} />
</section>

<section
id="info"
className="flex flex-col items-center justify-center mt-16"
>
<div className="flex flex-col items-center justify-center w-full">
<img
src={api_url + data.ItalicSection.Section.Image.data.attributes.url}
alt={
api_url +
data.ItalicSection.Section.Image.data.attributes.alternativeText
}
className="max-w-[660px] w-full"
/>
<p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
{data.ItalicSection.Section.Paragraph}
</p>
</div>
</section>
</>
) : null}

{/* Our Mission & Our Vision Section */}
<section
id="mission_vision"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<h2 className="heading text-dg-secondary">{_data.segment3.vision.title}</h2>
{_data.segment3.vision.paragraphs.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
))}
{data ? (
<section
id="mission_vision"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<h2 className="heading text-dg-secondary">{data.OurMission}</h2>
<p className="paragraph mt-4">{data.Mission.Paragraph}</p>
</div>
<img
src={api_url + data.Mission.Image.data.attributes.url}
alt={api_url + data.Mission.Image.data.attributes.alternativeText}
className="text-center w-full md:w-1/2"
/>
</div>
<img
src={_data.segment3.mission.imgUrl}
alt="Our mission image"
className="text-center w-full md:w-1/2"
/>
</div>
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<img
src={_data.segment3.vision.imgUrl}
alt="Our vision image"
className="text-center w-full md:w-1/2 mt-8 md:mt-0"
/>
<div className="w-full md:w-1/2 md:pl-16">
<h2 className="heading text-dg-secondary">
{_data.segment3.mission.title}
</h2>
{_data.segment3.mission.paragraphs.map((item, index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
))}
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<img
src={api_url + data.Vision.Image.data.attributes.url}
alt={api_url + data.Vision.Image.data.attributes.alternativeText}
className="text-center w-full md:w-1/2 mt-8 md:mt-0"
/>
<div className="w-full md:w-1/2 md:pl-16">
<h2 className="heading text-dg-secondary">{data.OurVision}</h2>
<p className="paragraph mt-4">{data.Vision.Paragraph}</p>
</div>
</div>
</div>
</section>
</section>
) : null}

{/* Values Section */}
<section
id="values"
className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
>
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
<h2 className="heading text-dg-secondary">{_data.values.heading}</h2>
<div className="absolute justify-center md:flex hidden self-center">
<img src={valuesBG} alt="Values background" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
{_data.values.cards.map((item, index) => (
<CardValues
key={index}
image={item.iconUrl}
heading={item.title}
paragraph={item.paragraph}
/>
))}
{data ? (
<section
id="values"
className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
>
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
<h2 className="heading text-dg-secondary">{data.Values.Title}</h2>
<div className="absolute justify-center md:flex hidden self-center">
<img src={valuesBG} alt="Values background" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
{data.Values.Items.map((item, index) => (
<CardValues
key={index}
image={api_url + item.Image.data.attributes.url}
alt={api_url + item.Image.data.attributes.alternativeText || 'alt'}
heading={item.heading}
paragraph={item.paragraph}
/>
))}
</div>
</div>
</div>
</section>
</section>
) : null}

{/* Partners Section */}
<section
id="partners"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-2/3">
<h2 className="text-center heading text-dg-secondary">
{_data.partners.title}
</h2>
<p className="text-left paragraph mt-4">{_data.partners.paragraph}</p>
</div>
<div className="flex flex-row justify-between items-center w-full mt-16">
{_data.partners.icons.map((item, index) => (
<img
key={index}
src={item}
alt="Partner's image"
className="w-16 md:w-20 lg:w-24"
/>
))}
</div>
</div>
</section>
{data ? (
<section
id="partners"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-2/3">
<h2 className="text-center heading text-dg-secondary">
{data.Partners.heading}
</h2>
<p className="text-left paragraph mt-4">{data.Partners.paragraph}</p>
</div>
<div className="flex flex-row justify-between items-center w-full mt-16">
{data.Partners.images.data.map((item, index) => (
<img
key={index}
src={api_url + item.attributes.url}
alt={api_url + item.attributes.alternativeText}
className="w-16 md:w-20 lg:w-24"
/>
))}
</div>
</div>
</section>
) : null}

{/* Industries Section */}
<section
id="industries"
className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
>
<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">
<h2 className="heading text-dg-secondary">{_data.industries.title}</h2>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{_data.industries.industries.map((industry, index) => (
<div key={index}>
<h3 className="h3-heading">{industry.title}</h3>
<p className="paragraph mt-2">{industry.paragraph}</p>
<img src={industry.imgUrl} alt="Industries images" className="m-auto" />
</div>
))}
</div>
</div>
</section>
{data ? (
<section
id="industries"
className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
>
<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">
<h2 className="heading text-dg-secondary">{data.Industries.Title}</h2>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{data.Industries.Items.map((industry, index) => (
<div key={index}>
<h3 className="h3-heading">{industry.heading}</h3>
<p className="paragraph mt-2">{industry.paragraph}</p>
<img src={api_url + industry.Image.data.attributes.url} alt={api_url + industry.Image.data.attributes.alternativeText} className="m-auto" />
</div>
))}
</div>
</div>
</section>

) : null}

<Wrapper bg padding={' py-90p'}>
<PageTitle

書き込み プレビュー
読み込み中…
キャンセル
保存