Skip to content

Commit

Permalink
Merge pull request #72 from ceramicnetwork/docs-main-page
Browse files Browse the repository at this point in the history 
New Docs main page
  • Loading branch information
@velvet-shark
velvet-shark authored Feb 28, 2024
2 parents 04a2879 + 0aeca3c commit 6cd5f09
Show file tree
Hide file tree
Showing 10 changed files with 430 additions and 324 deletions.
61 changes: 0 additions & 61 deletions src/components/HomepageFeatures/index.js
View file

This file was deleted.

11 changes: 0 additions & 11 deletions src/components/HomepageFeatures/styles.module.css
View file

This file was deleted.

82 changes: 82 additions & 0 deletions src/components/homepage/community.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from "react";
import styles from "./homeNavBoxes.module.css";

const FeatureList = [
{
title: "Forum →",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M7.23 16.23q-.326 0-.547-.22q-.221-.222-.221-.548v-1h11.75l.634.634V6h1q.327 0 .548.221q.221.221.221.548v12.539l-3.077-3.077H7.231Zm-3.845-.692V3.77q0-.327.22-.548Q3.828 3 4.155 3h11.923q.327 0 .548.221q.221.221.221.548v7.923q0 .327-.221.548q-.221.222-.548.222H6.462l-3.077 3.076Z"
/>
</svg>
),
items: [
{
url: "https://forum.ceramic.network/",
text: "The best place to ask questions and to search for answers."
}
]
},
{
title: "Discord →",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 640 512">
<path
fill="currentColor"
d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91a337.461 337.461 0 0 0-14.9 30.6a447.848 447.848 0 0 0-134.426 0a309.541 309.541 0 0 0-15.135-30.6a1.89 1.89 0 0 0-1.924-.91a483.689 483.689 0 0 0-119.688 37.107a1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375a487.666 487.666 0 0 0 146.825 74.189a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588a321.173 321.173 0 0 1-45.868-21.853a1.885 1.885 0 0 1-.185-3.126a251.047 251.047 0 0 0 9.109-7.137a1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233a234.533 234.533 0 0 0 9.132 7.16a1.884 1.884 0 0 1-.162 3.126a301.407 301.407 0 0 1-45.89 21.83a1.875 1.875 0 0 0-1 2.611a391.055 391.055 0 0 0 30.014 48.815a1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541M222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239c0 32.654-23.41 59.241-52.843 59.241m195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239c0 32.654-23.177 59.241-52.844 59.241"
/>
</svg>
),
items: [
{
url: "https://chat.ceramic.network/",
text: "Join the conversation with other developers and the Ceramic team."
}
]
},
{
title: "Twitter →",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentcolor"
d="M22,3.999c-0.78,0.463-2.345,1.094-3.265,1.276c-0.027,0.007-0.049,0.016-0.075,0.023c-0.813-0.802-1.927-1.299-3.16-1.299 c-2.485,0-4.5,2.015-4.5,4.5c0,0.131-0.011,0.372,0,0.5c-3.353,0-5.905-1.756-7.735-4c-0.199,0.5-0.286,1.29-0.286,2.032 c0,1.401,1.095,2.777,2.8,3.63c-0.314,0.081-0.66,0.139-1.02,0.139c-0.581,0-1.196-0.153-1.759-0.617c0,0.017,0,0.033,0,0.051 c0,1.958,2.078,3.291,3.926,3.662c-0.375,0.221-1.131,0.243-1.5,0.243c-0.26,0-1.18-0.119-1.426-0.165 c0.514,1.605,2.368,2.507,4.135,2.539c-1.382,1.084-2.341,1.486-5.171,1.486H2C3.788,19.145,6.065,20,8.347,20 C15.777,20,20,14.337,20,8.999c0-0.086-0.002-0.266-0.005-0.447C19.995,8.534,20,8.517,20,8.499c0-0.027-0.008-0.053-0.008-0.08 c-0.003-0.136-0.006-0.263-0.009-0.329c0.79-0.57,1.475-1.281,2.017-2.091c-0.725,0.322-1.503,0.538-2.32,0.636 C20.514,6.135,21.699,4.943,22,3.999z"
></path>
</svg>
),
items: [
{
url: "https://twitter.com/ceramicnetwork",
text: "Follow us on Twitter for updates and announcements."
}
]
}
];

