This is an automated email from the ASF dual-hosted git repository.
ako pushed a commit to branch new-web
in repository https://gitbox.apache.org/repos/asf/age-website.git
The following commit(s) were added to refs/heads/new-web by this push:
new 1be34b0d Update website (#267)
1be34b0d is described below
commit 1be34b0da4a3ea3fc0a07765c604386bed020e89
Author: dpdjvhxm <[email protected]>
AuthorDate: Thu Mar 21 20:07:28 2024 +0900
Update website (#267)
* Update index.md
* Update index.md
* Update gatsby-config.js
* Update package.json
* Add files via upload
* Add files via upload
* Add files via upload
* Update Navbar.js
* Update Footer
Update Download version and file link
Update Landing Page (News & Events)
* Update Landing page: Comparison
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Add files via upload
* Fix Google Analytics Code
* Fix Footer Link
* Update landing page and add FAQ page
* Fix double MenuToggle button issue and css
Fixing bugs with two menu buttons on the responsive screen Fixing the
phenomenon that the scrollbar obscures the menu buttons
* Update
* Update
---------
Co-authored-by: Hanbyeol Shin / David Shin / 신한별
<[email protected]>
---
src/components/Navbar.js | 19 +++-
src/components/styles/FAQ.scss | 15 ++-
src/pages/contribution/guide.md | 2 +-
src/pages/faq/index.js | 169 +++++++++++++++++++++-------
src/pages/getstarted/index.js | 218 +++++++++++++++++++++++++++++++++++++
src/pages/getstarted/quickstart.md | 105 ++++++++++++++++++
src/pages/index.md | 2 +-
src/pages/joinus/index.md | 16 +++
static/img/videocall_icon.png | Bin 0 -> 20631 bytes
9 files changed, 496 insertions(+), 50 deletions(-)
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 11522487..e0dfb589 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -24,6 +24,14 @@ const Navbar = () => {
mode="horizontal"
style={{ width: '100%', justifyContent: 'center' }}
>
+ <Menu.SubMenu title="Get Started">
+ <Menu.Item>
+ <Link className="navbar-item" to="/getstarted/quickstart">
+ Quickstart
+ </Link>
+ </Menu.Item>
+ </Menu.SubMenu>
+
<Menu.SubMenu title="Apache AGE">
<Menu.Item>
<Link className="navbar-item" to="/overview">
@@ -35,11 +43,11 @@ const Navbar = () => {
Team
</Link>
</Menu.Item>
- <Menu.Item>
+ {/*<Menu.Item> 릴리스 노트
<Link className="navbar-item" to="/release-notes">
Release Notes
</Link>
- </Menu.Item>
+ </Menu.Item>*/}
<Menu.Item>
<Link className="navbar-item" to="/faq">
F A Q
@@ -109,12 +117,17 @@ const Navbar = () => {
</Link>
</Menu.Item>
</Menu.SubMenu>
- <Menu.SubMenu title="Documentation">
+ <Menu.SubMenu title="Doc">
<Menu.Item>
<a
href="https://age.apache.org/age-manual/master/intro/overview.html";
target="_blank" className="navbar-item">
Introduction
</a>
</Menu.Item>
+ <Menu.Item>
+ <a
href="https://age.apache.org/age-manual/master/intro/setup.html";
target="_blank" className="navbar-item">
+ Setup
+ </a>
+ </Menu.Item>
<Menu.Item>
<a
href="https://age.apache.org/age-manual/master/clauses/match.html";
target="_blank" className="navbar-item">
Clauses
diff --git a/src/components/styles/FAQ.scss b/src/components/styles/FAQ.scss
index 53ab3e9b..0c0c2d67 100644
--- a/src/components/styles/FAQ.scss
+++ b/src/components/styles/FAQ.scss
@@ -11,7 +11,9 @@
outline: none;
font-size: 15px;
transition: background-color 0.2s ease;
- margin-bottom: 0px; // 원하는 간격으로 조절하세요.
+ border-radius: 10px; // 모서리를 둥글게
+ margin-bottom: 10px; // 원하는 간격으로 조절하세요.
+ font-size: 16px; // 폰트 사이즈 설정
}
.accordion-header:hover {
@@ -19,16 +21,19 @@
}
.accordion-content {
+ line-height: 2.5; /* 글자 크기의 1.5배로 줄 간격을 설정 */
padding: 0 15px;
margin: 5px 0;
padding-top: 0 20px;
padding-right: 0 30px;
padding-bottom: 0 20px;
padding-left: 0 30px;
- background-color: rgb(255, 213, 213);
+ background-color: #F5F5DC;
overflow: hidden;
transition: max-height 0.2s ease-out;
+ border-radius: 10px; // 모서리를 둥글게
margin-bottom: 20px; // 원하는 간격으로 조절하세요.
+ font-size: 16px; // 폰트 사이즈 설정
}
/* 상태에 따라 클래스를 토글하여 애니메이션을 적용할 수 있습니다. */
@@ -40,9 +45,9 @@
max-height: 0;
}
-.content {
- padding-left: 15%; // 왼쪽에 공백을 추가합니다.
- padding-right: 15%; // 오른쪽에 공백을 추가합니다.
+.faq-content-page {
+ padding-left: 10%; // 왼쪽에 공백을 추가합니다.
+ padding-right: 10%; // 오른쪽에 공백을 추가합니다.
@media (max-width: 768px) {
padding-left: 5%;
diff --git a/src/pages/contribution/guide.md b/src/pages/contribution/guide.md
index ce4b3ab3..157ac2e3 100644
--- a/src/pages/contribution/guide.md
+++ b/src/pages/contribution/guide.md
@@ -15,7 +15,7 @@ Table of Contents
- [Coding Style Guide](#code-style-guilde)
- [Creating Documentation](#creating-documentation)
-<h2 id="code-review-process">Code Review Process (To be updated)</h2>
+<h2 id="code-review-process">Code Review Process</h2>
- Make a commit (or multiple commits) on your local branch.
- Create .patch file(s) of the commit(s).
diff --git a/src/pages/faq/index.js b/src/pages/faq/index.js
index 710a19ad..f43dd866 100644
--- a/src/pages/faq/index.js
+++ b/src/pages/faq/index.js
@@ -18,44 +18,133 @@ class FAQ extends React.Component {
render() {
const faqData = [
- { id: 1, question: 'What is the graph database, and how is it different
from the relational database?'
- , answer: 'A graph database is a specialized type of database designed
for storing, managing, and querying highly interconnected data more efficiently
than traditional databases. Unlike relational databases that store data in
tables with rows and columns, graph databases use graph structures comprising
nodes (entities), edges (relationships), and properties (attributes) to
represent and store data. The main differences between graph databases and
relational databases include: Data [...]
-
- { id: 2, question: 'What is the best way for someone to get started with
Apache AGE? Are there any recommended resources or tutorials which you could
recommend for a comprehensive introduction?'
- , answer: 'The best way to start with Apache AGE is by exploring the
official documentation on the Apache AGE website. For a comprehensive
introduction, visit the Apache AGE documentation and the GitHub repository for
in-depth guides, examples, and community resources.' },
-
- { id: 3, question: 'How does the integration of Apache AGE with
PostgreSQL benefit developers and organizations?'
- , answer: 'The integration of Apache AGE with PostgreSQL offers
developers and organizations the ability to manage both graph and relational
data within a single, powerful database system, facilitating complex data
analyses and relationships with the efficiency and reliability of PostgreSQL.'
},
-
- { id: 4, question: 'Is Apache AGE compatible with all PostgreSQL
versions?'
- , answer: 'Apache AGE is compatible with PostgreSQL versions up to 16.
Please check https://github.com/apache/age/releases.' },
-
- { id: 5, question: 'What is the reason for people to use Apache AGE when
there are other graph databases?'
- , answer: 'People use Apache AGE for its seamless integration with
PostgreSQL, allowing them to leverage graph database capabilities alongside
relational data within a familiar SQL environment, without the need to adopt a
separate graph database system.' },
-
- { id: 6, question: 'What query language does Apache AGE use for graph
operations?'
- , answer: 'openCypher' },
-
- { id: 7, question: 'Do I need to pay to use Apache AGE?'
- , answer: 'Apache AGE is an open source project and free to use. But
there are some vendors providing commercial support such as AGEDB in Canada.' },
-
- { id: 8, question: 'How can I install Apache AGE?'
- , answer: 'Source codes and binaries are available at
https://github.com/apache/age/releases.https://hub.docker.com/r/apache/age.Please
refer to https://age.apache.org/age-manual/master/intro/overview.html' },
-
- { id: 9, question: 'How does Apache AGE stand out compared to other
similar tools?'
- , answer: 'Apache AGE stands out by integrating graph database
capabilities directly into PostgreSQL, allowing users to manage graph and
relational data within the same database system. This unique approach offers
the robustness, scalability, and familiarity of PostgreSQL while enabling
complex graph queries and analyses without the need for separate graph database
solutions.' },
-
- { id: 10, question: 'Could you provide instances of industries wherein
Apache AGE could be utilized?'
- , answer: 'Apache AGE is beneficial in industries like social
networking, for analyzing relationships; finance, for fraud detection and
customer insights; healthcare, for patient data and relationships;
telecommunications, for network infrastructure management; and logistics, for
route optimization and supply chain analysis.' },
-
- { id: 11, question: 'How often is Apache AGE updated, and how can I stay
informed about new releases?'
- , answer: 'Apache AGE updates vary based on development progress and
community contributions. To stay informed about new releases, follow the Apache
AGE project on GitHub, subscribe to their mailing list, or join their community
forums.' },
-
- { id: 12, question: 'Is there a community or support forum for Apache
AGE?'
- , answer: 'GitHub dicussion and Issues, mailing lists:
[email protected], [email protected]' },
-
- { id: 13, question: 'How can I contribute to the development of Apache
AGE?'
- , answer: 'Please refer to https://age.apache.org/contribution/how' },
+ { id: 1, question: 'Q 1 : What is the graph database, and how is it
different from the relational database?',
+ answer: () => (
+ <>
+ <p>A graph database is a specialized type of database designed for
storing, managing, and querying highly interconnected data more efficiently
than traditional databases. Unlike relational databases that store data in
tables with rows and columns, graph databases use graph structures comprising
nodes (entities), edges (relationships), and properties (attributes) to
represent and store data.</p>
+ <p>The main differences between graph databases and relational
databases include:</p>
+ <p><strong>Data Structure:</strong> Graph databases utilize nodes
and edges to represent entities and their relationships, facilitating direct
storage of relationship data. Relational databases use tables, where
relationships are inferred through joins.</p>
+ <p><strong>Query Performance:</strong> Graph databases excel in
scenarios requiring extensive traversal of relationships, making them ideal for
complex networks like social networks, recommendation engines, and more.
Relational databases can struggle with performance as the complexity and volume
of relationships increase.</p>
+ <p><strong>Schema Flexibility:</strong> Graph databases often offer
more flexibility with schema-less designs, allowing easier modification of the
data model. Relational databases typically require a predefined schema, making
alterations more challenging.</p>
+ <p>Apache AGE extends PostgreSQL, enabling it to function as a graph
database. This allows users to leverage graph database capabilities within a
familiar relational database environment, offering the best of both worlds: the
robustness and ACID compliance of PostgreSQL with the flexibility and
relationship-handling prowess of graph databases.</p>
+ </>
+ ),
+ }
+ ,
+
+ { id: 2, question: 'Q 2 : What is the best way for someone to get
started with Apache AGE? Are there any recommended resources or tutorials which
you could recommend for a comprehensive introduction?',
+ answer: () => (
+ <>
+ <p>The best way to start with Apache AGE is by exploring the
official documentation on the Apache AGE website.</p>
+ <p>For a comprehensive introduction, visit the Apache AGE
documentation and the GitHub repository for in-depth guides, examples, and
community resources.</p>
+ </>
+ ),
+ },
+
+ { id: 3, question: 'Q 3 : How does the integration of Apache AGE with
PostgreSQL benefit developers and organizations?',
+ answer: () => (
+ <>
+ <p>The integration of Apache AGE with PostgreSQL offers developers
and organizations the ability to manage both graph and relational data within a
single, powerful database system.</p>
+ <p>This facilitates complex data analyses and relationships with the
efficiency and reliability of PostgreSQL.</p>
+ </>
+ ),
+ },
+
+ { id: 4, question: 'Q 4 : Is Apache AGE compatible with all PostgreSQL
versions?',
+ answer: () => (
+ <>
+ Apache AGE is compatible with PostgreSQL versions up to 16. Please
check
+ <a href="https://github.com/apache/age/releases"; target="_blank"
rel="noopener noreferrer"> the releases on GitHub</a>.
+ </>
+ ),
+ },
+
+ { id: 5, question: 'Q 5 : What is the reason for people to use Apache
AGE when there are other graph databases?',
+ answer: () => (
+ <>
+ <p>People use Apache AGE for its seamless integration with
PostgreSQL, allowing them to leverage graph database capabilities alongside
relational data within a familiar SQL environment, without the need to adopt a
separate graph database system.</p>
+ </>
+ ),
+ },
+
+ { id: 6, question: 'Q 6 : What query language does Apache AGE use for
graph operations?',
+ answer: () => (
+ <>
+ openCypher
+ </>
+ ),
+ },
+
+ { id: 7, question: 'Q 7 : Do I need to pay to use Apache AGE?',
+ answer: () => (
+ <>
+ <p>Apache AGE is an open source project and free to use.</p>
+ <p>But there are some vendors providing commercial support such as
AGEDB in Canada.</p>
+ </>
+ ),
+ },
+
+ { id: 8, question: 'Q 8 : How can I install Apache AGE?',
+ answer: () => (
+ <>
+ Source codes and binaries are available at
+ <a href="https://github.com/apache/age/releases"; target="_blank"
rel="noopener noreferrer">GitHub</a>.
+ <a href="https://hub.docker.com/r/apache/age"; target="_blank"
rel="noopener noreferrer">Docker Hub</a>.
+ Please refer to
+ <a
href="https://age.apache.org/age-manual/master/intro/overview.html";
target="_blank" rel="noopener noreferrer">the official AGE manual</a> for more
details.
+ </>
+ ),
+ },
+
+
+ { id: 9, question: 'Q 9 : How does Apache AGE stand out compared to
other similar tools?',
+ answer: () => (
+ <>
+ <p>Apache AGE stands out by integrating graph database capabilities
directly into PostgreSQL, allowing users to manage graph and relational data
within the same database system. </p>
+ <p>This unique approach offers the robustness, scalability, and
familiarity of PostgreSQL while enabling complex graph queries and analyses
without the need for separate graph database solutions.</p>
+ </>
+ ),
+ },
+
+
+ { id: 10, question: 'Q 10 : Could you provide instances of industries
wherein Apache AGE could be utilized?',
+ answer: () => (
+ <>
+ <p>pache AGE is beneficial in industries like social networking, for
analyzing relationships; finance, for fraud detection and customer insights;
healthcare, for patient data and relationships; telecommunications, for network
infrastructure management; and logistics, for route optimization and supply
chain analysis.</p>
+ </>
+ ),
+ },
+
+ { id: 11, question: 'Q 11 : How often is Apache AGE updated, and how can
I stay informed about new releases?'
+ ,answer: () => (
+ <>
+ <p>Apache AGE updates vary based on development progress and
community contributions.</p>
+ <p>To stay informed about new releases, follow the Apache AGE
project on GitHub, subscribe to their mailing list, or join their community
forums.</p>
+ </>
+ ),
+ },
+
+ { id: 12, question: 'Q 12 : Is there a community or support forum for
Apache AGE?',
+ answer: () => (
+ <>
+ <p>Apache AGE GitHub</p>
+ <p><a
href="https://github.com/apache/age/discussions";>Discussions</a></p>
+ <p><a href="https://github.com/apache/age/issues";>Issues</a></p>
+ <p>mailing lists:</p>
+ <p><a href="mailto:[email protected]";>[email protected]</a></p>
+ <p><a href="mailto:[email protected]";>[email protected]</a></p>
+ </>
+ ),
+ },
+
+ { id: 13, question: 'Q 13 : How can I contribute to the development of
Apache AGE?',
+ answer: () => (
+ <>
+ Please refer to <a href="https://age.apache.org/contribution/how";
target="_blank" rel="noopener noreferrer">the contribution guidelines</a>.
+ </>
+ ),
+ }
+
// 여기에 추가 질문과 답변을 넣을 수 있습니다.
];
@@ -75,7 +164,7 @@ class FAQ extends React.Component {
<div
className={`accordion-content ${openItemId === id ? 'open' :
'closed'}`}
>
- {answer}
+ {typeof answer === 'function' ? answer() : answer}
</div>
</div>
))}
@@ -111,7 +200,7 @@ export default class FAQIndexPage extends React.Component {
</div>
<section className="section">
<div className="container">
- <div className="content">
+ <div className="faq-content-page">
<br></br>
<h2>Thank you for visiting our FAQ page. If you can't find the
question you're looking for, please leave your comments or questions in the
<strong><a href="https://github.com/apache/age/issues";
target="_blank"> issues</a></strong> or
diff --git a/src/pages/getstarted/index.js b/src/pages/getstarted/index.js
new file mode 100644
index 00000000..f43dd866
--- /dev/null
+++ b/src/pages/getstarted/index.js
@@ -0,0 +1,218 @@
+import * as React from 'react';
+import Layout from "../../components/Layout";
+
+import "../../components/styles/FAQ.scss"; // SCSS 파일 임포트
+
+// FAQ 컴포넌트 수정
+class FAQ extends React.Component {
+ state = {
+ openItemId: null,
+ };
+
+ toggleItem = (id) => {
+ this.setState((prevState) => ({
+ openItemId: prevState.openItemId === id ? null : id
+ }));
+ };
+
+ render() {
+
+ const faqData = [
+ { id: 1, question: 'Q 1 : What is the graph database, and how is it
different from the relational database?',
+ answer: () => (
+ <>
+ <p>A graph database is a specialized type of database designed for
storing, managing, and querying highly interconnected data more efficiently
than traditional databases. Unlike relational databases that store data in
tables with rows and columns, graph databases use graph structures comprising
nodes (entities), edges (relationships), and properties (attributes) to
represent and store data.</p>
+ <p>The main differences between graph databases and relational
databases include:</p>
+ <p><strong>Data Structure:</strong> Graph databases utilize nodes
and edges to represent entities and their relationships, facilitating direct
storage of relationship data. Relational databases use tables, where
relationships are inferred through joins.</p>
+ <p><strong>Query Performance:</strong> Graph databases excel in
scenarios requiring extensive traversal of relationships, making them ideal for
complex networks like social networks, recommendation engines, and more.
Relational databases can struggle with performance as the complexity and volume
of relationships increase.</p>
+ <p><strong>Schema Flexibility:</strong> Graph databases often offer
more flexibility with schema-less designs, allowing easier modification of the
data model. Relational databases typically require a predefined schema, making
alterations more challenging.</p>
+ <p>Apache AGE extends PostgreSQL, enabling it to function as a graph
database. This allows users to leverage graph database capabilities within a
familiar relational database environment, offering the best of both worlds: the
robustness and ACID compliance of PostgreSQL with the flexibility and
relationship-handling prowess of graph databases.</p>
+ </>
+ ),
+ }
+ ,
+
+ { id: 2, question: 'Q 2 : What is the best way for someone to get
started with Apache AGE? Are there any recommended resources or tutorials which
you could recommend for a comprehensive introduction?',
+ answer: () => (
+ <>
+ <p>The best way to start with Apache AGE is by exploring the
official documentation on the Apache AGE website.</p>
+ <p>For a comprehensive introduction, visit the Apache AGE
documentation and the GitHub repository for in-depth guides, examples, and
community resources.</p>
+ </>
+ ),
+ },
+
+ { id: 3, question: 'Q 3 : How does the integration of Apache AGE with
PostgreSQL benefit developers and organizations?',
+ answer: () => (
+ <>
+ <p>The integration of Apache AGE with PostgreSQL offers developers
and organizations the ability to manage both graph and relational data within a
single, powerful database system.</p>
+ <p>This facilitates complex data analyses and relationships with the
efficiency and reliability of PostgreSQL.</p>
+ </>
+ ),
+ },
+
+ { id: 4, question: 'Q 4 : Is Apache AGE compatible with all PostgreSQL
versions?',
+ answer: () => (
+ <>
+ Apache AGE is compatible with PostgreSQL versions up to 16. Please
check
+ <a href="https://github.com/apache/age/releases"; target="_blank"
rel="noopener noreferrer"> the releases on GitHub</a>.
+ </>
+ ),
+ },
+
+ { id: 5, question: 'Q 5 : What is the reason for people to use Apache
AGE when there are other graph databases?',
+ answer: () => (
+ <>
+ <p>People use Apache AGE for its seamless integration with
PostgreSQL, allowing them to leverage graph database capabilities alongside
relational data within a familiar SQL environment, without the need to adopt a
separate graph database system.</p>
+ </>
+ ),
+ },
+
+ { id: 6, question: 'Q 6 : What query language does Apache AGE use for
graph operations?',
+ answer: () => (
+ <>
+ openCypher
+ </>
+ ),
+ },
+
+ { id: 7, question: 'Q 7 : Do I need to pay to use Apache AGE?',
+ answer: () => (
+ <>
+ <p>Apache AGE is an open source project and free to use.</p>
+ <p>But there are some vendors providing commercial support such as
AGEDB in Canada.</p>
+ </>
+ ),
+ },
+
+ { id: 8, question: 'Q 8 : How can I install Apache AGE?',
+ answer: () => (
+ <>
+ Source codes and binaries are available at
+ <a href="https://github.com/apache/age/releases"; target="_blank"
rel="noopener noreferrer">GitHub</a>.
+ <a href="https://hub.docker.com/r/apache/age"; target="_blank"
rel="noopener noreferrer">Docker Hub</a>.
+ Please refer to
+ <a
href="https://age.apache.org/age-manual/master/intro/overview.html";
target="_blank" rel="noopener noreferrer">the official AGE manual</a> for more
details.
+ </>
+ ),
+ },
+
+
+ { id: 9, question: 'Q 9 : How does Apache AGE stand out compared to
other similar tools?',
+ answer: () => (
+ <>
+ <p>Apache AGE stands out by integrating graph database capabilities
directly into PostgreSQL, allowing users to manage graph and relational data
within the same database system. </p>
+ <p>This unique approach offers the robustness, scalability, and
familiarity of PostgreSQL while enabling complex graph queries and analyses
without the need for separate graph database solutions.</p>
+ </>
+ ),
+ },
+
+
+ { id: 10, question: 'Q 10 : Could you provide instances of industries
wherein Apache AGE could be utilized?',
+ answer: () => (
+ <>
+ <p>pache AGE is beneficial in industries like social networking, for
analyzing relationships; finance, for fraud detection and customer insights;
healthcare, for patient data and relationships; telecommunications, for network
infrastructure management; and logistics, for route optimization and supply
chain analysis.</p>
+ </>
+ ),
+ },
+
+ { id: 11, question: 'Q 11 : How often is Apache AGE updated, and how can
I stay informed about new releases?'
+ ,answer: () => (
+ <>
+ <p>Apache AGE updates vary based on development progress and
community contributions.</p>
+ <p>To stay informed about new releases, follow the Apache AGE
project on GitHub, subscribe to their mailing list, or join their community
forums.</p>
+ </>
+ ),
+ },
+
+ { id: 12, question: 'Q 12 : Is there a community or support forum for
Apache AGE?',
+ answer: () => (
+ <>
+ <p>Apache AGE GitHub</p>
+ <p><a
href="https://github.com/apache/age/discussions";>Discussions</a></p>
+ <p><a href="https://github.com/apache/age/issues";>Issues</a></p>
+ <p>mailing lists:</p>
+ <p><a href="mailto:[email protected]";>[email protected]</a></p>
+ <p><a href="mailto:[email protected]";>[email protected]</a></p>
+ </>
+ ),
+ },
+
+ { id: 13, question: 'Q 13 : How can I contribute to the development of
Apache AGE?',
+ answer: () => (
+ <>
+ Please refer to <a href="https://age.apache.org/contribution/how";
target="_blank" rel="noopener noreferrer">the contribution guidelines</a>.
+ </>
+ ),
+ }
+
+
+ // 여기에 추가 질문과 답변을 넣을 수 있습니다.
+ ];
+ const { openItemId } = this.state;
+
+
+ return (
+ <div>
+ {faqData.map(({ id, question, answer }) => (
+ <div key={id} className="faq-item">
+ <div
+ className={`accordion-header ${openItemId === id ? 'active' :
''}`}
+ onClick={() => this.toggleItem(id)}
+ >
+ {question}
+ </div>
+ <div
+ className={`accordion-content ${openItemId === id ? 'open' :
'closed'}`}
+ >
+ {typeof answer === 'function' ? answer() : answer}
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ }
+ }
+
+
+// FAQIndexPage 컴포넌트 수정
+export default class FAQIndexPage extends React.Component {
+ render() {
+ return (
+ <Layout>
+ <div
+ className="full-width-image-container margin-top-0"
+ style={{
+ backgroundImage: `url('')`,
+ }}
+ >
+ <h1
+ className="has-text-weight-bold is-size-1"
+ style={{
+ boxShadow: "0.5rem 0 0 #f40, -0.5rem 0 0 #f40",
+ backgroundColor: "rgb(184, 20, 90)",
+ color: "white",
+ padding: "1rem",
+ textAlign: "center"
+ }}
+ >
+ Frequently Asked Questions
+ </h1>
+ </div>
+ <section className="section">
+ <div className="container">
+ <div className="faq-content-page">
+ <br></br>
+ <h2>Thank you for visiting our FAQ page. If you can't find the
question you're looking for, please leave your comments or questions in the
+ <strong><a href="https://github.com/apache/age/issues";
target="_blank"> issues</a></strong> or
+ <strong><a href="https://github.com/apache/age/discussions";
target="_blank"> discussions</a></strong> section on the
+ <strong><a href="https://github.com/apache/age";
target="_blank"> Apache AGE GitHub page</a></strong>. We look forward to
hearing from you.
+ </h2><hr></hr>
+ <br></br>
+ <FAQ />
+ </div>
+ </div>
+ </section>
+ </Layout>
+ );
+ }
+}
diff --git a/src/pages/getstarted/quickstart.md
b/src/pages/getstarted/quickstart.md
new file mode 100644
index 00000000..62d973a7
--- /dev/null
+++ b/src/pages/getstarted/quickstart.md
@@ -0,0 +1,105 @@
+---
+templateKey: docs-template
+path: /Get Started/Quickstart
+title: Quickstart
+---
+
+<div class="DeveloperGuidelines">
+
+## Run using Windows Installer
+The Windows installer is an installation file that packages PostgreSQL version
15, Apache AGE version 1.4.0, and Graphizer (graph visualization tool).
+
+| Windows Installer |
+| --------------------- |
+| Windows Installer download will open on March 25, 2024. |
+
+## Run using Docker
+- Get the docker image
+```
+docker pull apache/age
+```
+- Create AGE docker container
+```
+docker run \
+--name age \
+-p 5455:5432 \
+-e POSTGRES_USER=postgresUser \
+-e POSTGRES_PASSWORD=postgresPW \
+-e POSTGRES_DB=postgresDB \
+-d \
+apache/age
+```
+- Enter PostgreSQL's psql:
+```
+docker exec -it age psql -d postgresDB -U postgresUser
+```
+## Post Installation
+- For every connection of AGE you start, you will need to load the AGE
extension.
+```
+CREATE EXTENSION age;
+```
+```
+LOAD 'age';
+```
+```
+ SET search_path = ag_catalog, "$user", public;
+```
+
+## Quick Start
+- To create a graph, use the create_graph function located in the ag_catalog
namespace.
+```
+SELECT create_graph('graph_name');
+```
+- To create a single vertex, use the CREATE clause.
+```
+SELECT *
+FROM cypher('graph_name', $$
+ CREATE (n)
+$$) as (v agtype);
+```
+- To create a single vertex with the label, use the CREATE clause.
+```
+SELECT *
+FROM cypher('graph_name', $$
+ CREATE (:label)
+$$) as (v agtype);
+```
+- To query the graph, you can use the MATCH clause.
+```
+SELECT *
+FROM cypher('graph_name', $$
+ MATCH (v)
+ RETURN v
+$$) as (v agtype);
+```
+- You can use the following to create an edge, for example, between two nodes.
+```
+SELECT *
+FROM cypher('graph_name', $$
+ MATCH (a:label), (b:label)
+ WHERE a.property = 'Node A' AND b.property = 'Node B'
+ CREATE (a)-[e:RELTYPE]->(b)
+ RETURN e
+$$) as (e agtype);
+```
+- To create an edge and set properties.
+```
+SELECT *
+FROM cypher('graph_name', $$
+ MATCH (a:label), (b:label)
+ WHERE a.property = 'Node A' AND b.property = 'Node B'
+ CREATE (a)-[e:RELTYPE {property:a.property + '<->' + b.property}]->(b)
+ RETURN e
+$$) as (e agtype);
+```
+- Example
+```
+SELECT *
+FROM cypher('graph_name', $$
+ MATCH (a:Person), (b:Person)
+ WHERE a.name = 'Node A' AND b.name = 'Node B'
+ CREATE (a)-[e:RELTYPE {name:a.name + '<->' + b.name}]->(b)
+ RETURN e
+$$) as (e agtype);
+```
+</div>
\ No newline at end of file
diff --git a/src/pages/index.md b/src/pages/index.md
index 92ead6b8..006a046f 100644
--- a/src/pages/index.md
+++ b/src/pages/index.md
@@ -12,5 +12,5 @@ bannerContents: >-
<br/>Apache AGE is compatible with PostgreSQL's distributed assets and
leverages graph data structures to analyze and use relationships and patterns
in data.</span> <br/>
<br>
- <a href="https://age.apache.org/age-manual/master/intro/setup.html";
class="bannerButton" target="_blank" rel="noopener noreferrer">Get Started with
Apache AGE</a>
+ <a href="/getstarted/quickstart" class="bannerButton" rel="noopener
noreferrer">Get Started with Apache AGE</a>
<a href="/download" class="bannerButton" rel="noopener noreferrer">Download
Apache AGE</a>
\ No newline at end of file
diff --git a/src/pages/joinus/index.md b/src/pages/joinus/index.md
index 96de7c2d..3a9f9649 100644
--- a/src/pages/joinus/index.md
+++ b/src/pages/joinus/index.md
@@ -57,6 +57,22 @@ Join the official Apache AGE user and developer mailing
lists. You can get user
</ul>
</div>
+<div>
+ <img src="/img/videocall_icon.png"/>
+</div>
+
+<div>
+
+## Office-hour
+
+Our technical office hours sessions are your gateway to one-on-one engagements
with the Developer Advocacy team, focusing on the revolutionary capabilities of
Apache AGE within PostgreSQL.
+Delve into the world of graph databases, address your complex data
connectivity issues, and receive personalized advice tailored to your database
requirements. During these sessions, you'll have the opportunity to share your
thoughts, get answers to your questions, and explore the features, use cases,
and implementation strategies of Apache AGE. Book your session now to gain the
insights needed to fully harness the power of graph databases.
+
+ <ul>
+ <li>Marco Souza (Brazil) <a
href="https://apacheage.setmore.com/marco-souza";>Book a time with Marco Souza
</a></li>
+ </ul>
+</div>
+
<div>
<img src="/img/icon_x.png"/>
</div>
diff --git a/static/img/videocall_icon.png b/static/img/videocall_icon.png
new file mode 100644
index 00000000..ee54ab75
Binary files /dev/null and b/static/img/videocall_icon.png differ
