Update src/app/page.tsx

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import { Zap } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,28 +32,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Features", id: "features" },
-          name: "Features",
+        { name: "Pricing", id: "pricing" },
-          id: "features",
+        { name: "FAQ", id: "faq" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Usta.ai"
-      button={{
+      button={{ text: "Get Started", href: "#contact" }}
-        text: "Get Started",
-        href: "#contact",
-      }}
     />
   </div>
 
@@ -61,36 +46,14 @@ export default function LandingPage() {
       <HeroOverlay
       title="Build Smarter AI, Faster."
       description="Usta.ai empowers teams to rapidly build, deploy, and scale custom AI solutions without the complexity. Your platform for innovation."
-      buttons={[
+      buttons={[{ text: "Start Building", href: "#contact" }]}
-        {
-          text: "Start Building",
-          href: "#contact",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg"
       imageAlt="Usta.ai Platform Dashboard"
       showBlur={true}
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg", alt: "User avatar" },
-          src: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
+        { src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "User avatar" },
-          alt: "User avatar",
+        { src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "User avatar" },
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg",
-          alt: "User avatar",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
-          alt: "User avatar",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",
-          alt: "User avatar",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg",
-          alt: "User avatar",
-        },
       ]}
       avatarText="Join 5,000+ developers"
     />
@@ -98,34 +61,21 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardTwentyOne
-      useInvertedBackground={false}
       title="Engineered for Efficiency"
       description="Powerful capabilities to transform your workflow."
       accordionItems={[
-        {
+        { id: "f1", title: "Modular AI Blocks", content: "Connect pre-built logic blocks to create complex AI flows without writing code." },
-          id: "f1",
+        { id: "f2", title: "Real-time Deployment", content: "One-click deployment to any cloud provider or edge device." },
-          title: "Modular AI Blocks",
+        { id: "f3", title: "Auto-scaling Infrastructure", content: "Our backend automatically scales to handle your most demanding AI models." },
-          content: "Connect pre-built logic blocks to create complex AI flows without writing code.",
-        },
-        {
-          id: "f2",
-          title: "Real-time Deployment",
-          content: "One-click deployment to any cloud provider or edge device.",
-        },
-        {
-          id: "f3",
-          title: "Auto-scaling Infrastructure",
-          content: "Our backend automatically scales to handle your most demanding AI models.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037254.jpg"
       mediaAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="about" data-section="about">
       <TestimonialAboutCard
-      useInvertedBackground={true}
       tag="Our Mission"
       title="Democratizing AI Development"
       description="At Usta.ai, we believe every organization should have access to world-class artificial intelligence tools."
@@ -133,24 +83,17 @@ export default function LandingPage() {
       icon={Zap}
       imageSrc="http://img.b2bpic.net/free-photo/programmer-colleague-office-training-machine-learning-algorithms_482257-116901.jpg"
       mediaAnimation="blur-reveal"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
-      textboxLayout="default"
+      names={["InnovateLab", "DataCore", "NexTech", "CloudScale", "VisionaryAI"]}
-      useInvertedBackground={false}
-      names={[
-        "InnovateLab",
-        "DataCore",
-        "NexTech",
-        "CloudScale",
-        "VisionaryAI",
-        "LogicSoft",
-        "QuantumOps",
-      ]}
       title="Trusted by Industry Leaders"
       description="Driving innovation across global enterprises."
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -158,41 +101,10 @@ export default function LandingPage() {
       <PricingCardOne
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       plans={[
-        {
+        { id: "p1", badge: "Starter", price: "$99", subtitle: "For early-stage startups", features: ["5 AI Models", "Standard Support"] },
-          id: "p1",
+        { id: "p2", badge: "Professional", price: "$299", subtitle: "For growing teams", features: ["20 AI Models", "Priority Support"] },
-          badge: "Starter",
-          price: "$99",
-          subtitle: "For early-stage startups",
-          features: [
-            "5 AI Models",
-            "Standard Support",
-            "Shared Infrastructure",
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Professional",
-          price: "$299",
-          subtitle: "For growing teams",
-          features: [
-            "20 AI Models",
-            "Priority Support",
-            "Dedicated Resources",
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Enterprise",
-          price: "Custom",
-          subtitle: "For large organizations",
-          features: [
-            "Unlimited Models",
-            "24/7 Dedicated Support",
-            "Enterprise Security",
-          ],
-        },
       ]}
       title="Simple, Scalable Pricing"
       description="Plans designed for teams of any size."
@@ -200,137 +112,54 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
+      <TestimonialCardFive
-      animationType="scale-rotate"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Chen",
-          role: "Head of AI",
-          testimonial: "Usta.ai reduced our development time by 70%. It's a game-changer.",
-          imageSrc: "http://img.b2bpic.net/free-photo/scientist-factory-using-tablet-check-photovoltaics-materials-parameters_482257-120526.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark Miller",
-          role: "CTO",
-          testimonial: "The most intuitive platform for scaling custom models I've ever used.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
-        },
-        {
-          id: "t3",
-          name: "Elena Rossi",
-          role: "Lead Engineer",
-          testimonial: "Reliable, fast, and simple. Everything we need in one place.",
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-inspector-suit-monitoring-solar-panel-production-output_482257-125982.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Park",
-          role: "Product Lead",
-          testimonial: "Usta.ai made deploying our AI solution a seamless experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-doing-presentation-meeting_23-2148817046.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jana Schmidt",
-          role: "Researcher",
-          testimonial: "Finally, a builder platform that actually understands how we work.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg",
-        },
-      ]}
       title="Loved by Developers Worldwide"
       description="See why teams choose Usta.ai."
+      testimonials={[
+        { id: "t1", name: "Sarah Chen", date: "Oct 2024", title: "Game-changer", quote: "Usta.ai reduced our development time by 70%.", tag: "DevOps", avatarSrc: "http://img.b2bpic.net/free-photo/scientist-factory-using-tablet-check-photovoltaics-materials-parameters_482257-120526.jpg" },
+        { id: "t2", name: "Mark Miller", date: "Sept 2024", title: "Incredible", quote: "Most intuitive platform I've ever used.", tag: "Engineering", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg" },
+      ]}
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
-      useInvertedBackground={true}
+      title="Questions? Answers."
-      faqs={[
+      description="Everything you need to know about Usta.ai."
-        {
+      textboxLayout="default"
-          id: "q1",
-          title: "Is coding required?",
-          content: "No, our visual builder allows you to create complex AI workflows entirely without code.",
-        },
-        {
-          id: "q2",
-          title: "Can I export my models?",
-          content: "Yes, you can export your models and deploy them to your own infrastructure easily.",
-        },
-        {
-          id: "q3",
-          title: "What cloud providers do you support?",
-          content: "We support AWS, Google Cloud, and Azure for easy deployment.",
-        },
-      ]}
-      sideTitle="Questions? Answers."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
       useInvertedBackground={false}
-      title="Ready to Start?"
+      faqs={[
-      description="Reach out to our team to schedule a demo."
+        { id: "q1", title: "Is coding required?", content: "No, our visual builder allows you to create complex AI workflows entirely without code." },
-      inputs={[
+        { id: "q2", title: "Can I export my models?", content: "Yes, you can export your models and deploy them to your own infrastructure easily." },
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
       ]}
-      textarea={{
+      faqsAnimation="blur-reveal"
-        name: "message",
+      mediaAnimation="slide-up"
-        placeholder: "Tell us about your project",
-        required: true,
-      }}
       imageSrc="http://img.b2bpic.net/free-photo/laptop-desk-office-showing-stock-exchange-indices_482257-106388.jpg"
     />
   </div>
 
+  <div id="contact" data-section="contact">
+      <ContactCenter
+      tag="Contact"
+      title="Ready to Start?"
+      description="Reach out to our team to schedule a demo."
+      background={{ variant: "gradient-bars" }}
+      useInvertedBackground={false}
+    />
+  </div>
+
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBase
-      columns={[
-        {
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Support",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
       logoText="Usta.ai"
+      columns={[
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] },
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
+  --background: #0a0a0a;
-  --card: #1a2f1d;
+  --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --primary-cta: #e34400;
   --primary-cta-text: #0a1a0c;
-  --secondary-cta: #0d200f;
+  --secondary-cta: #010101;
   --secondary-cta-text: #d4f6d8;
-  --accent: #1a3d1f;
+  --accent: #e34400;
-  --background-accent: #355e3b;
+  --background-accent: #e34400;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);