Add Features Section (#2)

Author: andersy005

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+**/node_modules
+**/lib
+.next/

package.json

@@ -18,6 +18,7 @@
     "react": "17.0.2",
     "react-custom-scrollbars-2": "^4.4.0",
     "react-dom": "17.0.2",
+    "react-icons": "^4.2.0",
     "react-scroll": "^1.8.3"
   },
   "devDependencies": {

src/features/CodeSandBox.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const CodeSandbox = () => {
+  return <div></div>
+}

src/features/Features.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const Features = () => {
+  return <div></div>
+}

src/features/FeaturesSection.js

@@ -0,0 +1,80 @@
+import React from "react"
+import {
+  Container,
+  SimpleGrid,
+  Stack,
+  Text,
+  Box,
+  Heading,
+  HStack,
+  Icon,
+  VStack,
+} from "@chakra-ui/react"
+
+import { CheckIcon } from "@chakra-ui/icons"
+
+const features = [
+  {
+    title: "Interoperability",
+    text: "Interoperable with Dask, GPU and sparse arrays libraries such as Dask, CuPy, and sparse.",
+  },
+  {
+    title: "Apply operations over named dimensions",
+    text: "x.sum(['latitude', 'time'])",
+  },
+  {
+    title: "Select values by label instead of integer location",
+    text: "x.sel(time='2020-01-04')",
+  },
+  {
+    title: "Vectorized operations",
+    text: "Mathematical operations (e.g., `x - y`) vectorize across multiple dimensions (array broadcasting) based on dimension names, not shape.",
+  },
+  {
+    title: "GroupBy operations",
+    text: " Flexible split-apply-combine operations with groupby: x.groupby('time.dayofyear').mean()",
+  },
+  {
+    title: "Database like operations",
+    text: "Database like alignment based on coordinate labels that smoothly handles missing values: x, y = xr.align(x, y, join='outer').",
+  },
+  {
+    title: "Arbitrary metadata tracking",
+    text: "Keep track of arbitrary metadata in the form of a Python dictionary: ds.attrs",
+  },
+  {
+    title: "Flexible and Extensible I/O backend API",
+    text: "",
+  },
+]
+
+export const FeaturesSection = () => {
+  return (
+    <Box p={4}>
+      <Stack spacing={4} as={Container} maxW={"3xl"} textAlign={"center"}>
+        <Heading fontSize={"3xl"}>Key Features & Capabilities</Heading>
+        <Text color={"gray.600"} fontSize={"lg"}>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+          sed diam voluptua.
+        </Text>
+      </Stack>
+
+      <Container maxW={"6xl"} mt={10}>
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10}>
+          {features.map((feature, index) => (
+            <HStack key={index} align={"top"}>
+              <Box color={"green.400"} px={2}>
+                <Icon as={CheckIcon} />
+              </Box>
+              <VStack align={"start"}>
+                <Text fontWeight={600}>{feature.title}</Text>
+                <Text color={"gray.600"}>{feature.text}</Text>
+              </VStack>
+            </HStack>
+          ))}
+        </SimpleGrid>
+      </Container>
+    </Box>
+  )
+}

src/features/index.js

@@ -0,0 +1 @@
+export { FeaturesSection } from "./FeaturesSection"

src/herobanner/HeroBanner.js renamed to src/herobanner/HeroBannerSection.js

@@ -11,7 +11,7 @@ import {
   Box,
   Link,
 } from "@chakra-ui/react"
-export const HeroBanner = () => {
+export const HeroBannerSection = () => {
   return (
     <Container maxW={"7xl"}>
       <Stack
@@ -46,10 +46,17 @@ export const HeroBanner = () => {
               N-D labeled arrays and datasets in Python
             </Text>
           </Heading>
-          <Text color={"gray.500"}>
-            Xarray introduces labels in the form of dimensions, coordinates, and
-            attributes on top of raw NumPy-like arrays, which allows for more
-            intuitive, more concise, and less error-prone user experience.
+          <Text color={"gray.600"} fontSize={"lg"}>
+            <strong>xarray</strong> (formerly <strong>xray</strong>) is an open
+            source project and Python package that introduces labels in the form
+            of dimensions, coordinates, and attributes on top of raw NumPy-like
+            arrays, which allows for more intuitive, more concise, and less
+            error-prone user experience.
+            <br />
+            <br />
+            xarray includes a large and growing library of domain-agnostic
+            functions for advanced analytics and visualization with these data
+            structures.
           </Text>
           <Stack
             spacing={{ base: 4, sm: 6 }}

src/herobanner/index.js

@@ -1 +1 @@
-export { HeroBanner } from "./HeroBanner"
+export { HeroBannerSection } from "./HeroBannerSection"

src/pages/index.js

@@ -1,7 +1,8 @@
 import Head from "next/head"
 import { Container, Stack } from "@chakra-ui/react"
 import { NavBar } from "navbar"
-import { HeroBanner } from "herobanner"
+import { HeroBannerSection } from "herobanner"
+import { FeaturesSection } from "features"
 
 export default function IndexPage() {
   return (
@@ -11,7 +12,8 @@ export default function IndexPage() {
       </Head>
       <Container maxW={"full"}>
         <NavBar />
-        <HeroBanner />
+        <HeroBannerSection />
+        <FeaturesSection />
       </Container>
     </>
   )

yarn.lock

@@ -3424,6 +3424,11 @@ [email protected]:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"