Update src/app/styles/base.css

Merge version_4 into main

src/app/blog/page.tsx

@@ -16,82 +16,46 @@ export default function BlogPage() {
 
   const blogPosts = [
     {
-      id: "1",
+      id: "1",      category: ["AI", "Technology"],
-      category: ["AI", "Technology"],
+      title: "The Future of AI in Enterprise Software",      excerpt: "Discover how machine learning and artificial intelligence are revolutionizing enterprise applications and driving unprecedented efficiency gains.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/abstract-ai-and-machine-learning-concept-1773144532401-2c944a34.png",      imageAlt: "AI trends visualization",      authorName: "Dr. Sarah Johnson",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-confident-sof-1773144534034-c544170a.png",      date: "March 15, 2024"},
-      title: "The Future of AI in Enterprise Software",
-      excerpt: "Discover how machine learning and artificial intelligence are revolutionizing enterprise applications and driving unprecedented efficiency gains.",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/abstract-ai-and-machine-learning-concept-1773144532401-2c944a34.png",
-      imageAlt: "AI trends visualization",
-      authorName: "Dr. Sarah Johnson",
-      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-confident-sof-1773144534034-c544170a.png",
-      date: "March 15, 2024",
-    },
     {
-      id: "2",
+      id: "2",      category: ["Cloud", "Migration"],
-      category: ["Cloud", "Migration"],
+      title: "Seamless Cloud Migration: A Practical Guide",      excerpt: "Learn best practices for migrating your infrastructure to the cloud with minimal disruption and maximum efficiency gains.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/cloud-migration-and-digital-transformati-1773144534919-44ad8fee.jpg",      imageAlt: "Cloud migration strategy",      authorName: "James Mitchell",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-technical-eng-1773144534249-fd7ec2b9.jpg",      date: "March 10, 2024"},
-      title: "Seamless Cloud Migration: A Practical Guide",
-      excerpt: "Learn best practices for migrating your infrastructure to the cloud with minimal disruption and maximum efficiency gains.",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/cloud-migration-and-digital-transformati-1773144534919-44ad8fee.jpg",
-      imageAlt: "Cloud migration strategy",
-      authorName: "James Mitchell",
-      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-technical-eng-1773144534249-fd7ec2b9.jpg",
-      date: "March 10, 2024",
-    },
     {
-      id: "3",
+      id: "3",      category: ["DevOps", "Best Practices"],
-      category: ["DevOps", "Best Practices"],
+      title: "Mastering DevOps: Continuous Integration and Deployment",      excerpt: "Explore advanced DevOps practices that accelerate development cycles and improve software quality across your organization.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/devops-workflow-and-continuous-integrati-1773144533401-8b4b3c77.png",      imageAlt: "DevOps workflow pipeline",      authorName: "Emma Rodriguez",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-product-manag-1773144532734-5f1b56a2.png",      date: "March 5, 2024"},
-      title: "Mastering DevOps: Continuous Integration and Deployment",
-      excerpt: "Explore advanced DevOps practices that accelerate development cycles and improve software quality across your organization.",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/devops-workflow-and-continuous-integrati-1773144533401-8b4b3c77.png",
-      imageAlt: "DevOps workflow pipeline",
-      authorName: "Emma Rodriguez",
-      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-product-manag-1773144532734-5f1b56a2.png",
-      date: "March 5, 2024",
-    },
     {
-      id: "4",
+      id: "4",      category: ["Security", "Compliance"],
-      category: ["Security", "Compliance"],
+      title: "Enterprise Security: Building Resilient Systems",      excerpt: "Understand the critical security considerations for enterprise software architecture and regulatory compliance frameworks.",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/abstract-visualization-of-cloud-security-1773144532588-9315b3bb.png?_wi=3",      imageAlt: "Security architecture",      authorName: "Michael Chen",      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-startup-found-1773144532923-cb854b6d.png",      date: "February 28, 2024"},
-      title: "Enterprise Security: Building Resilient Systems",
-      excerpt: "Understand the critical security considerations for enterprise software architecture and regulatory compliance frameworks.",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/abstract-visualization-of-cloud-security-1773144532588-9315b3bb.png?_wi=3",
-      imageAlt: "Security architecture",
-      authorName: "Michael Chen",
-      authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-startup-found-1773144532923-cb854b6d.png",
-      date: "February 28, 2024",
-    },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
+        { label: "Features", href: "/features" },
-        { label: "Features", href: "/" },
         { label: "Pricing", href: "/pricing" },
-        { label: "Security", href: "/" },
+        { label: "Security", href: "/features" },
-        { label: "Integrations", href: "/" },
+        { label: "Integrations", href: "/features" },
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
+        { label: "About", href: "/about" },
-        { label: "About", href: "/" },
         { label: "Blog", href: "/blog" },
         { label: "Careers", href: "#" },
-        { label: "Contact", href: "#" },
+        { label: "Contact", href: "/contact" },
       ],
     },
     {
-      title: "Resources",
+      title: "Resources",      items: [
-      items: [
         { label: "Documentation", href: "#" },
         { label: "API Reference", href: "#" },
         { label: "Community", href: "#" },
-        { label: "Support", href: "#" },
+        { label: "Support", href: "/contact" },
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Compliance", href: "#" },
@@ -116,11 +80,15 @@ export default function BlogPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="TechCore"
-          navItems={navItems}
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Features", id: "/features" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" },
+          ]}
           button={{
-            text: "Get Started",
+            text: "Get Started",            href: "/contact"}}
-            href: "/contact",
-          }}
         />
       </div>
 