function Feature({ title, icon, items }) {
return (
<article>
{items.map((item, idx) => (
<a key={idx} href={item.url} target="blank" className={styles.homecardLink}>
<div className={styles.homecard}>
<div className={styles.title}>{icon}</div>
<div className={styles.title}>{title}</div>
<div className={styles.listContainerLink}>{item.text}</div>
</div>
</a>
))}
</article>
);
}

export default function HomepageFeatures() {
return (
<section className={styles.features}>
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</section>
);
}
64 changes: 25 additions & 39 deletions src/components/homepage/get-started.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,55 @@ import styles from "./homeNavBoxes.module.css";

const FeatureList = [
{
title: "Why Ceramic?",
title: "Why Ceramic? →",
items: [
{
url: "docs/introduction/why-ceramic",
text: "Dive into the overview of Ceramic Network.",
},
],
text: "Dive into the overview of Ceramic Network. See key benefits, compare to other web3 solutions."
}
]
},
{
title: "ComposeDB Sandbox",
title: "ComposeDB Sandbox →",
items: [
{
url: "docs/composedb/sandbox",
text: "Interact with data stored in the Ceramic Network right in your browser.",
},
],
text: "Interact with data stored in the Ceramic Network right in your browser."
}
]
},
{
title: "Ceramic Ecosystem",
title: "Ceramic Ecosystem →",
items: [
{
url: "https://threebox.notion.site/Ceramic-Ecosystem-Directory-a3a7a58f81544d33ad3feb84368775d4",
text: "Explore the innovative projects and tools built on Ceramic Network.",
},
],
},
text: "Explore the innovative projects and tools built on Ceramic Network."
}
]
}
];

function FeatureItem({ url, text }) {
return (
<>
<div className={styles.listContainerLink}>{text}</div>

<a className={styles.action} href={url}>
Learn more{" "}
</a>
</>
);
}

function Feature({ title, icon, items }) {
return (
<article className={clsx("col--4")}>
<div className={styles.homecard}>
<div className={styles.title}>{title}</div>

{items.map((props, idx) => (
<FeatureItem key={idx} {...props} />
))}

</div>
<article>
{items.map((item, idx) => (
<a key={idx} href={item.url} className={styles.homecardLink}>
<div className={styles.homecard}>
<div className={styles.title}>{title}</div>
<div className={styles.listContainerLink}>{item.text}</div>
</div>
</a>
))}
</article>
);
}

export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className={styles.grid3col}>
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</section>
);
}
85 changes: 29 additions & 56 deletions src/components/homepage/homeNavBoxes.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,37 @@
@font-face {
font-family: "Inter";
src: url("../../fonts/Inter/static/Inter-Light.ttf");
}

.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / 3)), 1fr));
/* grid-template-columns: 1fr 1fr; */
gap: 1rem;
}

.featureSvg {
height: 400px;
width: 200px;
}

.grid3col {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 56px;
margin: 0 auto;
}
@media screen and (max-width: 850px) {
.grid3col {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 70px;
margin: 0 auto;
}
.homecardLink {
text-decoration: none;
color: var(--ifm-font-color-base);
}
@media screen and (max-width: 630px) {
.grid3col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
margin: 0 auto;
}
}
@media screen and (max-width: 450px) {
.grid3col {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 50px 0px;
margin: 0 auto;
padding: 0 10%;
}
.homecardLink:hover {
text-decoration: none;
}

.homecard {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 250px;
height: 150px;
height: 125px;
padding: 20px 20px;
border-radius: 15px;
border-radius: 8px;
border: 1px solid #d6d6d6;
background-color: #1c1f26;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
background-color: var(--box-color);
}

.homecard:hover {
background-color: #fff8f6 !important;
}

@media screen and (max-width: 450px) {
Expand All @@ -67,32 +41,31 @@
}

html[data-theme="light"] .homecard {
color: #000;
border-radius: 15px;
border: 1px solid #d6d6d6;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .homecard {
border: 1px solid #d6d6d6;
box-shadow: 2px 2px 10px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .homecard:hover {
border: 1px solid #d6d6d6;
background-color: black !important;
}

.homecard .title {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

html[data-theme="dark"] .homecard {
color: #fff;
border-radius: 15px;
border: 1px solid #d6d6d6;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
text-decoration: none;
}

.homecard .listContainerLink {
color: #000;
font-size: 13px;
color: var(--ifm-font-color-base);
font-size: 0.9em;
font-weight: 300;
line-height: normal;
}
Expand Down
Loading

0 comments on commit 6cd5f09

Please sign in to comment.