+
+
Contributed by the community, in collaboration with
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/CommunityLogos/styles.module.css b/src/components/CommunityLogos/styles.module.css
new file mode 100644
index 00000000..fada0521
--- /dev/null
+++ b/src/components/CommunityLogos/styles.module.css
@@ -0,0 +1,38 @@
+.logo {
+ display: flex;
+ align-content: center;
+ flex-direction: column;
+}
+
+.logo div {
+ margin: 0 1rem 0 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.ind_logo {
+ display: flex;
+ padding: 0 1rem 0 1rem;
+}
+
+.community_title {
+ padding-bottom: 2rem;
+ text-align: center;
+}
+
+.section_padding {
+ padding: 4rem 6rem;
+}
+
+@media screen and (max-width: 650px) {
+ .section_padding {
+ padding: 2rem;
+ }
+}
+
+@media screen and (max-width: 490px) {
+ .section_padding {
+ padding: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Features/index.jsx b/src/components/Features/index.jsx
new file mode 100644
index 00000000..516d425e
--- /dev/null
+++ b/src/components/Features/index.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+const features = [
+ {
+ title: 'Artifact Reference',
+ content: [
+ "Attach supply chain artifacts to container images.",
+ "Discover and show the artifact reference relations.",
+ "Extend the registries not just for storing container images.",
+ ],
+ },
+ {
+ title: 'Distributed Software Artifacts',
+ content: [
+ "Manage artifacts in OCI registries.",
+ "Migrate artifacts across registries.",
+ "Manage artifacts in file system through OCI image layout.",
+ ],
+ },
+ {
+ title: 'Explore and Manage OCI Image',
+ content: [
+ "Manage image manifest and layer in an OCI registry.",
+ "Operate tag and repository in an OCI registry.",
+ "Explore the detailed content of an OCI image.",
+ ],
+ },
+];
+
+export default function Features() {
+ return (
+
+
+
Build Your Own Registry Client With Rich Libraries
+
+
+ {LibraryList.map((props, idx) => (
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Libraries/styles.module.css b/src/components/Libraries/styles.module.css
new file mode 100644
index 00000000..713ae1c7
--- /dev/null
+++ b/src/components/Libraries/styles.module.css
@@ -0,0 +1,77 @@
+.libraries {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2rem;
+ margin: 4rem;
+ border-radius: 1rem;
+ background: var(--gradient-blue);
+}
+
+.libraries_heading h2 {
+ color: #FFFFFF;
+ font-weight: 700;
+ font-size: 35px;
+ text-align: center;
+}
+
+.libraries_logos {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.libraries_logos svg {
+ margin: 1.5rem 2rem 0 2rem;
+ transition: all 0.3s ease-out;
+}
+
+.libraries_logos svg:hover {
+ transform: scale(1.2);
+}
+
+.section_padding {
+ padding: 4rem 6rem;
+}
+
+@media screen and (max-width: 650px) {
+ .libraries {
+ margin: 3rem;
+ }
+
+ .libraries_heading h2 {
+ font-size: 30px;
+ }
+
+ .libraries_logos svg {
+ transform: scale(0.9);
+ }
+
+ .libraries_logos svg:hover {
+ transform: scale(1);
+ }
+
+ .section_padding {
+ padding: 3rem;
+ }
+}
+
+@media screen and (max-width: 490px) {
+ .libraries {
+ margin: 2rem;
+ }
+
+ .libraries_heading h2 {
+ font-size: 25px;
+ }
+
+ .libraries_logos svg {
+ transform: scale(0.8);
+ }
+
+ .section_padding {
+ padding: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/WhatIsORAS/index.jsx b/src/components/WhatIsORAS/index.jsx
new file mode 100644
index 00000000..c3e6a675
--- /dev/null
+++ b/src/components/WhatIsORAS/index.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export default function WhatIsORAS() {
+ return (
+