src/app/contact/page.tsx

@@ -22,8 +22,7 @@ export default function ContactPage() {
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Features", href: "/features" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "/features" },
@@ -31,8 +30,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "/blog" },
         { label: "Careers", href: "#" },
@@ -40,8 +38,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Resources",
+      title: "Resources",      items: [
-      items: [
         { label: "Documentation", href: "#" },
         { label: "API Reference", href: "#" },
         { label: "Community", href: "#" },
@@ -49,8 +46,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Compliance", href: "#" },
@@ -83,9 +79,7 @@ export default function ContactPage() {
             { name: "Contact", id: "/contact" },
           ]}
           button={{
-            text: "Get Started",
+            text: "Get Started",            href: "/contact"}}
-            href: "/contact",
-          }}
         />
       </div>
 
@@ -96,8 +90,7 @@ export default function ContactPage() {
           title="Join TechCore Today"
           description="Subscribe to our newsletter for exclusive insights, product updates, and industry trends delivered directly to your inbox."
           background={{
-            variant: "radial-gradient",
+            variant: "radial-gradient"}}
-          }}
           useInvertedBackground={false}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-customer-support-and-succes-1773144533398-565be44c.png"
           imageAlt="TechCore Support Team"

src/app/layout.tsx

@@ -5,17 +5,10 @@ import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
+import { Libre_Baskerville } from "next/font/google";
+import { Lobster_Two } from "next/font/google";
 
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
 
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
   title: "TechCore - Enterprise Software Solutions",
@@ -52,6 +45,12 @@ export const metadata: Metadata = {
   },
 };
 
