From e5dd09dde6dbcda87e0b3bbaacacd0b4c5a50d80 Mon Sep 17 00:00:00 2001 From: S-codes14 Date: Mon, 30 Aug 2021 03:14:12 +0200 Subject: [PATCH 1/7] added more components slowly moving to nextjs --- components/DarkSwitch.js | 53 ++++++ components/benefits.js | 76 +++++++++ components/container.js | 12 ++ components/cta.js | 28 ++++ components/data.js | 59 +++++++ components/faq.js | 55 +++++++ components/footer.js | 213 ++++++++++++++++++++++++ components/hero.js | 196 ++++++++++++++++++++++ components/navbar.js | 108 ++++++++++++ components/popupWidget.js | 330 +++++++++++++++++++++++++++++++++++++ components/sectionTitle.js | 29 ++++ components/testimonials.js | 90 ++++++++++ components/video.js | 40 +++++ 13 files changed, 1289 insertions(+) create mode 100644 components/DarkSwitch.js create mode 100644 components/benefits.js create mode 100644 components/container.js create mode 100644 components/cta.js create mode 100644 components/data.js create mode 100644 components/faq.js create mode 100644 components/footer.js create mode 100644 components/hero.js create mode 100644 components/navbar.js create mode 100644 components/popupWidget.js create mode 100644 components/sectionTitle.js create mode 100644 components/testimonials.js create mode 100644 components/video.js diff --git a/components/DarkSwitch.js b/components/DarkSwitch.js new file mode 100644 index 0000000..0f17c59 --- /dev/null +++ b/components/DarkSwitch.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; + +const ThemeChanger = () => { + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []); + + if (!mounted) return null; + + return ( +
+ {theme === "dark" ? ( + + ) : ( + + )} +
+ ); +}; + +export default ThemeChanger; diff --git a/components/benefits.js b/components/benefits.js new file mode 100644 index 0000000..1d91aee --- /dev/null +++ b/components/benefits.js @@ -0,0 +1,76 @@ +import Image from "next/image"; +import React from "react"; +import Container from "./container"; + +export default function Benefits(props) { + const { data } = props; + + return ( + <> + +
+
+ Benefits +
+
+ +
+
+
+

+ {data.title} +

+ +

+ {data.desc} +

+
+ +
+ {data.bullets.map((item, index) => ( + + {item.desc} + + ))} +
+
+
+ + + ); +} + +function Benefit(props) { + return ( + <> +
+
+ {React.cloneElement(props.icon, { + className: "w-7 h-7 text-indigo-50", + })} +
+
+

+ {props.title} +

+

+ {props.children} +

+
+
+ + ); +} diff --git a/components/container.js b/components/container.js new file mode 100644 index 0000000..a523567 --- /dev/null +++ b/components/container.js @@ -0,0 +1,12 @@ +import React from "react"; + +export default function Container(props) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/cta.js b/components/cta.js new file mode 100644 index 0000000..3ec43fa --- /dev/null +++ b/components/cta.js @@ -0,0 +1,28 @@ +import React from "react"; +import Container from "./container"; + +export default function Cta() { + return ( + +
+
+

+ Ready to try-out this template? +

+

+ Don't let your visitors see a poor landing. +

+
+
+ + Download for Free + +
+
+ + ); +} diff --git a/components/data.js b/components/data.js new file mode 100644 index 0000000..0ebf698 --- /dev/null +++ b/components/data.js @@ -0,0 +1,59 @@ +import { + EmojiHappyIcon, + ChartSquareBarIcon, + CursorClickIcon, + DeviceMobileIcon, + AdjustmentsIcon, + SunIcon, +} from "@heroicons/react/outline"; + +import benefitOneImg from "../public/img/benefit-one.png"; +import benefitTwoImg from "../public/img/benefit-two.png"; + +const benefitOne = { + title: "Benefits with Smaller Studios", + desc: "Some of the reasons to choose Smaller Studios", + image: benefitOneImg, + bullets: [ + { + title: "We Understand your customers", + desc: "", + icon: , + }, + { + title: "We try to Improve acquisition", + desc: "", + icon: , + }, + { + title: "We Drive customer retention", + desc: "", + icon: , + }, + ], +}; + +const benefitTwo = { + title: "some design benefits with smaller studios", + desc: "we love design it is what we do", + image: benefitTwoImg, + bullets: [ + { + title: "Mobile Responsive Design", + desc: "", + icon: , + }, + { + title: "Performance", + desc: "", + icon: , + }, + { + title: "Dark & Light Mode", + desc: "", + icon: , + }, + ], +}; + +export { benefitOne, benefitTwo }; diff --git a/components/faq.js b/components/faq.js new file mode 100644 index 0000000..73e8cfc --- /dev/null +++ b/components/faq.js @@ -0,0 +1,55 @@ +import React from "react"; +import Container from "./container"; +import { Disclosure } from "@headlessui/react"; +import { ChevronUpIcon } from "@heroicons/react/solid"; + +export default function Faq() { + return ( + +
+ {faqdata.map((item, index) => ( +
+ + {({ open }) => ( + <> + + {item.question} + + + + {item.answer} + + + )} + +
+ ))} +
+ + ); +} + +const faqdata = [ + { + question: "Is this template completely free to use?", + answer: "Yes, this template is completely free to use.", + }, + { + question: "Can I use it in a commercial project?", + answer: "Yes, this you can.", + }, + { + question: "What is your refund policy? ", + answer: + "If you're unhappy with your purchase for any reason, email us within 90 days and we'll refund you in full, no questions asked.", + }, + { + question: "Do you offer technical support? ", + answer: + "No, we don't offer technical support for free downloads. Please purchase a support plan to get 6 months of support.", + }, +]; diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..ede48ea --- /dev/null +++ b/components/footer.js @@ -0,0 +1,213 @@ +import Link from "next/link"; +import Image from "next/image"; +import React from "react"; +import Container from "./container"; + +export default function Footer() { + const navigation = [ + "Product", + "Features", + "Pricing", + "Company", + "Blog", + ]; + const legal = ["Terms", "Privacy", "Legal"]; + return ( +
+ +
+
+
+ {" "} + + + + N + + Nextly + + +
+ +
+ Nextly is a free landing page & marketing website + template for startups and indie projects. Its built with + Next.js & TailwindCSS. And its completely open-source. +
+ +
+ + Powered by Vercel + +
+
+ +
+
+ {navigation.map((item, index) => ( + + + {item} + + + ))} +
+
+
+
+ {legal.map((item, index) => ( + + + {item} + + + ))} +
+
+ +
+ +
+ Copyright © {new Date().getFullYear()}. Made with ♥ by{" "} + + Web3Templates. + {" "} + Illustrations from{" "} + + Glazestock + +
+ + {/* Do not remove this */} + +
+ ); +} + +const Twitter = ({ size = 24 }) => ( + + + +); + +const Facebook = ({ size = 24 }) => ( + + + +); +const Instagram = ({ size = 24 }) => ( + + + +); + +const Linkedin = ({ size = 24 }) => ( + + + +); + +const Backlink = () => { + return ( + + + + + + + Web3Templates + + ); +}; diff --git a/components/hero.js b/components/hero.js new file mode 100644 index 0000000..4131e0d --- /dev/null +++ b/components/hero.js @@ -0,0 +1,196 @@ +import Image from "next/image"; +import Container from "./container"; +import logo from "../public/img/logo.png"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faReact } from '@fortawesome/fontawesome-svg-core' + +export default function Hero() { + return ( + <> + +
+
+

+ Smaller Studios +

+

+ Smaller Studios is a team of motivated entrepreneurs, engineers and artists set out to focus on how we can better serve the incredible teams that we work with - That being you. +

+ + {/* */} +
+
+
+
+ Hero Illustration +
+
+ + +
+
+ Experience with a lots of{" "} + Frameworks +
+ +
+
+ {/* */} + {/* */} +
+
+ {/* */} +
+
+ {/* */} +
+
+ {/* */} +
+
+ {/* */} +
+
+
+ + + ); +} + +// function AmazonLogo() { +// return ( +// +// +// +// +// +// +// +// +// +// +// +// +// ); +// } + +// function MicrosoftLogo() { +// return ( +// +// +// +// +// ); +// } + +// function NetflixLogo() { +// return ( +// +// +// +// +// +// ); +// } + +// function SonyLogo() { +// return ( +// +// +// +// +// +// +// +// +// ); +// } + +// function VerizonLogo() { +// return ( +// +// +// +// +// +// +// +// +// ); +// } diff --git a/components/navbar.js b/components/navbar.js new file mode 100644 index 0000000..c826858 --- /dev/null +++ b/components/navbar.js @@ -0,0 +1,108 @@ +import Link from "next/link"; +import ThemeChanger from "./DarkSwitch"; +import { Disclosure } from "@headlessui/react"; + +export default function Navbar() { + const navigation = [ + "Product", + "Features", + "Pricing", + "Company", + "Blog", + ]; + + return ( +
+ +
+ ); +} diff --git a/components/popupWidget.js b/components/popupWidget.js new file mode 100644 index 0000000..9a4cd9a --- /dev/null +++ b/components/popupWidget.js @@ -0,0 +1,330 @@ +import React, { useState } from "react"; +import { useForm, useWatch } from "react-hook-form"; +import { Disclosure, Transition } from "@headlessui/react"; + +export default function PopupWidget() { + const { + register, + handleSubmit, + reset, + control, + formState: { errors, isSubmitSuccessful, isSubmitting }, + } = useForm({ + mode: "onTouched", + }); + const [isSuccess, setIsSuccess] = useState(false); + const [Message, setMessage] = useState(""); + + const userName = useWatch({ control, name: "name", defaultValue: "Someone" }); + + const onSubmit = async (data, e) => { + console.log(data); + await fetch("https://api.web3forms.com/submit", { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify(data, null, 2), + }) + .then(async (response) => { + let json = await response.json(); + if (json.success) { + setIsSuccess(true); + setMessage(json.message); + e.target.reset(); + reset(); + } else { + setIsSuccess(false); + setMessage(json.message); + } + }) + .catch((error) => { + setIsSuccess(false); + setMessage("Client Error. Please check the console.log for more info"); + console.log(error); + }); + }; + + return ( +
+ + {({ open }) => ( + <> + + Open Contact form Widget + + + + {" "} + + + + + + + {" "} + + + + +
+

How can we help?

+

+ We usually respond in a few hours +

+
+
+ {!isSubmitSuccessful && ( +
+ + + + + +
+ + + {errors.name && ( +
+ {errors.name.message} +
+ )} +
+ +
+ + + + {errors.email && ( +
+ {errors.email.message} +
+ )} +
+ +
+ + + + {errors.message && ( +
+ {errors.message.message} +
+ )} +
+
+ +
+

+ + Powered by{" "} + + Web3Forms + + +

+
+ )} + + {isSubmitSuccessful && isSuccess && ( + <> +
+ + + +

+ Message sent successfully +

+

{Message}

+ +
+ + )} + + {isSubmitSuccessful && !isSuccess && ( +
+ + + + +

+ Oops, Something went wrong! +

+

{Message}

+ +
+ )} +
+ + + + )} + +
+ ); +} diff --git a/components/sectionTitle.js b/components/sectionTitle.js new file mode 100644 index 0000000..32a481a --- /dev/null +++ b/components/sectionTitle.js @@ -0,0 +1,29 @@ +import React from "react"; +import Container from "./container"; + +export default function SectionTitle(props) { + return ( + + {props.pretitle && ( +
+ {props.pretitle} +
+ )} + + {props.title && ( +

+ {props.title} +

+ )} + + {props.children && ( +

+ {props.children} +

+ )} + + ); +} diff --git a/components/testimonials.js b/components/testimonials.js new file mode 100644 index 0000000..996971d --- /dev/null +++ b/components/testimonials.js @@ -0,0 +1,90 @@ +import Image from "next/image"; +import React from "react"; +import Container from "./container"; + +import userOneImg from "../public/img/user1.jpg"; +import userTwoImg from "../public/img/user2.jpg"; +import userThreeImg from "../public/img/user3.jpg"; + +export default function Testimonials() { + return ( + +
+
+
+

+ Share a real testimonial + that hits some of your benefits from one of your popular customer. +

+ + +
+
+
+
+

+ Make sure you only pick the right sentence + to keep it short and simple. +

+ + +
+
+
+
+

+ This is an awesome landing page template I've seen. I + would use this for anything. +

+ + +
+
+
+ + ); +} + +function Avatar(props) { + return ( +
+
+ Avatar +
+
+
{props.name}
+
{props.title}
+
+
+ ); +} + +function Mark(props) { + return ( + <> + {" "} + + {props.children} + {" "} + + ); +} diff --git a/components/video.js b/components/video.js new file mode 100644 index 0000000..e765c81 --- /dev/null +++ b/components/video.js @@ -0,0 +1,40 @@ +import { useState } from "react"; +import Container from "./container"; + +export default function Video() { + const [playVideo, setPlayVideo] = useState(false); + return ( + +
+
setPlayVideo(!playVideo)} + className="relative bg-indigo-300 cursor-pointer aspect-w-16 aspect-h-9 bg-gradient-to-tr from-purple-400 to-indigo-700"> + {!playVideo && ( + + )} + {playVideo && ( + + )} +
+
+ + ); +} From 860c5de46005b3bbb949536527f74ba49f8589d2 Mon Sep 17 00:00:00 2001 From: S-codes14 Date: Mon, 30 Aug 2021 03:14:59 +0200 Subject: [PATCH 2/7] added more slowly moving to nextjs --- pages/_app.js | 17 +++++++++++ pages/_document.js | 51 ++++++++++++++++++++++++++++++++ pages/api/hello.js | 5 ++++ pages/index.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 146 insertions(+) create mode 100644 pages/_app.js create mode 100644 pages/_document.js create mode 100644 pages/api/hello.js create mode 100644 pages/index.js diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..e5ca7c9 --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,17 @@ +import { ThemeProvider } from "next-themes"; +import { config } from '@fortawesome/fontawesome-svg-core' +import '@fortawesome/fontawesome-svg-core/styles.css' +import "../css/tailwind.css"; + +config.autoAddCss = false + + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..4a65135 --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,51 @@ +// import Document, { Html, Head, Main, NextScript } from "next/document"; +// import { extractCritical } from "@emotion/server"; + +// export default class MyDocument extends Document { +// static async getInitialProps(ctx) { +// const initialProps = await Document.getInitialProps(ctx); +// const page = await ctx.renderPage(); +// const styles = extractCritical(page.html); +// return { ...initialProps, ...page, ...styles }; +// } + +// render() { +// return ( +// +// +//