omnixent · TheJoin95 · May 4, 2021 · May 4, 2021 · May 5, 2021 · May 5, 2021
diff --git a/components/molecules/TargetBubble/index.js b/components/molecules/TargetBubble/index.js
@@ -3,8 +3,8 @@ import { Box, Flex, Text } from '@chakra-ui/layout';
 
 export default function TargetBubble({ target, description, icon }) {
   return (
-    <Flex borderRadius={35} backgroundColor="gray.200" w={500} p={5}>
-      <Box mr={5}>
+    <Flex direction={["column", "row"]} borderRadius={35} backgroundColor="gray.200" w={["100%", 200, 350, 480, 500]} p={5}>
+      <Box alignSelf={["center", "auto"]} mr={5}>
         <Flex
           backgroundColor="white"
           borderRadius="full"
@@ -15,7 +15,7 @@ export default function TargetBubble({ target, description, icon }) {
           <Image src={`/featuresIcons/${icon}.svg`} w={75} h={75} />
         </Flex>
       </Box>
-      <Box>
+      <Box textAlign={["center", "left"]}>
         <Text color="gray.700" fontWeight="bold" mb={2}>
           {' '}
           {target}{' '}

diff --git a/components/organisms/HomepageHero/index.js b/components/organisms/HomepageHero/index.js
@@ -10,17 +10,17 @@ export default function HomepageHero() {
         background="linear-gradient(111.52deg, rgba(255, 189, 128, 0.182) 4.65%, rgba(255, 128, 136, 0.4628) 97.16%)"
         borderRadius="0px 72px 72px 0px"
         boxShadow="xl"
-        h={600}
-        width={['70vw']}
+        h={[380, 600]}
+        width={["95vw", "85vw", "70vw"]}
         position="absolute"
         left={0}
         zIndex={-1}
       />
 
-      <Box zIndex={1} w={1400} m="auto" pt={120}>
+      <Box zIndex={1} w={[480, 768, "100%", "100%", 1400]} m="auto" pt={[10, 30, 50, 50, 120]} px={[5]}>
         <Flex justifyContent="space-between">
-          <Box>
-            <Heading color="purple.900" size="3xl" lineHeight="short">
+          <Box w={["85vw", "75vw", "70vw"]}>
+            <Heading color="purple.900" fontSize={["2xl", "3xl", "5xl", "6xl"]} lineHeight="short">
               Discover what people <br />
               search on the web.
             </Heading>
@@ -35,7 +35,7 @@ export default function HomepageHero() {
               <Button>Learn more</Button>
             </Box>
           </Box>
-          <Box mt={-150}>
+          <Box w="100%" alignSelf={["center", "center", "center", "flex-end", "flex-start"]} display={["none", "block"]} mt={-150}>
             <Image
               src="/illustrations/rocket.png"
               layout="intrinsic"

diff --git a/components/organisms/HomepageIntegration/index.js b/components/organisms/HomepageIntegration/index.js
@@ -4,40 +4,40 @@ import FeatureBubble from '../../molecules/FeatureBubble';
 
 export default function HomepageIntegration() {
   return (
-    <Box minH={1000} zIndex={-1}>
+    <Box minH={[1600, 1000]} zIndex={-1}>
       <Box w={1400} maxW={'90vw'} m="auto">
         <FeatureBubble
           name="REST API"
           description="Request any resource 🌎"
           image="/icons/processing.svg"
-          styles={{ mt: 125, animationDelay: '1s' }}
+          styles={{ mt: {base: 1000, md: 450, lg: 450, xl: 125}, animationDelay: '1s' }}
         />
         <FeatureBubble
           name="WordPress Plugin"
           description="No code required 🙌"
           image="/icons/wordpress.svg"
-          styles={{ mt: 450, left: 200, animationDelay: '3s' }}
+          styles={{ mt: {base: 1150, md: 650, lg: 650, xl: 450}, left: {base: 20, md: 50, lg: 150, xl: 200}, animationDelay: '3s' }}
         />
         <FeatureBubble
           name="GraphQL"
           description="Unleash the full power 🚀"
           image="/icons/graphql.svg"
-          styles={{ mt: 250, right: 25, animationDelay: '2s' }}
+          styles={{ mt: {base: 1300, md: 450, lg: 450, xl: 250}, right: {base: 75, md: 25}, animationDelay: '2s' }}
         />
         <FeatureBubble
           name="Webhooks"
           description="Get notified in real-time ⚡️"
           image="/icons/webhooks.svg"
-          styles={{ mt: 550, right: 155, animationDelay: '0.5s' }}
+          styles={{ mt: {base: 1450, md: 650, lg: 650, xl: 550}, right: {base: 5, md: 50, lg: 150, xl: 155}, animationDelay: '0.5s' }}
         />
       </Box>
       <Box
         bgColor="gray.900"
         zIndex={0}
         position="absolute"
         width="100%"
-        minH={1000}
-        h={1000}
+        minH={[1600, 1000]}
+        h={[1600, 1000]}
         bg="linear-gradient(0deg, rgba(74, 85, 104, 0.24) 0%, rgba(0, 0, 0, 0) 2.66%), linear-gradient(0deg, rgba(247, 37, 133, 0.24) 0%, rgba(0, 0, 0, 0.24) 64.83%, rgba(0, 0, 0, 0.56) 100%), linear-gradient(0deg, rgba(140, 115, 238, 0.3), rgba(140, 115, 238, 0.3)),url(/_next/image?url=%2Fimgs%2Fstar-sky.jpg&w=1920&h=1000&q=75&fit=crop)">
         <Box
           justifyContent="center"

diff --git a/components/organisms/HomepageOSS/index.js b/components/organisms/HomepageOSS/index.js
@@ -4,17 +4,19 @@ import { Button } from '@chakra-ui/button';
 
 export default function HomepageOSS() {
   return (
-    <Box backgroundColor="gray.500" pt={100}>
+    <Box backgroundColor="gray.500" pt={[50, 100]}>
       <Flex w={1400} maxW="90vw" margin="auto">
-        <Image
-          src="/illustrations/climber.png"
-          width="600"
-          height="800"
-          layout="intrinsic"
-          q={95}
-        />
+        <Box display={["none", "block"]}>
+          <Image
+            src="/illustrations/climber.png"
+            width="600"
+            height="800"
+            layout="intrinsic"
+            q={95}
+          />
+        </Box>
         <Flex pt={0} ml={25} flexDir="column" justifyContent="center">
-          <Text fontSize="5xl" fontWeight="bold" color="gray.200">
+          <Text fontSize="5xl" fontWeight="bold" color="gray.200" lineHeight="1" pb="5">
             {' '}
             Omnixent is open-source{' '}
           </Text>
@@ -27,6 +29,7 @@ export default function HomepageOSS() {
           <Box>
             <Button
               mt={5}
+              mb={10}
               colorScheme="blackAlpha"
               as="a"
               href="https://github.com/omnixent/omnixent"

diff --git a/components/organisms/HomepageTargetHero/index.js b/components/organisms/HomepageTargetHero/index.js
@@ -39,7 +39,7 @@ export default function HomepageTargetHero() {
         Connect with your audience, by answering their questions.
       </Text>
       <Flex width={1400} maxW="90vw" justifyContent="center" alignItems="center" margin="auto">
-        <Grid gridTemplateColumns="repeat(2, 1fr)" gap={5} mt={150} mb={150}>
+        <Grid gridTemplateColumns={["none", "repeat(2, 1fr)"]} gap={5} mt={[20, 150]} mb={[10, 150]}>
           {targets.map((target) => (
             <TargetBubble
               key={target.title}

diff --git a/components/organisms/Navbar/index.js b/components/organisms/Navbar/index.js
@@ -1,5 +1,6 @@
 import Link from 'next/link';
-import { Box, Button, Flex, Image } from '@chakra-ui/react';
+import { Box, Button, Collapse, Flex, IconButton, Image, Stack, useDisclosure } from '@chakra-ui/react';
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
 
 const navbarLinks = [
   {
@@ -26,27 +27,59 @@ const navbarLinks = [
 ];
 
 export default function Navbar() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   return (
-    <Flex p={5} w={1400} maxW="90vw" margin="auto" justifyContent="space-between" mt={5}>
-      <Image src="/logo/omx-logo-extended.svg" width={250} />
-      <Flex alignSelf="center">
-        {navbarLinks.map((link) => (
-          <Link key={link.href} href={link.href} passHref>
-            <Box as="a" ml={5}>
-              {link.label}
-            </Box>
-          </Link>
-        ))}
-        <Button
-          size="xs"
-          variant="outline"
-          colorScheme="blue"
-          ml={5}
-          as="a"
-          href="https://cloud.omnixent.com">
-          Sign in
-        </Button>
+    <>
+      <Flex p={5} w={1400} maxW={{base: "100vw", lg: "90vw"}} margin="auto" justifyContent="space-between" mt={5}>
+        <Image src="/logo/omx-logo-extended.svg" width={250} />
+        <IconButton
+          size={'md'}
+          icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+          aria-label={'Open Menu'}
+          display={{ md: !isOpen ? 'none' : 'inherit' }}
+          onClick={isOpen ? onClose : onOpen}
+        />
+        <Flex display={["none", "block"]} alignSelf="center">
+          {navbarLinks.map((link) => (
+            <Link key={link.href} href={link.href} passHref>
+              <Box as="a" ml={5}>
+                {link.label}
+              </Box>
+            </Link>
+          ))}
+          <Button
+            size="xs"
+            variant="outline"
+            colorScheme="blue"
+            ml={5}
+            as="a"
+            href="https://cloud.omnixent.com">
+            Sign in
+          </Button>
+        </Flex>
       </Flex>
-    </Flex>
+      <Collapse in={isOpen} animateOpacity>
+        <Stack
+          borderTop={1}
+          borderStyle={'solid'}
+          borderColor={'gray.100'}
+          textAlign="center">
+          {navbarLinks.map((link) => (
+              <Link key={link.href} href={link.href} passHref>
+                <Box
+                  borderBottom={1}
+                  borderStyle={'solid'}
+                  borderColor={'gray.100'}
+                  fontWeight={'bold'}
+                  display="block"
+                  py="1.5"
+                  as="a">
+                  {link.label}
+                </Box>
+              </Link>
+            ))}
+        </Stack>
+      </Collapse>
+    </>
   );
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,4 +1,5 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import Head from 'next/head';
 import { NextSeo } from 'next-seo';
 import Navbar from '../components/organisms/Navbar';
 import Footer from '../components/organisms/Footer';
@@ -31,6 +32,9 @@ const CommonSEO = () => (
 function MyApp({ Component, pageProps }) {
   return (
     <ChakraProvider>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
+      </Head>
       <CommonSEO />
       <Navbar />
       <Component {...pageProps} />