Skip to content

Commit

Permalink
Merge pull request #23 from barbaraperic/pr/about
Browse files Browse the repository at this point in the history 
about section UI
  • Loading branch information
@willscott
willscott authored Mar 29, 2024
2 parents 0295389 + f079453 commit be8052e
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 48 deletions.
73 changes: 50 additions & 23 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -995,6 +995,7 @@ export default function Home(props) {
<LookupBg />
</div>
<div className="dataRow">

{/* Hide total indexed CIDs until there is an accurate measure. See:
* https://github.com/ipni/cid.contact/issues/17
Expand Down Expand Up @@ -1062,24 +1063,31 @@ export default function Home(props) {
<section className="about" ref={aboutRef}>
<div className="container">
<h3>About CID Contact</h3>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-1.svg" alt="Map" />
</Col>
<Col xs={12} md={8} className="textCol">
<p>
A content identifier, or CID, is a label used to point to
material in IPFS. However, it doesn't indicate where the content
is stored, but it forms a kind of address based on the content
itself.
</p>
<div className="rowWrapper">
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-1.svg" alt="Map" />
</Col>
<Col xs={12} md={8} className="textCol">
<p>
<strong>Content routing</strong> is the a term used to
describe the problem of finding providers for a given piece
of content. If you have a hash, or CID of some data, how do
you find who has it in the IPFS and Filecoin system?
</p>
</Col>
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-2.svg" alt="Solarsystem" />
</Col>
<Col xs={12} md={8} className="textCol">
</Col>
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-2.svg" alt="Solarsystem" />
</Col>
<Col xs={12} md={8} className="textCol">
<p>
In IPFS, a <strong>Distributed Hash Table</strong> (DHT) is
used as a decentralized answer to content routing. However,
Expand All @@ -1089,13 +1097,13 @@ export default function Home(props) {
participants. It will take too much bandwidth and storage
space to be practical.
</p>
</Col>
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-3.svg" alt="Connected Circles" />
</Col>
<Col xs={12} md={8} className="textCol">
</Col>
</Row>
<Row>
<Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
<img src="images/about-3.svg" alt="Connected Circles" />
</Col>
<Col xs={12} md={8} className="textCol">
<p>
CID Contact encompasses a number of work streams to increase
the scalability and resilience of content routing.{" "}
Expand All @@ -1106,11 +1114,30 @@ export default function Home(props) {
be discovered and used safely, efficiently, and in a
decentralized manner by clients.
</p>
</Col>
</Row>

</Col>
</Row>
</div>
<div className="cidContactWrapper">
<p className="cidContact">
Not sure where to start? Use CID Contact to search the
following CID:
</p>
<div className="inputWrapper">
<input
type="text"
name="queryString"
id="queryString"
value="bafybeigvgzoolc3drupxhlevdp2ugqcrbcsqfmcek2zxiw5wctk3xjpjwy"
/>
</div>
<a
href="https://docs.cid.contact/"
className="btn btn-tertiary"
>
Network Indexer Docs
</a>
</div>
<h3>Partners</h3>

<Slider {...settings}>
<a
href="https://kencloud.com/"
Expand Down
81 changes: 57 additions & 24 deletions sass/_about.scss
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,102 @@
.about{
.about {
.container {
> p:first-of-type {
@include media-breakpoint-up(sm) {
max-width: 80%;
}
}
}

.rowWrapper {
margin-block: 6rem;
display: flex;
flex-direction: column;
gap: 4rem;
}

.row{
.row {
max-width: 773px;
margin: 50px auto;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;

@include media-breakpoint-up(lg) {
margin: 140px auto;

&:first-of-type{
margin-top: 50px;
}
}


.imgCol{
img{
.imgCol {
img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto
margin: 0 auto;
height: 120px;
}
}

.textCol{
p{
.textCol {
p {
font-size: 15px;
font-weight: 400;
line-height: 19.5px;

strong{
strong {
font-weight: 700;
color: $mdBlue;
}
}
}
}

.imageRow{
.imageRow {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 50px;

a{
a {
display: inline-block;
max-width: 50%;
padding: 15px;

@include media-breakpoint-up(sm) {
max-width: 33.333%;
}

@include media-breakpoint-up(lg) {
padding: 20px 30px;
}
img{

img {
width: 100%;
height: auto;
display: block;
}
}
}
}

.cidContactWrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8rem;
gap: 2rem;

> p {
font-size: 1.2rem;
margin: 0;
text-align: center;
}

.inputWrapper {
width: 60%;

input {
width: 100%;
border-radius: 6px;
border: 2px solid $dkGrey;
padding: 6px;
text-align: center;
color: $black;
}
}
}
}
15 changes: 14 additions & 1 deletion sass/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
font-weight: 700;
transition: color 0.4s ease, background-color 0.4s ease,
border-color 0.4s ease;
cursor: pointer;
}

.btn-primary {
Expand Down Expand Up @@ -65,7 +66,7 @@
color: $white;
outline: none !important;

&::after{
&::after {
border-color: $dkBlue;
}

Expand All @@ -81,6 +82,18 @@
min-width: auto;
}

.btn.btn-tertiary {
background-color: $blue;
color: $white;
line-height: normal;

&:hover,
&:active,
&:focus {
background-color: $dkBlue;
}
}

.noStyle {
background-color: transparent;
border: none;
Expand Down

0 comments on commit be8052e

Please sign in to comment.