Skip to content

Commit

Permalink
Merge pull request #23 from him-Tech/developer2
Browse files Browse the repository at this point in the history 
News-Article page added
  • Loading branch information
@star-works
star-works authored Mar 22, 2024
2 parents 52ca5bf + 7dca15e commit 7b651f1
Show file tree
Hide file tree
Showing 12 changed files with 477 additions and 0 deletions.
27 changes: 27 additions & 0 deletions src/components/New-Article/ConclusionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react"

const ConclusionCard = () => {
return (
<div className="newscard-2 bg-[#200D46] p-6 md:p-8 my-8 lg:my-14">
<h3 className="text-[32px] font-semibold leading-[125%]">Conclusion</h3>
<p className="tab-button-text pt-4">
Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id
scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit
elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque
amet nulla purus habitasse.
<span className="inline-block py-3">
Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas
condimentum mi massa. In tincidunt pharetra consectetur sed duis
facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit
dictum eget nibh tortor commodo cursus.
</span>
Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet.
Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget
ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec
posuere pharetra odio consequat scelerisque et, nunc tortor.
</p>
</div>
)
}

export default ConclusionCard
39 changes: 39 additions & 0 deletions src/components/New-Article/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from "react"
import { RedIcon } from "../Common/Icon"
import Avtar from "../../img/contributor2.png"

const Header = () => {
return (
<div className=" pt-28 pb-16 md:pt-52 overflow-hidden">
<div className="mx-auto max-w-[1048px] w-full px-6 lg:px-0 flex flex-col items-center justify-center">
<div className="self-stretch flex-col justify-center items-center gap-5 flex">
<div className="self-stretch flex-col justify-center items-center gap-4 flex">
<div className="justify-start items-center gap-3 inline-flex">
<RedIcon />
<div className="text-rose-600 text-base font-bold leading-normal">
News article
</div>
</div>

<h1 className="self-stretch text-center text-white text-[36px] lg:text-[48px] leading-[122.222%] lg:leading-[116.667%] font-semibold">
Community Day for Java Developers
</h1>
</div>
<p className="self-stretch mb-0 text-center text-lightgrey text-[20px] font-normal leading-[140%] max-w-[860px] mx-auto">
Eclipse Temurin offers high-performance, cross-platform, open-source
Java runtime binaries that are enterprise-ready and Java SE
TCK-tested for general use in the Java ecosystem.
</p>
<div className="flex justify-center items-center gap-5">
<img className="max-w-[48px] mb-0" src={Avtar} alt="" />
<h3 className="text-[16px] font-bold leading-[150%] text-white">
<span className="text-primary">Travis Spencer,</span> CEO
</h3>
</div>
</div>
</div>
</div>
)
}

export default Header
218 changes: 218 additions & 0 deletions src/components/New-Article/Introduction.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
import React from "react"
import introimg from "../../img/new-article-img.png"
import introimg2 from "../../img/new-article-img2.png"
import introimg3 from "../../img/new-article-img3.png"
import TastimonialIntro from "./TastimonialIntro"
import ConclusionCard from "./ConclusionCard"
import { FiFacebook } from "react-icons/fi"
import {
MobileFooterCat,
MobileFooterFacebook,
MobileFooterSocial,
} from "../Common/Icon"

