From 4839c325a5006bd7df4aeff5923a503b810ee3e3 Mon Sep 17 00:00:00 2001 From: AmirReza Jamali Date: Sat, 15 Nov 2025 09:43:45 +0330 Subject: [PATCH] Bind cms page --- .vscode/settings.json | 1 + app/_components/ImageWithFallback.tsx | 28 ++ app/marketing/[id]/page.tsx | 451 ++++++++++++++++---------- app/marketing/layout.tsx | 130 +------- app/marketing/page.tsx | 431 +++++++++++++++--------- 5 files changed, 593 insertions(+), 448 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 app/_components/ImageWithFallback.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} diff --git a/app/_components/ImageWithFallback.tsx b/app/_components/ImageWithFallback.tsx new file mode 100644 index 0000000..121fcd3 --- /dev/null +++ b/app/_components/ImageWithFallback.tsx @@ -0,0 +1,28 @@ +"use client"; + +import Image, { ImageProps } from "next/image"; +import { useState } from "react"; + +interface ImageWithFallbackProps extends Omit { + src: string; + alt: string; + fallbackSrc?: string; +} + +export default function ImageWithFallback({ + src, + alt, + fallbackSrc = "/clipboard.svg", + ...props +}: ImageWithFallbackProps) { + const [imgSrc, setImgSrc] = useState(src); + + return ( + {alt} setImgSrc(fallbackSrc)} + /> + ); +} diff --git a/app/marketing/[id]/page.tsx b/app/marketing/[id]/page.tsx index b0c9cbd..155a1d7 100644 --- a/app/marketing/[id]/page.tsx +++ b/app/marketing/[id]/page.tsx @@ -1,8 +1,11 @@ import ApexChart from "@/app/_components/ApexChart"; +import FooterForm from "@/app/_components/FooterForm"; +import ImageWithFallback from "@/app/_components/ImageWithFallback"; import { cmsService } from "@/hooks/useCmsQueries"; import { CmsResponse } from "@/types/TCms"; import { Metadata } from "next"; import Image from "next/image"; +import Link from "next/link"; export const metadata: Metadata = { title: "Opp lens - Marketing", @@ -63,182 +66,294 @@ export default async function Home({ params }: IProps) { return ( <> -
-
-
-

- $ - {cmsData?.data.chart.missedAmount ?? 1672} -

-

- total tender amount you missed today -

-
- -
-
+
+ dynamic island - phone -
-
-
-
-

- democratizing the world of tenders -

-

- Opplens is your dedicated AI-powered partner, leveling the playing - field so you can win the public and private contracts you deserve. -
- Compete on your true strengths. -

-
-
- -
-
-
-
-

- your in-house tender department, powered by - ai -

- - Opplens is the end-to-end solution that gives you the power to - compete and win. - -
-
-
- {centerFrames.map((frame, index) => ( -
- {frame.alt} -

{frame.title}

-

{frame.description}

-
- ))} -
-
-
-

- Tired of Complex Tenders & Lost Opportunities? -

-

- The procurement market is tough for SMEs. We get it. You're facing - an uphill battle. -

-
-
    -
  • -
    - clock icon -
    -

    Resource Drain

    -

    - Lacking the time, dedicated staff, and expertise to constantly - monitor the market and prepare high-quality bids. -

    -
    • -
  • -
    - clipboard icon -
    -

    Overwhelming Complexity

    -

    - Navigating complex requirements and processes designed for large - corporations with dedicated tender departments. -

    -
    • -
  • -
    - arrow-up icon -
    -

    Low Win Rates

    -

    - Did you know 68% of SMEs in Sweden rarely or never win public - tenders? It's time to change that. -

    -
    • -
-
-
-
-

- The Opplens Advantage -

-
-
-
- people icon -
-

A True Partnership Model

-

- Lower your risk with our performance-based options. Our success - is directly tied to yours, making us a dedicated partner - invested in your growth, not just a software provider. -

+ + +
+
+
+
+

+ $ + {cmsData?.data.chart.missedAmount ?? 1672} +

+

+ total tender amount you missed today +

+
-
+
shield icon + phone -
-

Unmatched Data Security

-

- Your business data is critical. Our unique on premise AI engine - ensures your information remains 100% private and secure, unlike - cloud based services. Fully GDPR compliant by design. -

-
-
+
+
+

+ {cmsData?.data.hero.Title} +

+

+ {cmsData?.data.hero.Description} +

+
+
+ + {cmsData?.data.hero.ButtonText} + +
+
+
+
+

+ your in-house tender department, powered by + ai +

+ + Opplens is the end-to-end solution that gives you the power to + compete and win. + +
+
+
+ {centerFrames.map((frame, index) => ( +
+ {frame.alt} +

{frame.title}

+

{frame.description}

+
+ ))} +
+
+
+

+ Tired of Complex Tenders & Lost Opportunities? +

+

+ The procurement market is tough for SMEs. We get it. You're facing + an uphill battle. +

+
+
    +
  • +
    + clock icon +
    +

    Resource Drain

    +

    + Lacking the time, dedicated staff, and expertise to constantly + monitor the market and prepare high-quality bids. +

    +
    • +
  • +
    + +
    +

    Overwhelming Complexity

    +

    + Navigating complex requirements and processes designed for large + corporations with dedicated tender departments. +

    +
    • +
  • +
    + +
    +

    Low Win Rates

    +

    + Did you know 68% of SMEs in Sweden rarely or never win public + tenders? It's time to change that. +

    +
    • +
+
+
+
+

+ {cmsData?.data.advantages.Title} +

+
+
+ {cmsData?.data.advantages.Cards.map((card) => ( +
+ +
+

{card.Title}

+

{card.Description}

+
+
+ ))} +
+
+ + ); } +function ContactInfo({ + icon, + contact, + href, + ariaLabel, + contactIconSrc, +}: { + icon: string; + contact: string; + href?: string; + ariaLabel: string; + contactIconSrc?: string; +}) { + return ( +
  • + + {href ? ( + + {contact} + + ) : ( +

    + {!!contactIconSrc && ( + flag + )} + {contact} +

    + )} +
    • + ); +} diff --git a/app/marketing/layout.tsx b/app/marketing/layout.tsx index ea66ae5..4d93ff8 100644 --- a/app/marketing/layout.tsx +++ b/app/marketing/layout.tsx @@ -1,9 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; -import Image from "next/image"; -import Link from "next/link"; import { ToastContainer, Zoom } from "react-toastify"; -import FooterForm from "../_components/FooterForm"; import "../globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -24,96 +21,15 @@ export const metadata: Metadata = { }, }; -function ContactInfo({ - icon, - contact, - href, - ariaLabel, - contactIconSrc, -}: { - icon: string; - contact: string; - href?: string; - ariaLabel: string; - contactIconSrc?: string; -}) { - return ( -
  • - - {href ? ( - - {contact} - - ) : ( -

    - {!!contactIconSrc && ( - flag - )} - {contact} -

    - )} -
    • - ); -} - export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { - const contactInfo = [ - { - icon: "/Message.svg", - contact: "info@opplens.com", - href: "mailto:info@opplens.com", - ariaLabel: "Email us at info@opplens.com", - }, - { - icon: "/Phone.svg", - contact: "(+46) - 761581526", - href: "tel:+46761581526", - ariaLabel: "Call us at +46 761581526", - }, - { - icon: "/Location.svg", - contact: "Stockholm, Sweden", - ariaLabel: "Our location in Stockholm, Sweden", - contactIconSrc: "/sweden.svg", - }, - ]; - return ( -
    - - Opp lens logo - -
    - -
    {children}
    -
    -
    + {children} ); diff --git a/app/marketing/page.tsx b/app/marketing/page.tsx index 2bcb338..008bccf 100644 --- a/app/marketing/page.tsx +++ b/app/marketing/page.tsx @@ -1,5 +1,7 @@ import { Metadata } from "next"; import Image from "next/image"; +import Link from "next/link"; +import FooterForm from "../_components/FooterForm"; export const metadata: Metadata = { title: "Opp lens - Marketing", description: @@ -19,7 +21,73 @@ export const metadata: Metadata = { }, }; +function ContactInfo({ + icon, + contact, + href, + ariaLabel, + contactIconSrc, +}: { + icon: string; + contact: string; + href?: string; + ariaLabel: string; + contactIconSrc?: string; +}) { + return ( +
  • + + {href ? ( + + {contact} + + ) : ( +

    + {!!contactIconSrc && ( + flag + )} + {contact} +

    + )} +
    • + ); +} export default function Home() { + const contactInfo = [ + { + icon: "/Message.svg", + contact: "info@opplens.com", + href: "mailto:info@opplens.com", + ariaLabel: "Email us at info@opplens.com", + }, + { + icon: "/Phone.svg", + contact: "(+46) - 761581526", + href: "tel:+46761581526", + ariaLabel: "Call us at +46 761581526", + }, + { + icon: "/Location.svg", + contact: "Stockholm, Sweden", + ariaLabel: "Our location in Stockholm, Sweden", + contactIconSrc: "/sweden.svg", + }, + ]; + const centerFrames = [ { src: "/magnifier.svg", @@ -45,171 +113,232 @@ export default function Home() { ]; return ( <> -
    -
    -
    -

    - democratizing the world of tenders -

    -

    - Opplens is your dedicated AI-powered partner, leveling the playing - field so you can win the public and private contracts you deserve. -
    - Compete on your true strengths. -

    -
    -
    - +
    + + Opp lens logo + +
    +
    +
    +
    +
    +

    + democratizing the world of tenders +

    +

    + Opplens is your dedicated AI-powered partner, leveling the + playing field so you can win the public and private contracts + you deserve. +
    + Compete on your true strengths. +

    +
    +
    + +
    +
    +
    + dynamic island + phone
    -
    - dynamic island - phone -
    -
    -
    -
    -

    - your in-house tender department, powered by - ai -

    -

    - Opplens is the end-to-end solution that gives you the power to - compete and win. -

    -
    -
    -
    - {centerFrames.map((frame, index) => ( -
    - {frame.alt} -

    {frame.title}

    -

    {frame.description}

    -
    - ))} -
    -
    -
    -

    - Tired of Complex Tenders & Lost Opportunities? -

    -

    - The procurement market is tough for SMEs. We get it. You're facing - an uphill battle. -

    -
    -
      -
    • -
      +
      +
      +

      + your in-house tender department, powered by + ai +

      +

      + Opplens is the end-to-end solution that gives you the power to + compete and win. +

      +
      +
      +
      + {centerFrames.map((frame, index) => ( +
      clock icon -
      -

      Resource Drain

      -

      - Lacking the time, dedicated staff, and expertise to constantly - monitor the market and prepare high-quality bids. +

      {frame.title}

      +

      {frame.description}

      + + ))} +
    +
    +
    +

    + Tired of Complex Tenders & Lost Opportunities? +

    +

    + The procurement market is tough for SMEs. We get it. You're facing + an uphill battle.

    - -
  • -
    - clipboard icon -
    -

    Overwhelming Complexity

    -

    - Navigating complex requirements and processes designed for large - corporations with dedicated tender departments. -

    -
    • -
  • -
    - arrow-up icon -
    -

    Low Win Rates

    -

    - Did you know 68% of SMEs in Sweden rarely or never win public - tenders? It's time to change that. -

    -
    • - -
    -
    -

    - The Opplens Advantage -

    -
    -
    - people icon -
    -

    A True Partnership Model

    +
    +
      +
    • +
      + clock icon +
      +

      Resource Drain

      - Lower your risk with our performance-based options. Our success - is directly tied to yours, making us a dedicated partner - invested in your growth, not just a software provider. + Lacking the time, dedicated staff, and expertise to constantly + monitor the market and prepare high-quality bids.

      -
    - -
    - shield icon -
    -

    Unmatched Data Security

    + +
  • +
    + clipboard icon +
    +

    Overwhelming Complexity

    - Your business data is critical. Our unique on premise AI engine - ensures your information remains 100% private and secure, unlike - cloud based services. Fully GDPR compliant by design. + Navigating complex requirements and processes designed for large + corporations with dedicated tender departments.

    +
    • +
  • +
    + arrow-up icon +
    +

    Low Win Rates

    +

    + Did you know 68% of SMEs in Sweden rarely or never win public + tenders? It's time to change that. +

    +
    • + +
    +
    +

    + The Opplens Advantage +

    +
    +
    + people icon +
    +

    A True Partnership Model

    +

    + Lower your risk with our performance-based options. Our + success is directly tied to yours, making us a dedicated + partner invested in your growth, not just a software provider. +

    +
    +
    +
    + shield icon +
    +

    Unmatched Data Security

    +

    + Your business data is critical. Our unique on premise AI + engine ensures your information remains 100% private and + secure, unlike cloud based services. Fully GDPR compliant by + design. +

    +
    +
    +
    +
    + +
    + ); }