diff --git a/README.md b/README.md
index bab96f9..3813c7e 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,10 @@
- `npm run deploy`
+## Email forwarding
+
+https://formsubmit.co/
+
## Roadmap
- Add Projects
diff --git a/content/assets/discoball.mp4 b/content/assets/discoball.mp4
new file mode 100644
index 0000000..a9b42d5
Binary files /dev/null and b/content/assets/discoball.mp4 differ
diff --git a/new-blog.sh b/new-blog.sh
deleted file mode 100644
index e144ead..0000000
--- a/new-blog.sh
+++ /dev/null
@@ -1,30 +0,0 @@
-#!/bin/bash
-# Create new Blog dir and template Markdown
-
-# first var is date
-echo $1
-
-# second var is title
-echo $2
-
-IFS='-' read -r -a array <<< $1
-
-
-if [ -d "./content/blog/${array[0]}" ]; then
- echo 'creating dir'
- mkdir -p "./content/blog/${array[0]}/$1-$2" && cd "$_"
- touch index.md
- {
- echo '---'
- echo "title: $2"
- echo "date: '$1'"
- echo 'description: ""'
- echo 'published: true'
- echo '---'
- echo ''
- echo "## $2"
- } >> index.md
-else
- # mkdir
- echo 'dfssdfds'
-fi
diff --git a/package-lock.json b/package-lock.json
index c1304e2..01ae1bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18608,6 +18608,11 @@
}
}
},
+ "react-hook-form": {
+ "version": "7.17.0",
+ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.17.0.tgz",
+ "integrity": "sha512-hA6cbLxycyTRVL585jofNesc1sPtxn2GB1/KCV0P8lnmwzPmqhMxqbuX5TtTdTcBItf3grawfllkg1cv1iDMtQ=="
+ },
"react-hot-loader": {
"version": "4.13.0",
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -18645,6 +18650,14 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-particles-js": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.5.3.tgz",
+ "integrity": "sha512-e9GWBT51WDtPkcaSy0ZLUAT93lBzDvuqrfW81NOf6G69XSurgCtVy4+ZYpUCnLhZgkokzsjrhtVOSj1FxPVyEw==",
+ "requires": {
+ "lodash": "^4.17.11"
+ }
+ },
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/package.json b/package.json
index 7e114bd..96c4b1d 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,9 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
+ "react-hook-form": "^7.17.0",
"react-icons": "^4.2.0",
+ "react-particles-js": "^3.5.3",
"react-typography": "^0.16.19",
"styled-components": "^4.2.0",
"ts-node": "^8.1.0",
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..c1099aa
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,12 @@
+import { Box, Text } from "@chakra-ui/react"
+import * as React from "react"
+
+const About = () => {
+ return (
+
+ About us
+
+ )
+}
+
+export default About
diff --git a/src/components/Brands/BrandLogos.tsx b/src/components/Brands/BrandLogos.tsx
new file mode 100644
index 0000000..d27ad82
--- /dev/null
+++ b/src/components/Brands/BrandLogos.tsx
@@ -0,0 +1,84 @@
+import { chakra, HTMLChakraProps } from "@chakra-ui/react"
+import * as React from "react"
+
+export const Finnik = (props: HTMLChakraProps<"svg">) => (
+
+
+
+)
+
+export const WorkScout = (props: HTMLChakraProps<"svg">) => (
+
+
+
+
+)
+
+export const ChatMonkey = (props: HTMLChakraProps<"svg">) => (
+
+
+
+
+)
+
+export const Plumtic = (props: HTMLChakraProps<"svg">) => (
+
+
+
+
+
+)
+
+export const Lighthouse = (props: HTMLChakraProps<"svg">) => (
+
+
+
+
+)
+
+export const Wakanda = (props: HTMLChakraProps<"svg">) => (
+
+
+
+
+)
diff --git a/src/components/Brands/index.tsx b/src/components/Brands/index.tsx
new file mode 100644
index 0000000..6177b28
--- /dev/null
+++ b/src/components/Brands/index.tsx
@@ -0,0 +1,82 @@
+import {
+ Box,
+ Center,
+ Heading,
+ SimpleGrid,
+ useColorModeValue as mode,
+} from "@chakra-ui/react"
+import * as React from "react"
+import * as Logo from "./BrandLogos"
+
+const Brands = () => {
+ return (
+
+
+
+ Our Clients
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Brands
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 0000000..788ba38
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,150 @@
+import * as React from "react"
+import {
+ Box,
+ Button,
+ Container,
+ FormControl,
+ FormLabel,
+ Heading,
+ Input,
+ Flex,
+ Stack,
+ Switch,
+ Text,
+ Textarea,
+ Center,
+} from "@chakra-ui/react"
+import { useForm } from "react-hook-form"
+
+const SubmittedForm = () => (
+
+ completed!
+
+)
+
+const Contact = () => {
+ const [isLoading, setIsLoading] = React.useState(false)
+ const [isFormCompleted, setIsFormCompleted] = React.useState(false)
+ const { register, handleSubmit } = useForm()
+ const onSubmit = async (values: any) => {
+ try {
+ console.log(values)
+ setIsLoading(true)
+ const requestOptions = {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(values),
+ }
+ await fetch(
+ "https://formsubmit.co/bcb664b54388c8ea18272061a94e6ff9",
+ requestOptions
+ )
+ .then(response => {
+ console.log(response)
+ if (response.status === 200) {
+ setIsFormCompleted(true)
+ }
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ } catch (error) {
+ console.log(error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+ return (
+
+
+
+
+ dsfsfds
+
+
+ {!isFormCompleted ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
+export default Contact
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..206cdef
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,151 @@
+import * as React from "react"
+import {
+ Box,
+ chakra,
+ Container,
+ Link,
+ SimpleGrid,
+ Stack,
+ Text,
+ VisuallyHidden,
+ Input,
+ IconButton,
+ useColorModeValue,
+} from "@chakra-ui/react"
+import { ReactNode } from "react"
+import { FaInstagram, FaTwitter, FaYoutube } from "react-icons/fa"
+import { BiMailSend } from "react-icons/bi"
+
+const Logo = (props: any) => {
+ return (
+
+ )
+}
+
+const SocialButton = ({
+ children,
+ label,
+ href,
+}: {
+ children: ReactNode
+ label: string
+ href: string
+}) => {
+ return (
+
+ {label}
+ {children}
+
+ )
+}
+
+const ListHeader = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default function LargeWithNewsletter() {
+ return (
+
+
+
+
+
+
+
+
+ © 2020 Chakra Templates. All rights reserved
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Company
+ About us
+ Blog
+ Contact us
+ Pricing
+ Testimonials
+
+
+ Support
+ Help Center
+ Terms of Service
+ Legal
+ Privacy Policy
+ Satus
+
+
+ Stay up to date
+
+
+ }
+ />
+
+
+
+
+
+ )
+}
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
new file mode 100644
index 0000000..5cd00a9
--- /dev/null
+++ b/src/components/Nav/index.tsx
@@ -0,0 +1,297 @@
+import {
+ Box,
+ Flex,
+ Text,
+ IconButton,
+ Button,
+ Stack,
+ Collapse,
+ Icon,
+ Link,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ useColorModeValue,
+ useBreakpointValue,
+ useDisclosure,
+} from "@chakra-ui/react"
+import {
+ HamburgerIcon,
+ CloseIcon,
+ ChevronDownIcon,
+ ChevronRightIcon,
+} from "@chakra-ui/icons"
+import * as React from "react"
+import { Link as GatsbyLink } from "gatsby"
+import { FaInstagram } from "react-icons/fa"
+
+export default function WithSubnavigation() {
+ const { isOpen, onToggle } = useDisclosure()
+
+ return (
+
+
+
+ :
+ }
+ variant={"ghost"}
+ aria-label={"Toggle Navigation"}
+ />
+
+
+
+ DuckDuckDigital
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const DesktopNav = () => {
+ const linkColor = useColorModeValue("gray.600", "gray.200")
+ const linkHoverColor = useColorModeValue("gray.800", "white")
+ const popoverContentBgColor = useColorModeValue("white", "gray.800")
+
+ return (
+
+ {NAV_ITEMS.map(navItem => (
+
+ {/*
+
+
+ {navItem.label}
+
+
+
+ {navItem.children && (
+
+
+ {navItem.children.map(child => (
+
+ ))}
+
+
+ )}
+ */}
+
+ ))}
+
+ )
+}
+
+const DesktopSubNav = ({ label, href, subLabel }: NavItem) => {
+ return (
+
+
+
+
+ {label}
+
+ {subLabel}
+
+
+
+
+
+
+ )
+}
+
+const MobileNav = () => {
+ return (
+
+ {NAV_ITEMS.map(navItem => (
+
+ ))}
+
+ )
+}
+
+const MobileNavItem = ({ label, children, href }: NavItem) => {
+ const { isOpen, onToggle } = useDisclosure()
+
+ return (
+
+
+
+ {label}
+
+ {children && (
+
+ )}
+
+
+
+
+ {children &&
+ children.map(child => (
+
+ {child.label}
+
+ ))}
+
+
+
+ )
+}
+
+interface NavItem {
+ label: string
+ subLabel?: string
+ children?: Array
+ href?: string
+}
+
+const NAV_ITEMS: Array = [
+ {
+ label: "Services",
+ children: [
+ {
+ label: "Explore Design Work",
+ subLabel: "Trending Design to inspire you",
+ href: "#",
+ },
+ {
+ label: "New & Noteworthy",
+ subLabel: "Up-and-coming Designers",
+ href: "#",
+ },
+ ],
+ },
+ {
+ label: "Our Work",
+ children: [
+ {
+ label: "Job Board",
+ subLabel: "Find your dream design job",
+ href: "#",
+ },
+ {
+ label: "Freelance Projects",
+ subLabel: "An exclusive list for contract work",
+ href: "#",
+ },
+ ],
+ },
+ {
+ label: "About",
+ href: "#",
+ },
+]
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
new file mode 100644
index 0000000..163b23a
--- /dev/null
+++ b/src/components/Services.tsx
@@ -0,0 +1,101 @@
+import {
+ Box,
+ Button,
+ Center,
+ Divider,
+ Heading,
+ Img,
+ SimpleGrid,
+ Stack,
+ Text,
+ useColorModeValue as mode,
+} from "@chakra-ui/react"
+import * as React from "react"
+import {
+ FaArrowRight,
+ FaFileSignature,
+ FaHandsHelping,
+ FaHeadset,
+} from "react-icons/fa"
+
+interface FeatureProps {
+ icon: React.ReactElement
+ title: string
+ children: React.ReactNode
+}
+
+const Service = (props: FeatureProps) => {
+ const { title, children, icon } = props
+ return (
+
+
+ {icon}
+
+
+
+ {title}
+
+
+ {children}
+
+
+
+ )
+}
+
+const Services = () => {
+ return (
+
+
+
+ }>
+ The best instantaneous video creation and social sharing software
+ out there. Mind-blowing videos can be shared almost instantly.
+ Making your event the highlight of the year
+
+ }>
+ Create amazing experiences that can be instantly shared with a 360
+ degree video booth. Paired with customized software and social
+ sharing, leaves your users in a state of awe.
+
+ }
+ >
+ Enable consumer registration systems capable of integrating with
+ experiential activations event-wide. QR creates a uniform platform
+ for consumers to receive and share digital content quickly and
+ easily.
+
+ }>
+ Have a vision for your event? Let DuckDuckDigital bring it to life!
+ We can handle all of your print, welding, temporary wall, or any of
+ your other event fabrication needs.
+
+ }>
+ Have a completely virtual event? Don't have the production
+ experience to really wow your virtual users? Look no further.
+
+ }
+ >
+ Let us work with your team to custom design a virtual reality
+ experience for your attendees. Provide guests with 3rd person video
+ for social of their experience by filming them against a green
+ screen.
+
+
+
+
+ )
+}
+
+export default Services
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
deleted file mode 100644
index 3eb21ab..0000000
--- a/src/components/footer.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Link } from "gatsby"
-// tslint:disable-next-line:no-submodule-imports
-import AniLink from "gatsby-plugin-transition-link/AniLink"
-import * as React from "react"
-import { ComponentProps } from "react"
-import {
- Box,
- Stack,
- Text,
- TextProps,
- ButtonGroup,
- ButtonGroupProps,
- IconButton,
-} from "@chakra-ui/react"
-import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa"
-import { Newsletter } from "./newsletter"
-
-const Copyright = (props: TextProps) => (
-
- © {new Date().getFullYear()} Scractched together.
-
-)
-
-const SocialMediaLinks = (props: ButtonGroupProps) => (
-
- }
- />
- }
- />
- }
- />
-
-)
-
-export const Footer = () => {
- return (
-
-
-
- {/* */}
-
-
-
-
-
-
- )
-}
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 982298d..86144b3 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -1,12 +1,65 @@
-import { Box, Flex, Text } from "@chakra-ui/react"
-import React from "react"
+import * as React from "react"
+import {
+ Stack,
+ Flex,
+ Button,
+ Text,
+ VStack,
+ useBreakpointValue,
+ Heading,
+} from "@chakra-ui/react"
-export const Hero = () => {
+const Hero = () => {
return (
-
-
- hello
-
+
+
+
+
+ innovative digital experiential marketing agency
+
+
+ We provide unique experiences that leave strong impressions
+
+ {/*
+
+
+ */}
+
+
)
}
+export default Hero
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 2614fd7..4b6515c 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,9 +1,8 @@
import { PageRendererProps } from "gatsby"
import React, { ReactNode } from "react"
-import { FadeLink } from "./link"
-import { Footer } from "./footer"
-import { Nav } from "./nav"
-import { Heading, Stack, Container, Link } from "@chakra-ui/react"
+import Footer from "./Footer"
+import Nav from "./Nav"
+import { Box } from "@chakra-ui/react"
interface Props extends PageRendererProps {
title: string
@@ -14,21 +13,10 @@ export const Layout = (props: Props) => {
const { location, title, children } = props
return (
-
-
- {location.pathname === "/" ? (
-
-
- {title}
-
-
- ) : (
- {title}
- )}
-
-
+
+
{children}
-
+
)
}
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
new file mode 100644
index 0000000..b683ba6
--- /dev/null
+++ b/src/components/logo.tsx
@@ -0,0 +1,21 @@
+import { chakra, HTMLChakraProps, useToken } from "@chakra-ui/react"
+import * as React from "react"
+
+export const Logo = (
+ props: HTMLChakraProps<"svg"> & { iconColor?: string }
+) => {
+ const { iconColor = "currentColor", ...rest } = props
+ const color = useToken("colors", iconColor)
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
deleted file mode 100644
index 4606a36..0000000
--- a/src/components/nav.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react"
-import {
- List,
- ListItem,
- ListIcon,
- OrderedList,
- UnorderedList,
- Stack,
- Link,
-} from "@chakra-ui/react"
-import { Link as GatsbyLink } from "gatsby"
-
-export const Nav = () => {
- return (
-
-
-
-
- Home
-
-
-
-
- Projects
-
-
-
-
- Books
-
-
- Blog
-
-
- )
-}
diff --git a/src/components/newsletter.tsx b/src/components/newsletter.tsx
index 8fb57c0..a7d658b 100644
--- a/src/components/newsletter.tsx
+++ b/src/components/newsletter.tsx
@@ -20,7 +20,7 @@ export const Newsletter = () => {
Email address
-