const Introduction = () => {
return (
<article className="px-6">
<div className="max-w-[960px] mx-auto ">
<img
className="w-full h-[500px] md:h-full object-cover rounded-2xl md:rounded-none mb-10"
src={introimg}
alt=""
/>
</div>
<div className="max-w-[832px] mx-auto ">
<p className="tab-button-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo
massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.
Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.
</p>
<h3 className="text-[32px] font-semibold leading-[125%] py-5">
Introduction
</h3>
<p className="tab-button-text pb-5">
Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam
suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis
montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere
vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien
varius id.
<span className="inline-block pt-4">
Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat
mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu
quis fusce augue enim. Quis at habitant diam at. Suscipit tristique
risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie
aliquet sodales id est ac volutpat.{" "}
</span>
</p>

<img
className="h-[500px] md:h-auto w-full object-cover rounded-2xl md:rounded-none"
src={introimg2}
alt=""
/>
<p className="text-[14px] leading-[142.857%] text-white">
Image courtesy of Scott Webb via{" "}
<span className=" underline !underline-offset-[2px] mb-0">
Pexels
</span>
</p>
<TastimonialIntro />
<p className="tab-button-text pb-5">
Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla
odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis
mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.
<span className="inline-block py-4">
Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet
commodo consectetur convallis risus. Sed condimentum enim dignissim
adipiscing faucibus consequat, urna. Viverra purus et erat auctor
aliquam. Risus, volutpat vulputate posuere purus sit congue
convallis aliquet. Arcu id augue ut feugiat donec porttitor neque.
Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor
lacus, eget nunc lectus in tellus, pharetra, porttitor.
</span>
Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris
id. Non pellentesque congue eget consectetur turpis. Sapien, dictum
molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis
velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh
orci.
</p>
<div className="pb-5">
<h3 className="text-[32px] font-semibold leading-[125%] pb-4">
Software and tools
</h3>
<p className="tab-button-text">
Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam
suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum
quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris
posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At
feugiat sapien varius id.
<span className="inline-block pt-4">
Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat
mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu
quis fusce augue enim. Quis at habitant diam at. Suscipit
tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum
molestie aliquet sodales id est ac volutpat.
</span>
</p>
</div>
<div className="pb-5">
<h3 className="text-[32px] font-semibold leading-[125%] pb-4">
Other resources
</h3>
<p className="tab-button-text ">
Sagittis et eu at elementum, quis in. Proin praesent volutpat
egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac.
Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur
ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim
massa erat cursus vulputate gravida id. Sed quis auctor vulputate
hac elementum gravida cursus dis.
<span className="inline-block py-4">
1. Lectus id duis vitae porttitor enim gravida morbi. <br />
2. Eu turpis posuere semper feugiat volutpat elit, ultrices
suspendisse. Auctor vel in vitae placerat. <br />
3. Suspendisse maecenas ac donec scelerisque diam sed est duis
purus.
</span>
</p>
<div>
<img
className="h-[430px] md:h-full object-cover rounded-2xl md:rounded-none"
src={introimg3}
alt=""
/>
<p className="text-[14px] leading-[142.857%] text-white">
Image courtesy of Scott Webb via{" "}
<span className=" underline !underline-offset-[2px] mb-0">
Pexels
</span>
</p>
<p className="tab-button-text pt-4">
Lectus leo massa amet posuere. Malesuada mattis non convallis
quisque. Libero sit et imperdiet bibendum quisque dictum
vestibulum in non. Pretium ultricies tempor non est diam. Enim ut
enim amet amet integer cursus. Sit ac commodo pretium sed etiam
turpis suspendisse at
<span className="inline-block pt-4">
Tristique odio senectus nam posuere ornare leo metus, ultricies.
Blandit duis ultricies vulputate morbi feugiat cras placerat
elit. Aliquam tellus lorem sed ac. Montes, sed mattis
pellentesque suscipit accumsan. Cursus viverra aenean magna
risus elementum faucibus molestie pellentesque. Arcu ultricies
sed mauris vestibulum.
</span>
</p>
</div>
<ConclusionCard />

<div className="hidden md:flex justify-between items-center gap-10">
<div className="bg-[#3E3355] w-full h-[1px] "></div>
<div className="flex flex-col items-center">
<p className="tab-button-text">Share this post</p>
<div className="flex items-center gap-4">
<button className="bg-primary px-6 py-3 rounded-[80px] tab-button-text flex items-center gap-3">
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 6.66675C16.8807 6.66675 18 5.54746 18 4.16675C18 2.78604 16.8807 1.66675 15.5 1.66675C14.1193 1.66675 13 2.78604 13 4.16675C13 5.54746 14.1193 6.66675 15.5 6.66675Z"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.5 12.5C6.88071 12.5 8 11.3807 8 10C8 8.61929 6.88071 7.5 5.5 7.5C4.11929 7.5 3 8.61929 3 10C3 11.3807 4.11929 12.5 5.5 12.5Z"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.5 18.3335C16.8807 18.3335 18 17.2142 18 15.8335C18 14.4528 16.8807 13.3335 15.5 13.3335C14.1193 13.3335 13 14.4528 13 15.8335C13 17.2142 14.1193 18.3335 15.5 18.3335Z"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M7.65625 11.2583L13.3479 14.575"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.3396 5.42505L7.65625 8.74172"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Share
</button>
<a href="">
<MobileFooterFacebook />
</a>
<a href="">
<MobileFooterSocial />
</a>
<a href="">
<MobileFooterCat />
</a>
</div>
</div>
<div className="bg-[#3E3355] w-full h-[1px] inline-block"></div>
</div>
</div>
</div>
</article>
)
}

export default Introduction
30 changes: 30 additions & 0 deletions src/components/New-Article/RelatedArticle.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react"
import RelatedArticleCard from "./RelatedArticleCard"

const RelatedArticle = () => {
return (
<div className="max-w-[1264px] px-6 mx-auto py-8 md:py-16">
<div className=" max-w-[670px] mx-auto flex flex-col items-center justify-center">
<h3 className=" text-5xl leading-[116%] text-white text-center font-semibold">
Related Articles
</h3>
<h6 className="text-lightgrey mt-6 tab-button-text text-center">
Eclipse Temurin offers high-performance, cross-platform, open-source
Java runtime binaries that are enterprise-ready and Java SE TCK-tested
for general use in the Java ecosystem.
</h6>
<button className="rounded-2xl bg-transparent gradient-border mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-bold w-[160px] h-[48px] block ">
See all articles
</button>
</div>

<div className="flex justify-center flex-wrap items-center gap-5 pt-16">
<RelatedArticleCard />
<RelatedArticleCard />
<RelatedArticleCard />
</div>
</div>
)
}

export default RelatedArticle
28 changes: 28 additions & 0 deletions src/components/New-Article/RelatedArticleCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from "react"
import cardimg from "../../img/new-article-card-img.png"
import { Link } from "gatsby"

const RelatedArticleCard = () => {
return (
<div className="flex flex-col max-w-[392px] newscard-2 bg-[#200D46] p-6">
<div className="relative">
<img className=" mb-0 pb-5" src={cardimg} alt="" />
<button className="text-[12px] font-semibold leading-[33.333%] bg-[#3E3355] rounded-[80px] px-4 py-4 absolute top-3 right-4">
Category
</button>
</div>
<h2 className="text-[20px] font-semibold text-white leading-[140%] mb-0 pb-5">
Renist ekopod övervakningsekon. Köttnorm jast fidget spinner.{" "}
</h2>
<p className="mb-0">5 Jun, 2023</p>
<Link
to=""
className="py-3 text-base underline font-bold leading-6 text-white mt-4 block border-white w-fit"
>
Read More
</Link>
</div>
)
}

export default RelatedArticleCard
Loading

0 comments on commit 7b651f1

Please sign in to comment.