Cambio Ml website redesign

app/[locale]/book-demo/page.tsx

@@ -110,7 +110,7 @@ const BookDemoPage = () => {
       window.removeEventListener('message', handleCalendlyEvent);
       document.body.removeChild(script);
     };
-  }, []);
+  }, [handleCalendlyEvent]);
 
   return (
     <div className="pb-10 w-full h-full flex flex-col justify-center items-center ">

app/[locale]/company/about-us/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import '@/app/theme.css';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
@@ -45,7 +44,7 @@ function WhoWeAre() {
   return (
     <section
       id="who-we-are"
-      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center bg-white dark:bg-background"
+      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center"
     >
       <div className="container flex flex-col gap-6.25 text-center">
         <h2 className="text-5xl font-medium">
@@ -68,7 +67,7 @@ function FoundingTeam() {
   return (
     <section
       id="founding-team"
-      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center bg-white dark:bg-background"
+      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center"
     >
       <div className="container flex flex-col gap-6.25 text-center">
         <h2 className="text-5xl font-medium">
@@ -125,7 +124,7 @@ function WhatWeOffer() {
   return (
     <section
       id="what-we-offer"
-      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center bg-white dark:bg-background"
+      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center"
     >
       <div className="container flex flex-col gap-6.25 text-center">
         <h2 className="text-5xl font-medium">
@@ -148,7 +147,7 @@ function Investors() {
   return (
     <section
       id="investors"
-      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center bg-white dark:bg-background"
+      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center"
     >
       <div className="flex flex-col items-center gap-12.5">
         <h2 className="text-5xl font-medium text-center">
@@ -197,7 +196,7 @@ function GetStarted() {
   return (
     <section
       id="get-started"
-      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center bg-white dark:bg-background"
+      className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-12.5 items-center"
     >
       <div className="container flex flex-col gap-8 text-center items-center">
         <h2 className="text-5xl font-medium leading-relaxed pb-2">
@@ -208,17 +207,15 @@ function GetStarted() {
         </p>
         <div className="flex items-center gap-5">
           <button
-            onClick={() => router.push(`/${locale}/anyparser`)}
+            onClick={() => {
+              if (typeof window !== 'undefined') {
+                window.open('https://app.energent.ai', '_blank');
+              }
+            }}
             className="relative px-4 py-2 rounded-md text-sm font-medium bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 text-white transition-all duration-200 border border-gray-300 dark:border-gray-600"
           >
             <span className="text-white dark:bg-gradient">{t.company.getStarted.buttonText}</span>
           </button>
-          <button
-            onClick={() => window.open('https://docs.cambioml.com/introduction', '_blank')}
-            className="relative px-4 py-2 rounded-md text-sm font-medium bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 text-white transition-all duration-200 border border-gray-300 dark:border-gray-600"
-          >
-            <span className="text-white dark:bg-gradient">{t.company.getStarted.docsButtonText}</span>
-          </button>
         </div>
       </div>
     </section>
@@ -227,7 +224,7 @@ function GetStarted() {
 
 const AboutPage = () => {
   return (
-    <div className="w-full h-full flex flex-col justify-center items-center bg-white dark:bg-background">
+    <div className="w-full h-full flex flex-col justify-center items-center">
       <Container styles="h-max pt-24" centerX center-y>
         <WhoWeAre />
         <FoundingTeam />

app/[locale]/pricing-rt/page.tsx

@@ -42,10 +42,10 @@ const Pricing = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-white dark:bg-background">
+    <div className="min-h-screen bg-background">
       <section
         id="pricing"
-        className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-6.25 items-center bg-gray-50 dark:bg-background"
+        className="px-3.75 py-12.5 lg:pt-25 lg:pb-12.5 lg:px-40 flex flex-col gap-6.25 items-center bg-background"
       >
         <div className="container flex flex-col gap-6.25 text-center">
           <h1 className="text-6xl dark:bg-gradient">{t.pricing.realTimeApi.title}</h1>

app/[locale]/solutions/compliance/autorater/page.tsx

@@ -8,7 +8,7 @@ const AutoRaterSolutionsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="pb-10 w-full h-full bg-white dark:bg-background">
+    <div className="pb-10 w-full h-full bg-background">
       <PageHero
         title={t.solutionPages.compliance.autorater.title}
         description={t.solutionPages.compliance.autorater.description}

app/[locale]/solutions/compliance/page.tsx

@@ -16,7 +16,7 @@ const ComplianceSolutionsPage = () => {
   const solutionPages = t.solutionPages;
 
   return (
-    <div className="pb-10 w-full h-full bg-white dark:bg-background">
+    <div className="pb-10 w-full h-full bg-background">
       <PageHero
         title={solutionPages?.compliance?.title || 'ComplianceAI'}
         description={solutionPages?.compliance?.description || 'Get Auto Compliant with LLMs'}

app/[locale]/solutions/finance/page.tsx

@@ -18,7 +18,7 @@ const FintechSolutionsPage = () => {
   const solutionPages = t.solutionPages;
 
   return (
-    <div className="pb-10 w-full h-full flex flex-col justify-center items-center bg-white dark:bg-background">
+    <div className="pb-10 w-full h-full flex flex-col justify-center items-center bg-background">
       <PageHero
         title={solutionPages.finance.title}
         description={solutionPages.finance.description}

app/[locale]/solutions/research-&-development/page.tsx

@@ -16,7 +16,7 @@ const RDSolutionsPage = () => {
   const solutionPages = t.solutionPages;
 
   return (
-    <div className="pb-10 w-full h-full flex flex-col justify-center items-center bg-white dark:bg-background">
+    <div className="pb-10 w-full h-full flex flex-col justify-center items-center bg-background">
       <PageHero
         title={
           solutionPages?.researchDevelopment?.title ||

app/components/DocumentViewer.tsx

@@ -6,6 +6,7 @@ import '@cyntler/react-doc-viewer/dist/index.css';
 import Image from 'next/image';
 import '@react-pdf-viewer/core/lib/styles/index.css';
 import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+import './document-viewer.css';
 import ComingSoonBanner from './playground/ComingSoonBanner';
 
 type DocumentViewerProps = {
@@ -21,7 +22,7 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({ fileType, fileUrl }) =>
   const renderContent = () => {
     if (fileType === 'application/pdf') {
       return (
-        <div className="h-full w-full">
+        <div className="document-viewer-container h-full w-full">
           <Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
             <Viewer fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance]} />
           </Worker>
@@ -33,14 +34,14 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({ fileType, fileUrl }) =>
       fileType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     ) {
       return (
-        <div className="h-[80vh] w-full border-[1px] rounded-lg">
+        <div className="document-viewer-container h-[80vh] w-full">
           <ComingSoonBanner text="Preview for Office Files coming soon" />
           {/* <DocViewer documents={[{ uri: fileUrl, fileName: fileName }]} pluginRenderers={DocViewerRenderers} /> */}
         </div>
       );
     } else if (fileType.startsWith('image/')) {
       return (
-        <div className="h-auto w-full border-[1px] rounded-lg">
+        <div className="document-viewer-container h-auto w-full">
           <Image
             alt="Document"
             src={fileUrl}

app/components/Heading.tsx

@@ -5,13 +5,14 @@ interface HeadingProps {
   subtitle?: string;
   center?: boolean;
   white?: boolean;
+  customClass?: string;
 }
 
-const Heading = ({ title, subtitle, center, white }: HeadingProps) => {
+const Heading = ({ title, subtitle, center, white, customClass }: HeadingProps) => {
   return (
     <div className={center ? 'text-center' : 'text-start'}>
       <h1
-        className={`text-4xl leading-tight ${white ? 'text-white' : 'text-neutral-800 dark:text-gray-200'} font-semibold whitespace-pre-line`}
+        className={`${customClass || 'text-4xl'} leading-tight ${white ? 'text-white' : 'text-neutral-800 dark:text-gray-200'} font-semibold whitespace-pre-line`}
       >
         {title}
       </h1>

app/components/HtmlAttributes.tsx

@@ -25,6 +25,30 @@ export default function HtmlAttributes() {
       document.documentElement.classList.add('ltr');
       document.documentElement.classList.remove('rtl');
     }
+
+    // Sync theme class from body to html element
+    const syncTheme = () => {
+      const bodyClasses = document.body.classList;
+      if (bodyClasses.contains('dark')) {
+        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
+      } else if (bodyClasses.contains('light')) {
+        document.documentElement.classList.add('light');
+        document.documentElement.classList.remove('dark');
+      }
+    };
+
+    // Initial sync
+    syncTheme();
+
+    // Watch for theme changes on body
+    const observer = new MutationObserver(syncTheme);
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
+    return () => observer.disconnect();
   }, [pathname]);
 
   return null;

app/components/SimpleButton.tsx

@@ -7,50 +7,43 @@ interface SimpleButtonProps {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   small?: boolean;
+  compact?: boolean;
   icon?: Icon;
   labelIcon?: Icon;
 }
 
-const SimpleButton = ({ label, onClick, disabled, small, icon: Icon, labelIcon: LabelIcon }: SimpleButtonProps) => {
+const SimpleButton = ({
+  label,
+  onClick,
+  disabled,
+  small,
+  compact,
+  icon: Icon,
+  labelIcon: LabelIcon,
+}: SimpleButtonProps) => {
+  const baseClasses = [
+    'relative',
+    'disabled:opacity-70',
+    'disabled:cursor-not-allowed',
+    'rounded-xl',
+    'bg-neutral-200',
+    'hover:bg-cambio-blue-0',
+    'hover:text-white',
+    'transition',
+    'text-neutral-600',
+    compact
+      ? 'px-4 py-2 text-sm font-medium w-auto'
+      : small
+        ? 'py-3 text-lg w-full font-semibold'
+        : 'py-4 text-3xl w-full font-semibold',
+  ].join(' ');
+
   return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={`
-        relative
-        disabled:opacity-70
-        disabled:cursor-not-allowed
-        rounded-xl
-        bg-neutral-200
-        hover:bg-cambio-blue-0
-        hover:text-white
-        transition
-        w-full
-        text-neutral-600
-        ${small ? 'py-3' : 'py-4'}
-        ${small ? 'text-lg' : 'text-3xl'}
-        font-semibold
-      `}
-    >
-      {Icon && (
-        <Icon
-          size={24}
-          className="
-            absolute
-            left-4
-            top-3
-          "
-        />
-      )}
+    <button onClick={onClick} disabled={disabled} className={baseClasses}>
+      {Icon && <Icon size={24} className="absolute left-4 top-3" />}
       <div className="flex items-center justify-center gap-2">
-        <span>{label} </span>
-        {LabelIcon && (
-          <LabelIcon
-            size={24}
-            className="
-          "
-          />
-        )}
+        <span>{label}</span>
+        {LabelIcon && <LabelIcon size={24} />}
       </div>
     </button>
   );

app/components/YoutubeFacade.tsx

@@ -23,6 +23,7 @@ const YouTubeFacade = ({ videoId }: YouTubeFacadeProps) => {
         />
       ) : (
         <div className="relative cursor-pointer" onClick={playVideo}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
             alt="YouTube video thumbnail"

app/components/about-us/TeamMember.tsx

@@ -40,6 +40,7 @@ const TeamMember = ({ image, name, title, bio, url, logos }: TeamMemberProps) =>
               <a target="_blank" href={logo.url} rel="noopener noreferrer" key={logo.url + i}>
                 <div className={`flex items-center justify-center h-full w-max`}>
                   <div className={`${logo.height || 'h-[30px]'} w-auto`}>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={imgPrefix + logo.image}
                       alt={logo.alt}

app/components/document-viewer.css

@@ -0,0 +1,7 @@
+.document-viewer-container {
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

app/components/footer/Footer.tsx

@@ -29,12 +29,12 @@ const Footer = () => {
   const { t, locale } = useTranslation();
 
   return (
-    <div className="w-full bg-[#1E1E1E]">
+    <div className="w-full border-t border-border text-foreground">
       <Container styles="h-fit min-h-[300px]">
         <h2 className="sr-only">Footer</h2>
-        <div className="py-10 h-full grid grid-cols-[175px_50px_1fr] gap-2 md:gap-5 text-neutral-100">
+        <div className="py-10 h-full grid grid-cols-[175px_50px_1fr] gap-2 md:gap-5 text-foreground">
           <div className="flex flex-col gap-3 md:gap-5">
-            <Logo small white />
+            <Logo small />
             <div className="flex gap-3">
               {socialLinks.map((socialLink) => (
                 <SocialButton key={socialLink.url} image={socialLink.image} url={socialLink.url} />
@@ -47,11 +47,15 @@ const Footer = () => {
           <div className="col-span-1"></div>
           <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
             <FooterMenu
-              title={t.footer.libraries.title}
+              title={t.footer.products.title}
               links={[
                 {
-                  title: t.footer.libraries.anyParser,
-                  url: 'https://docs.cambioml.com/introduction',
+                  title: 'Energent AI',
+                  url: 'https://app.energent.ai',
+                },
+                {
+                  title: 'AnyParser',
+                  url: `/${locale}/anyparser`,
                 },
               ]}
             />