diff --git a/api/index.ts b/api/index.ts index d23a9ebf..aaa5e0ce 100644 --- a/api/index.ts +++ b/api/index.ts @@ -1,5 +1,5 @@ import { GraphQLClient } from 'graphql-request' - +import axios from 'axios' const API_URL = process.env.NEXT_PUBLIC_AWS_API_URL as string | null | undefined if (!API_URL) @@ -14,3 +14,18 @@ export const graphqlClient = new GraphQLClient(`${API_URL}/graphql`, { : '', }), }) + +export const getGithubStars = async () => { + try { + const { data } = await axios.get( + 'https://api.github.com/repos/piyushgarg-dev/review-app' + ) + return data.stargazers_count + } catch (error) { + // console.error('Error fetching GitHub stars:', error) + if (error instanceof Error) { + return new Response(error.message, { status: 500 }) + } + return new Response('Internal Server Error', { status: 500 }) + } +} diff --git a/components/ui/footer.tsx b/components/ui/footer.tsx new file mode 100644 index 00000000..6d00d2d1 --- /dev/null +++ b/components/ui/footer.tsx @@ -0,0 +1,22 @@ +import Link from 'next/link' + +export default function Footer() { + const d = new Date() + let year = d.getFullYear() + return ( + + ) +} diff --git a/components/ui/main.tsx b/components/ui/main.tsx new file mode 100644 index 00000000..5ab41896 --- /dev/null +++ b/components/ui/main.tsx @@ -0,0 +1,197 @@ +import Image from 'next/image' +import custom from '../../public/images/custom.png' +import { CheckIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons' +import Link from 'next/link' +import { Button } from './button' + +export default function Main() { + return ( +
+
+

+ Getting your{' '} + + customer reviews + {' '} + in a click. +

+

+ Setting up a Review system can be quite tedious. Review App provides a +
+ seamless and hassle free way to acquire feedback on your products. +

+
+ + + + + + +
+
+
+ Form customisation Page - Review App +
+

+ Quick and Reliable +

+

+ +
+
+ {/*

+ Lorem ipsum dolor sit amet +

*/} +
+
+ Completely Customisible +
+
+ Review App allows customers to have full control of the review + form. +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas + tincidunt a libero in finibus. +

+
+ +
+
+ +

+ Create and Customise the form in under 1 min +

+
+
+ +

+ Options to collect their Email and Name +

+
+
+ +

+ Options to upload their Photo +

+
+
+
+ {/*

+ Lorem ipsum dolor sit amet +

*/} +
+
+ Lorem ipsum +
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing. +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Recusandae, dolores? +

+
+ +
+
+ +

+ Lorem ipsum dolor sit amet +

+
+
+ +

+ Lorem ipsum dolor sit amet, elit. +

+
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

+
+
+
+
+
+

+ Lorem ipsum dolor sit amet +

+

+ Fusce pharetra ligula mauris, quis faucibus lectus elementum vel. + Nullam vehicula, libero at euismod tristique, neque ligula faucibus + urna, quis ultricies massa enim in nunc. Vivamus ultricies, quam ut + rutrum blandit, turpis massa ornare velit, in sodales tellus ex nec + odio. +

+
+
+

+ Lorem ipsum dolor sit amet +

+

+ Fusce pharetra ligula mauris, quis faucibus lectus elementum vel. + Nullam vehicula, libero at euismod tristique, neque ligula faucibus + urna, quis ultricies massa enim in nunc. Vivamus ultricies, quam ut + rutrum blandit, turpis massa ornare velit, in sodales tellus ex nec + odio. +

+
+
+
+
+
+

+ Subscribe to our newsletter +

+

+ Enter your email address and get our newsletters straight away. +

+
+ {' '} + +
+
+
+
+
+ ) +} diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx new file mode 100644 index 00000000..66454476 --- /dev/null +++ b/components/ui/navbar.tsx @@ -0,0 +1,174 @@ +import React, { useEffect } from 'react' +import { Cross1Icon, HamburgerMenuIcon, StarIcon } from '@radix-ui/react-icons' +import { getGithubStars } from '@/api' +import { Button } from './button' +import Link from 'next/link' + +export default function Navbar() { + const ref = React.useRef('') + + const [isNavbarOpen, setIsNavbarOpen] = React.useState(false) + const [flyer, setFlyer] = React.useState(false) + const [flyerTwo, setFlyerTwo] = React.useState(false) + const [githubStars, setGithubStars] = React.useState('50+') + + const fetchGithubStars = async () => { + const stars = await getGithubStars() + setGithubStars(stars) + } + useEffect(() => { + fetchGithubStars() + }, []) + + return ( +
+
+
+ + Review App + + + {/* Menu Button for Mobile devices */} + +
+ + {/* Navbar md+ devices */} +
+ + Docs + + + Templates + + + About Us + + + Contact Us + +
+
+
+ + + Star on Github{' '} + + {' '} + {githubStars} + + +
+ + + +
+ + {/* SideMenu/Navbar for Mobile devices */} + {isNavbarOpen && ( +
(ref.current = node)} + className="overscroll-hidden absolute right-0 top-0 flex h-screen w-full flex-col items-end bg-black lg:hidden" + > +
+ + Review App + + + +
+
+
+ + + + + + +
+ + Docs + + + Templates + + + About Us + + + Contact Us + +
+ +
+ + + Star on Github{' '} + + {' '} + {githubStars} + + +
+
+ )} +
+
+ ) +} diff --git a/pages/index.tsx b/pages/index.tsx index 334c56de..73ec66bf 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,32 +5,32 @@ import { useEffect } from 'react' import { Button } from '@/components/ui/button' import { useCurrentUser } from '@/hooks/query/user' +import Navbar from '@/components/ui/navbar' +import Main from '@/components/ui/main' +import Footer from '@/components/ui/footer' const HomePage: NextPage = () => { const { user } = useCurrentUser() const router = useRouter() - useEffect(() => { - if (!user) { - router.replace('/signin') - } - }, [router, user]) + // useEffect(() => { + // if (!user) { + // router.replace('/signin') + // } + // }, [router, user]) return (
Review App + -
-
-

- Hello {user?.firstName} {user?.lastName} 👋🏻 -

- -
-
+ +
+
) } diff --git a/public/images/custom.png b/public/images/custom.png new file mode 100644 index 00000000..2debd534 Binary files /dev/null and b/public/images/custom.png differ diff --git a/tailwind.config.ts b/tailwind.config.ts index 9507af71..c61671c9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -65,10 +65,20 @@ module.exports = { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: 0 }, }, + 'trans-right': { + '0%': { opacity: '0', transform: 'translateX(-70px) scale(0.9)' }, + '100%': { opacity: '1', transform: 'translateX(0px) scale(1)' }, + }, + 'trans-up': { + '0%': { opacity: '0', transform: 'translateY(-50px) scale(0.9)' }, + '100%': { opacity: '1', transform: 'translateY(0px) scale(1)' }, + }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', + 'trans-right': 'trans-right 0.8s', + 'trans-up': 'trans-up 0.8s', }, }, },