+
+const lobsterTwo = Lobster_Two({
+  variable: "--font-lobster-two",  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -60,9 +59,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body
+        <body className={`${lobsterTwo.variable} antialiased`}>
-          className={`${halant.variable} ${inter.variable} antialiased`}
-        >
           <Tag />
           {children}
           <script

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
@@ -10,7 +10,7 @@ import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCar
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 import Link from "next/link";
-import { Rocket, Zap, Star, CheckCircle } from "lucide-react";
+import { Rocket, Zap, Star, CheckCircle, Sparkles } from "lucide-react";
 
 export default function HomePage() {
   const footerColumns = [
@@ -77,23 +77,40 @@ export default function HomePage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboardSplit
+        <HeroBillboard
-          logoText="TechCore"
+          background={{ variant: "sparkles-gradient" }}
+          title="Transform Your Enterprise" 
           description="Enterprise-grade software solutions designed for innovation. Streamline operations, enhance security, and scale with confidence using our cutting-edge technology platform."
-          background={{
+          tag="Unleash Potential"
-            variant: "radial-gradient"}}
+          tagIcon={Sparkles}
+          tagAnimation="opacity"
           buttons={[
             {
               text: "Start Free Trial",              href: "/contact"},
             {
               text: "View Demo",              href: "/about"},
           ]}
-          layoutOrder="default"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/a-modern-sleek-software-dashboard-interf-1773144534031-d6361a36.jpg"
-          imageAlt="TechCore Enterprise Dashboard"
-          frameStyle="browser"
-          mediaAnimation="slide-up"
           buttonAnimation="opacity"
+          avatars={[
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-confident-sof-1773144534034-c544170a.png", alt: "User 1" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-technical-eng-1773144534249-fd7ec2b9.jpg", alt: "User 2" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/professional-headshot-of-a-product-manag-1773144532734-5f1b56a2.png", alt: "User 3" },
+          ]}
+          avatarText="Trusted by 10,000+ users"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/tmp/monitor-with-graphs-and-analytics-for-so-1773145230881-88125799.png"
+          imageAlt="TechCore Enterprise Dashboard"
+          mediaAnimation="slide-up"
+          imageClassName="hover:scale-110 transition-transform duration-300 ease-out"
+          marqueeItems={[
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/microsoft-company-logo-modern-and-recogn-1773144537677-e897c954.jpg", alt: "Microsoft" },
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/google-company-logo-iconic-colorful-tech-1773144532136-cc6c331d.png", alt: "Google" },
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/amazon-company-logo-recognizable-ecommer-1773144533201-8d42dc8f.png", alt: "Amazon" },
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/salesforce-company-logo-crm-software-and-1773144540135-77f0bf19.jpg", alt: "Salesforce" },
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/ibm-company-logo-enterprise-technology-a-1773144542517-c650ca73.jpg", alt: "IBM" },
+            { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/oracle-company-logo-database-and-enterpr-1773144534714-ed7bc395.jpg", alt: "Oracle" },
+          ]}
+          marqueeSpeed={30}
+          showMarqueeCard={true}
         />
       </div>
 

src/app/pricing/page.tsx

@@ -10,8 +10,7 @@ import { DollarSign, Sparkles } from "lucide-react";
 export default function PricingPage() {
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Features", href: "/features" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "/features" },
@@ -19,8 +18,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "/blog" },
         { label: "Careers", href: "#" },
@@ -28,8 +26,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Resources",
+      title: "Resources",      items: [
-      items: [
         { label: "Documentation", href: "#" },
         { label: "API Reference", href: "#" },
         { label: "Community", href: "#" },
@@ -37,8 +34,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Compliance", href: "#" },
@@ -71,9 +67,7 @@ export default function PricingPage() {
             { name: "Contact", id: "/contact" },
           ]}
           button={{
-            text: "Get Started",
+            text: "Get Started",            href: "/contact"}}
-            href: "/contact",
-          }}
         />
       </div>
 
@@ -81,70 +75,23 @@ export default function PricingPage() {
         <PricingCardFive
           plans={[
             {
-              id: "startup",
+              id: "startup",              tag: "Startup Plan",              price: "$2,999",              period: "/month",              description: "Perfect for growing companies getting started with cloud infrastructure.",              button: {
-              tag: "Startup Plan",
+                text: "Get Started",                href: "/contact"},
-              price: "$2,999",
+              featuresTitle: "What's Included:",              features: [
-              period: "/month",
+                "Up to 100,000 monthly API calls",                "2 TB data storage",                "Basic security features",                "Email support",                "Auto-scaling capabilities",                "Monthly performance reports"],
-              description: "Perfect for growing companies getting started with cloud infrastructure.",
-              button: {
-                text: "Get Started",
-                href: "/contact",
-              },
-              featuresTitle: "What's Included:",
-              features: [
-                "Up to 100,000 monthly API calls",
-                "2 TB data storage",
-                "Basic security features",
-                "Email support",
-                "Auto-scaling capabilities",
-                "Monthly performance reports",
-              ],
             },
             {
-              id: "professional",
+              id: "professional",              tag: "Professional Plan",              tagIcon: Sparkles,
-              tag: "Professional Plan",
+              price: "$9,999",              period: "/month",              description: "Designed for established businesses requiring advanced features and priority support.",              button: {
-              tagIcon: Sparkles,
+                text: "Start Free Trial",                href: "/contact"},
-              price: "$9,999",
+              featuresTitle: "What's Included:",              features: [
-              period: "/month",
+                "Unlimited API calls",                "50 TB data storage",                "Advanced security & encryption",                "Priority 24/7 phone support",                "Multi-region deployment",                "Custom integrations",                "Weekly optimization reviews",                "Dedicated account manager"],
-              description: "Designed for established businesses requiring advanced features and priority support.",
-              button: {
-                text: "Start Free Trial",
-                href: "/contact",
-              },
-              featuresTitle: "What's Included:",
-              features: [
-                "Unlimited API calls",
-                "50 TB data storage",
-                "Advanced security & encryption",
-                "Priority 24/7 phone support",
-                "Multi-region deployment",
-                "Custom integrations",
-                "Weekly optimization reviews",
-                "Dedicated account manager",
-              ],
             },
             {
-              id: "enterprise",
+              id: "enterprise",              tag: "Enterprise Plan",              price: "Custom",              period: "/month",              description: "Tailored solutions for large-scale operations with premium support and custom requirements.",              button: {
-              tag: "Enterprise Plan",
+                text: "Contact Sales",                href: "/contact"},
-              price: "Custom",
+              featuresTitle: "What's Included:",              features: [
-              period: "/month",
+                "Unlimited everything",                "Unlimited data storage",                "Military-grade security",                "24/7 dedicated support team",                "Global infrastructure",                "Custom compliance frameworks",                "On-premise deployment options",                "SLA guarantees",                "Custom development services"],
-              description: "Tailored solutions for large-scale operations with premium support and custom requirements.",
-              button: {
-                text: "Contact Sales",
-                href: "/contact",
-              },
-              featuresTitle: "What's Included:",
-              features: [
-                "Unlimited everything",
-                "Unlimited data storage",
-                "Military-grade security",
-                "24/7 dedicated support team",
-                "Global infrastructure",
-                "Custom compliance frameworks",
-                "On-premise deployment options",
-                "SLA guarantees",
-                "Custom development services",
-              ],
             },
           ]}
           animationType="slide-up"

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-lobster-two), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-lobster-two), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #fefef9;
-  --card: #ffffff;
+  --card: #ba9e16;
-  --foreground: #250c0d;
+  --foreground: #291e00e6;
-  --primary-cta: #b82b40;
+  --primary-cta: #d4a000;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fffdf3;
-  --secondary-cta-text: #250c0d;
+  --secondary-cta-text: #291e00e6;
-  --accent: #b90941;
+  --accent: #e6d470;
-  --background-accent: #e8a8b6;
+  --background-accent: #f0e8c8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);