From 8fb705b9f0a1a832a3ce7327d7dc29e9edc48b63 Mon Sep 17 00:00:00 2001 From: James Wyndham Date: Fri, 16 Feb 2024 06:32:53 +0800 Subject: [PATCH] feature - added contact section UI --- Frontend/app/(admin)/blogs/[slug]/page.tsx | 2 +- Frontend/app/(admin)/blogs/page.tsx | 10 +- Frontend/app/(admin)/contact/page.tsx | 17 + Frontend/app/(admin)/pricing/page.tsx | 16 +- Frontend/app/page.tsx | 2 +- Frontend/components/Button.tsx | 8 +- Frontend/components/Footer.tsx | 9 +- .../components/GetStartedSectionButton.tsx | 2 +- Frontend/components/Logo.tsx | 3 +- Frontend/components/Modal.tsx | 29 ++ Frontend/components/Navigation.tsx | 6 +- Frontend/components/Utilities/PageWrapper.tsx | 2 +- Frontend/components/icon/Icon.tsx | 43 +++ Frontend/components/icon/IconContainer.tsx | 61 ++++ Frontend/components/icon/index.ts | 2 + Frontend/components/icon/types.ts | 100 ++++++ Frontend/images/icon.svg | 4 +- Frontend/package-lock.json | 134 +++++++- Frontend/package.json | 1 + Frontend/sections/AccountContent.tsx | 2 +- Frontend/sections/BlogContent.tsx | 2 +- .../FormLeftDescriptionRightContactUs.tsx | 304 ++++++++++++++++++ Frontend/sections/FeaturesZigzag.tsx | 2 +- .../CenterAllignedWithVideoHero.tsx | 0 .../{HeroSections => Hero}/SimpleHero.tsx | 0 .../SquaredBackgroundHero.tsx | 0 .../WaitingListWithImageHero.tsx | 9 +- .../sections/{HeroSections => Hero}/index.ts | 0 Frontend/sections/HeroHome.tsx | 4 +- Frontend/sections/LoadingModal.tsx | 2 +- .../ModalLearnMore/ModalLearnMore.tsx | 2 +- Frontend/sections/ModalSignIn/ModalSignIn.tsx | 2 +- Frontend/sections/ModalSignUp/ModalSignUp.tsx | 5 +- .../sections/ModalSignUp/ModalSignUpForm.tsx | 46 +-- Frontend/sections/Newsletter/Newsletter.tsx | 2 +- 35 files changed, 762 insertions(+), 71 deletions(-) create mode 100644 Frontend/app/(admin)/contact/page.tsx create mode 100644 Frontend/components/Modal.tsx create mode 100644 Frontend/components/icon/Icon.tsx create mode 100644 Frontend/components/icon/IconContainer.tsx create mode 100644 Frontend/components/icon/index.ts create mode 100644 Frontend/components/icon/types.ts create mode 100644 Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx rename Frontend/sections/{HeroSections => Hero}/CenterAllignedWithVideoHero.tsx (100%) rename Frontend/sections/{HeroSections => Hero}/SimpleHero.tsx (100%) rename Frontend/sections/{HeroSections => Hero}/SquaredBackgroundHero.tsx (100%) rename Frontend/sections/{HeroSections => Hero}/WaitingListWithImageHero.tsx (93%) rename Frontend/sections/{HeroSections => Hero}/index.ts (100%) diff --git a/Frontend/app/(admin)/blogs/[slug]/page.tsx b/Frontend/app/(admin)/blogs/[slug]/page.tsx index 359bbf5..2865841 100644 --- a/Frontend/app/(admin)/blogs/[slug]/page.tsx +++ b/Frontend/app/(admin)/blogs/[slug]/page.tsx @@ -52,7 +52,7 @@ const PostPage = (props: any) => {
- + ← Back to Blogs
diff --git a/Frontend/app/(admin)/blogs/page.tsx b/Frontend/app/(admin)/blogs/page.tsx index cbe3e64..dac99a4 100644 --- a/Frontend/app/(admin)/blogs/page.tsx +++ b/Frontend/app/(admin)/blogs/page.tsx @@ -10,7 +10,11 @@ export default function BlogsPage() { .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) .map((post) => ); return ( -
+
{/* Page sections */} {" "}

- Find case studies and information for how Sign365 is giving - businesses superpowers + Join us for the journey as we make great food. Learn and grow + together

} diff --git a/Frontend/app/(admin)/contact/page.tsx b/Frontend/app/(admin)/contact/page.tsx new file mode 100644 index 0000000..6368c50 --- /dev/null +++ b/Frontend/app/(admin)/contact/page.tsx @@ -0,0 +1,17 @@ +import Footer from "@/components/Footer"; +import Spacer from "@/components/Utilities/Spacer"; +import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs"; +import React from "react"; + +const page = () => { + return ( +
+ + +
+ +
+ ); +}; + +export default page; diff --git a/Frontend/app/(admin)/pricing/page.tsx b/Frontend/app/(admin)/pricing/page.tsx index 52dde22..e33cadf 100644 --- a/Frontend/app/(admin)/pricing/page.tsx +++ b/Frontend/app/(admin)/pricing/page.tsx @@ -29,16 +29,16 @@ export default function PricingPage() {
{" "} -

- Select a subscription plan for your team or try advanced - functionality for free. +

+ Are you ready for fresh South West produce to be delivered to your + door?

} @@ -109,7 +109,7 @@ function PriceCard({
{false && ( -

+

Popular

)} @@ -150,7 +150,7 @@ function PriceCard({ onClick={() => submitForm(isAnnual ? product.yearlyPrice : product.monthlyPrice) } - className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-pink-default to-purple-default rounded-full mb-4 cursor-pointer group-hover:animate-bounce" + className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce" > Try it! @@ -178,14 +178,14 @@ function PriceToggle({ /> Monthly Billing Yearly Billing diff --git a/Frontend/app/page.tsx b/Frontend/app/page.tsx index 077ec55..367cd97 100644 --- a/Frontend/app/page.tsx +++ b/Frontend/app/page.tsx @@ -10,7 +10,7 @@ import React from "react"; import { CenterAllignedWithVideoHero, WaitingListWithImageHero, -} from "@/sections/HeroSections"; +} from "@/sections/Hero"; import PageWrapper from "@/components/Utilities/PageWrapper"; import Footer from "@/components/Footer"; diff --git a/Frontend/components/Button.tsx b/Frontend/components/Button.tsx index c837e93..214a82f 100644 --- a/Frontend/components/Button.tsx +++ b/Frontend/components/Button.tsx @@ -9,16 +9,16 @@ export const Button = ({ status, text }: ButtonProps) => { const className = (() => { switch (status) { case ModalStatus.Loading: - return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none"; + return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none"; case ModalStatus.Success: - return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none"; + return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none"; case ModalStatus.Default: - return "btn text-purple-default bg-white hover:bg-white shadow"; + return "btn text-primary bg-white hover:bg-white shadow"; default: - return "btn text-purple-default bg-white hover:bg-white shadow"; + return "btn text-primary bg-white hover:bg-white shadow"; } })(); return ( diff --git a/Frontend/components/Footer.tsx b/Frontend/components/Footer.tsx index e9351fa..af4c2bd 100644 --- a/Frontend/components/Footer.tsx +++ b/Frontend/components/Footer.tsx @@ -1,24 +1,25 @@ +"use client"; import React from "react"; -import Logo from "./Logo"; +import Icon from "./icon"; function Footer() { return (