NOISSUE - Address requested changes

biome.json

@@ -1,5 +1,8 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "files": {
+    "ignore": ["node_modules", "dist", "build", "coverage", "public"]
+  },
   "organizeImports": {
     "enabled": true
   },

src/app/globals.css

@@ -6,79 +6,70 @@ body {
   font-family: Rubik, sans-serif;
 }
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221.2 70.7% 40.2%;
     --primary-foreground: 210 40% 98%;
-
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
-  
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
-
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
-
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
-
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
-
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 224.3 76.3% 48%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/app/layout.tsx

@@ -1,11 +1,11 @@
-import Footer from '@/components/ui/footer';
-import Header from '@/components/ui/header';
+import Footer from '@/components/footer';
+import Header from '@/components/header';
 import { getImageUrl } from '@/lib/utils';
 import type { Metadata } from 'next';
 import { Rubik } from 'next/font/google';
 import './globals.css';
 
-const rubik = Rubik({ subsets: ['latin'] });
+const rubik = Rubik({ subsets: ['latin'], weight: '400' });
 
 export const metadata: Metadata = {
   title: 'Magistrala',

src/app/page.tsx

@@ -1,47 +1,24 @@
-import { ComingSoonBanner } from '@/components/coming-soonbanner';
 import { PoweredBy } from '@/components/powered-by';
 import { BenefitsSection } from '@/components/section-benefits';
+import { ComingSoonBanner } from '@/components/section-coming-soon';
 import { FAQSection } from '@/components/section-faq';
 import { FeaturesSection } from '@/components/section-features';
 import { Hero } from '@/components/section-hero';
-import { UseCasesSection } from '@/components/usecase-tab';
-import { heroData } from '@/lib/constants';
+import { PricingSection } from '@/components/section-pricing';
+import { UseCasesSection } from '@/components/section-usecase';
 
 export default function Home() {
   return (
-    <div className="min-h-screen constant mx-auto py-8 md:py-20">
-      {/* Hero Section */}
-      <Hero
-        title={heroData.title}
-        subtitle={heroData.subtitle}
-        buttonText={heroData.buttonText}
-        buttonLink={heroData.buttonLink}
-        imageUrl={heroData.imageUrl}
-      />
-
-      {/* Benefits Section */}
+    <div className="min-h-screen constant mx-auto">
+      <Hero />
       <BenefitsSection />
-
-      {/* Features Section */}
+      <PoweredBy />
       <FeaturesSection />
-
-      {/* Future Features Section */}
       {/* <NextFeaturesSection /> */}
-
-      {/* Use Cases Tabs */}
       <UseCasesSection />
 
-      {/* Pricing Section*/}
-
-      {/* <PricingSection plans={pricingData} /> */}
-
-      {/* Coming Soon Banner Section */}
       <ComingSoonBanner />
-
-      {/* Powered By Section */}
-      <PoweredBy />
-
-      {/* FAQ Section */}
+      {/* <PricingSection /> */}
       <FAQSection />
     </div>
   );

src/components/footer-copyright.tsx

@@ -6,7 +6,7 @@ export function FooterCopyright() {
 
   return (
     <div className="mt-12">
-      <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+      <div className="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
         <p className="text-sm text-muted-foreground">
           &copy; {year} Abstract Machines. {rights}
         </p>

src/components/footer-newsletter.tsx

@@ -8,7 +8,7 @@ export function FooterNewsletter() {
     <div className="space-y-4">
       <h4 className="font-semibold">{title}</h4>
       <p className="text-sm text-muted-foreground">{subtitle}</p>
-      <form className="flex flex-col sm:flex-row gap-2">
+      <form className="flex flex-row items-center gap-2">
         <input
           type="email"
           placeholder={placeholder}

src/components/footer.tsx

@@ -0,0 +1,27 @@
+import { FooterCompanyInfo } from './footer-company-info';
+import { FooterCopyright } from './footer-copyright';
+import { FooterNewsletter } from './footer-newsletter';
+import { FooterQuickLinks } from './footer-quick-links';
+import { FooterSocialLinks } from './footer-social-links';
+import { Separator } from './ui/separator';
+
+export default function Footer() {
+  return (
+    <footer className="bg-blue-200 py-12">
+      <div className="container mx-auto">
+        {/* Main Footer Content */}
+        <div className="flex flex-col sm:flex-row justify-between gap-8 mb-8">
+          <FooterCompanyInfo />
+          <FooterQuickLinks />
+          <FooterSocialLinks />
+          <FooterNewsletter />
+        </div>
+
+        <Separator />
+
+        {/* Footer Bottom */}
+        <FooterCopyright />
+      </div>
+    </footer>
+  );
+}

src/components/header.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { HeaderData } from '@/lib/constants';
+import { getImageUrl } from '@/lib/utils';
+import { Menu } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import { Separator } from './ui/separator';
+
+export default function Header() {
+  return (
+    <header className="sticky top-0 z-50 bg-white shadow-sm">
+      <div className="container mx-auto flex items-center justify-between">
+        {/* Logo Section */}
+        <Link href="/">
+          <Image
+            src={
+              getImageUrl(HeaderData.Logo.url) || HeaderData.Logo.placeholder
+            }
+            alt={HeaderData.Logo.alt}
+            width={HeaderData.Logo.width}
+            height={HeaderData.Logo.height}
+          />
+        </Link>
+
+        {/* Desktop Navigation Section */}
+        <nav className="hidden md:flex flex-1 justify-center">
+          <ul className="flex space-x-8 items-center">
+            {HeaderData.navigationLinks.map((link) => (
+              <li key={link.label}>
+                <Link
+                  href={link.href}
+                  className="text-xl hover:text-blue-600 transition-colors"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        {/* CTA Button Section */}
+        <div className="hidden md:flex items-center gap-6">
+          <Button aria-label={HeaderData.ctaButton.text} asChild={true}>
+            <Link href={HeaderData.ctaButton.link}>
+              {HeaderData.ctaButton.text}
+            </Link>
+          </Button>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <MobileMenu />
+      </div>
+    </header>
+  );
+}
+
+function MobileMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button className="md:hidden" aria-label="Toggle menu">
+          <Menu className="h-6 w-6 text-white" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="top">
+        <SheetHeader>
+          <SheetTitle className="hidden">Menu</SheetTitle>
+        </SheetHeader>
+        <Separator className="my-8" />
+        <nav className="flex flex-col gap-4">
+          <ul className="flex flex-col space-y-4 items-center">
+            {HeaderData.navigationLinks.map((link) => (
+              <li key={link.label}>
+                <Link
+                  href={link.href}
+                  className="text-xl hover:text-blue-600 transition-colors"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <Separator className="mt-4" />
+
+          <Button aria-label={HeaderData.ctaButton.text} asChild={true}>
+            <Link href={HeaderData.ctaButton.link}>
+              {HeaderData.ctaButton.text}
+            </Link>
+          </Button>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/components/powered-by.tsx

@@ -4,11 +4,9 @@ import Image from 'next/image';
 
 export function PoweredBy() {
   return (
-    <section className="py-8 bg-white">
-      <div className="container mx-auto px-6">
-        <h3 className="text-center text-blue-950 font-semibold lg:text:3xl text-xl mb-8">
-          POWERED BY
-        </h3>
+    <section className="py-20 bg-white">
+      <div className="container mx-auto">
+        <h1 className="text-center text-xl lg:text-2xl mb-8">POWERED BY</h1>
         <div className="flex flex-wrap justify-center items-center gap-12 md:gap-10">
           {poweredByPartners.map((partner) => (
             <a