import React from 'react'; import { Card, CardDeck } from 'react-bootstrap'; import * as Icon from 'react-bootstrap-icons'; export default function FeatureSection() { return ( <div id="features"> <div className="section-headings d-flex justify-content-center"> <hr /> <h2>Features</h2> <hr /> </div> <div className="d-flex justify-content-center"> <CardDeck> <Card> <div className="feature-icons d-flex justify-content-center"> <Icon.BoundingBoxCircles color="#29274c" size={50} /> </div> <Card.Body> <Card.Title>Build a Visualized Schema</Card.Title> <Card.Text> Prototype your GraphQL schema with an intuitive and interactive GUI. Assemble your graph using object types as building blocks. </Card.Text> </Card.Body> </Card> <Card> <div className="feature-icons d-flex justify-content-center"> <Icon.CodeSquare color="#29274c" size={50} /> </div> <Card.Body> <Card.Title>Auto Generated Code</Card.Title> <Card.Text> Generate GraphQL API with user-defined object types, relationships, and database. </Card.Text> </Card.Body> </Card> <Card> <div className="feature-icons d-flex justify-content-center"> <Icon.LayersFill color="#29274c" size={50} /> </div> <Card.Body> <Card.Title>Connect To A DataBase</Card.Title> <Card.Text> In development. Choose either a relational (PostgreSQL) or non-relational (MongoDB) database to query from. </Card.Text> </Card.Body> </Card> </CardDeck> </div> </div> ); }