Added download button to hero

Author: austincondiff

components/common/layout/Column.jsx

@@ -14,6 +14,7 @@ const Column = styled.div`
     max-width: ${Number(val ?? 1)/12*100}%;
   `) : `
     flex: 1;
+    max-width: 100%;
   `}
   ${({ offset }) => getResponsivePropStyles(offset, (val) => `
     margin-left: ${Number(val ?? 1)/12*100}%;

components/pages/home/sections/HeroSection.jsx

@@ -5,6 +5,7 @@ import { Parallax } from 'react-parallax';
 import Typography from '@/components/common/Typography';
 import { Row, Column, Section, Stack } from '@/components/common/layout';
 import HeroImage from '../HeroImage';
+import Button from '../../../common/Button';
 
 const ProductIconWrap = styled.div`
   width: 128px;
@@ -19,9 +20,9 @@ const HeroSection = () => {
       renderLayer={(percentage) => {
         return (
           <Section contained gutterTop>
-            <Row align="center">
+            <Row align="center" style={{ position: 'relative', zIndex: 1 }}>
               <Column width={{ md: 12, lg: 8 }}>
-                <Stack gap={2}>
+                <Stack gap={2} align="center">
                   <ProductIconWrap>
                     <Image
                       width={128}
@@ -38,16 +39,18 @@ const HeroSection = () => {
                     entirely and unapologetically for macOS. Open-source, free
                     forever.
                   </Typography>
-                  <Typography variant="body" color="tertiary">
+                  <Typography variant="body" color="tertiary" gutterBottom>
                     Features include syntax highlighting, code completion, project
                     find and replace, snippets, terminal, task running, debugging,
                     git integration, code review, extensions, and more.
                   </Typography>
+                  <Button>Download Preview</Button>
+                  <Typography variant="body-reduced" color="tertiary">v0.0.1 | macOS 13+</Typography>
                 </Stack>
               </Column>
             </Row>
             <Row align="center">
-              <Column style={{ width: '100%'}}>
+              <Column>
                 <HeroImage percentage={percentage} />
               </Column>
             </Row>

components/pages/home/sections/IntroFeaturesSection.jsx

@@ -1,4 +1,4 @@
-import { Sliders } from 'react-feather';
+import { Feather, GitHub, Sliders, Zap } from 'react-feather';
 import Tile from '@/components/common/Tile';
 import Typography from '@/components/common/Typography';
 import { Grid, GridItem, Section, Stack } from '@/components/common/layout';
@@ -9,7 +9,7 @@ const IntroFeaturesSection = () => {
       <Grid columns={{ xs: 1, md: 2, lg: 4 }} gap>
         <GridItem as={Tile}>
           <Stack gap={2}>
-            <Sliders />
+            <Zap />
             <Typography variant="eyebrow-reduced">macOS Native</Typography>
             <Typography variant="body-reduced">
               Harness the full power of your Mac.
@@ -18,7 +18,7 @@ const IntroFeaturesSection = () => {
         </GridItem>
         <GridItem as={Tile}>
           <Stack gap={2}>
-            <Sliders />
+            <Feather />
             <Typography variant="eyebrow-reduced">
               Lightweight Yet Powerful
             </Typography>
@@ -29,7 +29,7 @@ const IntroFeaturesSection = () => {
         </GridItem>
         <GridItem as={Tile}>
           <Stack gap={2}>
-            <Sliders />
+            <GitHub />
             <Typography variant="eyebrow-reduced">
               Completely Open Source
             </Typography>