Update src/app/page.tsx

Merge version_18 into main

src/app/about/page.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, Twitter, Linkedin, Globe } from 'lucide-react';
+
+const AboutPage = () => {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Case Studies', id: '/case-studies' },
+    { name: 'FAQ', id: '/faq' },
+    { name: 'Services', id: '/#services' },
+    { name: 'Pricing', id: '/#pricing' },
+  ];
+
+  const companyStory = [
+    {
+      id: '1',
+      reverse: false,
+      media: (
+        <img
+          src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop"
+          alt="Company founding"
+          className="w-full h-full object-cover rounded-lg"
+        />
+      ),
+      content: (
+        <div className="space-y-4">
+          <h3 className="text-2xl font-bold">Our Foundation</h3>
+          <p className="text-gray-600">Temple AI was founded in 2020 with a simple mission: to make comprehensive digital solutions accessible to businesses of all sizes.</p>
+          <ul className="space-y-2 text-gray-600">
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Started with a team of 3 passionate developers</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>First client project launched within 6 months</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Rapidly grew to serve 50+ clients</span>
+            </li>
+          </ul>
+        </div>
+      )
+    },
+    {
+      id: '2',
+      reverse: true,
+      media: (
+        <img
+          src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop"
+          alt="Company growth"
+          className="w-full h-full object-cover rounded-lg"
+        />
+      ),
+      content: (
+        <div className="space-y-4">
+          <h3 className="text-2xl font-bold">Rapid Growth</h3>
+          <p className="text-gray-600">Our commitment to quality and innovation drove exponential growth and expansion into new service areas.</p>
+          <ul className="space-y-2 text-gray-600">
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Expanded team to 15+ professionals</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Launched AI-powered services</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Reached 200+ satisfied customers</span>
+            </li>
+          </ul>
+        </div>
+      )
+    },
+    {
+      id: '3',
+      reverse: false,
+      media: (
+        <img
+          src="https://images.unsplash.com/photo-1560264357-8d9766bed0e9?w=600&h=400&fit=crop"
+          alt="Company present day"
+          className="w-full h-full object-cover rounded-lg"
+        />
+      ),
+      content: (
+        <div className="space-y-4">
+          <h3 className="text-2xl font-bold">Today & Beyond</h3>
+          <p className="text-gray-600">We continue to innovate and lead the industry, setting new standards for digital excellence.</p>
+          <ul className="space-y-2 text-gray-600">
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Industry-leading customer satisfaction</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Trusted by Fortune 500 companies</span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-3">✓</span>
+              <span>Continuous innovation and expansion</span>
+            </li>
+          </ul>
+        </div>
+      )
+    }
+  ];
+
+  const teamMembers = [
+    {
+      id: '1',
+      name: 'Sarah Chen',
+      role: 'CEO & Founder',
+      imageSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+      imageAlt: 'Sarah Chen CEO'
+    },
+    {
+      id: '2',
+      name: 'Marcus Johnson',
+      role: 'CTO & Co-Founder',
+      imageSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+      imageAlt: 'Marcus Johnson CTO'
+    },
+    {
+      id: '3',
+      name: 'Elena Rodriguez',
+      role: 'Head of Design',
+      imageSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+      imageAlt: 'Elena Rodriguez Design Lead'
+    },
+    {
+      id: '4',
+      name: 'David Park',
+      role: 'Lead Developer',
+      imageSrc: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
+      imageAlt: 'David Park Developer'
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName="Temple AI"
+          button={{
+            text: 'Get Started',
+            href: 'https://example.com/signup'
+          }}
+        />
+      </div>
+
+      <div id="about-hero" data-section="about-hero">
+        <MediaAbout
+          title="About Temple AI"
+          description="We're on a mission to empower businesses with cutting-edge digital solutions and exceptional service."
+          tag="About Us"
+          tagIcon={Sparkles}
+          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
+          imageAlt="Temple AI team working together"
+          buttons={[
+            { text: 'Get Started', href: 'https://example.com/start' }
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="company-story" data-section="company-story">
+        <TimelineProcessFlow
+          title="Our Journey"
+          description="From a small startup to an industry leader, discover the milestones that shaped Temple AI."
+          tag="History"
+          textboxLayout="default"
+          animationType="slide-up"
+          items={companyStory}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne
+          members={teamMembers}
+          title="Meet Our Team"
+          description="Talented professionals dedicated to your success."
+          tag="Team"
+          textboxLayout="default"
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactText
+          text="Ready to Work With Us? Let's Build Something Great Together"
+          animationType="entrance-slide"
+          buttons={[
+            { text: 'Get Started', href: 'https://example.com/start' },
+            { text: 'Schedule Consultation', href: 'https://example.com/demo' }
+          ]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Temple AI"
+          copyrightText="© 2025 Temple AI. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: 'https://twitter.com/templeai', ariaLabel: 'Twitter' },
+            { icon: Linkedin, href: 'https://linkedin.com/company/templeai', ariaLabel: 'LinkedIn' },
+            { icon: Globe, href: 'https://templeai.com', ariaLabel: 'Website' }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default AboutPage;

src/app/blog/page.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, Twitter, Linkedin, Globe } from 'lucide-react';
+
+const BlogPage = () => {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Case Studies', id: '/case-studies' },
+    { name: 'FAQ', id: '/faq' },
+    { name: 'Services', id: '/#services' },
+    { name: 'Pricing', id: '/#pricing' },
+  ];
+
+  const blogPosts = [
+    {
+      id: '1',
+      category: 'Web Design',
+      title: 'The Future of Web Design in 2025',
+      excerpt: 'Explore the latest trends and technologies shaping the web design industry this year.',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop',
+      imageAlt: 'Web design trends',
+      authorName: 'Sarah Chen',
+      authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
+      date: 'Jan 15, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    },
+    {
+      id: '2',
+      category: 'Digital Marketing',
+      title: 'AI-Powered Marketing Automation',
+      excerpt: 'How artificial intelligence is revolutionizing marketing strategies and customer engagement.',
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop',
+      imageAlt: 'AI marketing',
+      authorName: 'Marcus Johnson',
+      authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
+      date: 'Jan 12, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    },
+    {
+      id: '3',
+      category: 'Business Strategy',
+      title: 'Scaling Your Business: A Complete Guide',
+      excerpt: 'Essential strategies and best practices for growing your business sustainably.',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+      imageAlt: 'Business scaling',
+      authorName: 'Elena Rodriguez',
+      authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
+      date: 'Jan 10, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    },
+    {
+      id: '4',
+      category: 'Technology',
+      title: 'Web Development Best Practices 2025',
+      excerpt: 'Modern standards and techniques for building robust, scalable web applications.',
+      imageSrc: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop',
+      imageAlt: 'Web development',
+      authorName: 'David Park',
+      authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
+      date: 'Jan 8, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    },
+    {
+      id: '5',
+      category: 'Branding',
+      title: 'Building a Strong Brand Identity',
+      excerpt: 'Steps to create a cohesive and memorable brand that resonates with your audience.',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop',
+      imageAlt: 'Brand identity',
+      authorName: 'Sarah Chen',
+      authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
+      date: 'Jan 5, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    },
+    {
+      id: '6',
+      category: 'Analytics',
+      title: 'Understanding Your Data: A Guide to Analytics',
+      excerpt: 'Learn how to leverage data analytics to make informed business decisions.',
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop',
+      imageAlt: 'Data analytics',
+      authorName: 'Marcus Johnson',
+      authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
+      date: 'Jan 1, 2025',
+      onBlogClick: () => window.open('#', '_blank')
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName="Temple AI"
+          button={{
+            text: 'Get Started',
+            href: 'https://example.com/signup'
+          }}
+        />
+      </div>
+
+      <div id="blog-hero" data-section="blog-hero" className="py-20">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <h1 className="text-5xl font-bold mb-4">Our Blog</h1>
+          <p className="text-xl text-gray-600">Insights, tips, and stories from our team of experts.</p>
+        </div>
+      </div>
+
+      <div id="blog-posts" data-section="blog-posts">
+        <BlogCardThree
+          blogs={blogPosts}
+          title="Latest Articles"
+          description="Explore our collection of insights on web design, marketing, and business growth."
+          tag="Blog"
+          tagIcon={Sparkles}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactText
+          text="Stay Updated with Our Latest Insights"
+          animationType="entrance-slide"
+          buttons={[
+            { text: 'Subscribe to Newsletter', href: 'https://example.com/subscribe' }
+          ]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Temple AI"
+          copyrightText="© 2025 Temple AI. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: 'https://twitter.com/templeai', ariaLabel: 'Twitter' },
+            { icon: Linkedin, href: 'https://linkedin.com/company/templeai', ariaLabel: 'LinkedIn' },
+            { icon: Globe, href: 'https://templeai.com', ariaLabel: 'Website' }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default BlogPage;

src/app/case-studies/page.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, Twitter, Linkedin, Globe } from 'lucide-react';
+
+const CaseStudiesPage = () => {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Case Studies', id: '/case-studies' },
+    { name: 'FAQ', id: '/faq' },
+    { name: 'Services', id: '/#services' },
+    { name: 'Pricing', id: '/#pricing' },
+  ];
+
+  const caseStudies = [
+    {
+      id: '1',
+      title: 'E-Commerce Transformation',
+      description: 'Increased online sales by 300% through complete website redesign and digital marketing strategy for a leading retail brand.',
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop',
+      imageAlt: 'E-commerce transformation case study'
+    },
+    {
+      id: '2',
+      title: 'SaaS Growth Campaign',
+      description: 'Helped a B2B SaaS company acquire 500+ enterprise clients through targeted advertising and content marketing.',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+      imageAlt: 'SaaS growth case study'
+    },
+    {
+      id: '3',
+      title: 'Brand Relaunch Success',
+      description: 'Complete brand identity overhaul resulting in 250% increase in brand awareness and customer engagement.',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop',
+      imageAlt: 'Brand relaunch case study'
+    },
+    {
+      id: '4',
+      title: 'Mobile App Launch',
+      description: 'Developed and launched a mobile app that reached 100k downloads in the first month with exceptional user ratings.',
+      imageSrc: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop',
+      imageAlt: 'Mobile app launch case study'
+    },
+    {
+      id: '5',
+      title: 'Startup Scaling',
+      description: 'Scaled a startup from 0 to $10M ARR in 2 years through strategic digital solutions and market positioning.',
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop',
+      imageAlt: 'Startup scaling case study'
+    },
+    {
+      id: '6',
+      title: 'Enterprise Integration',
+      description: 'Successfully integrated AI solutions across all customer touchpoints for a Fortune 500 company.',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+      imageAlt: 'Enterprise integration case study'
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName="Temple AI"
+          button={{
+            text: 'Get Started',
+            href: 'https://example.com/signup'
+          }}
+        />
+      </div>
+
+      <div id="case-studies-hero" data-section="case-studies-hero" className="py-20">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <h1 className="text-5xl font-bold mb-4">Case Studies</h1>
+          <p className="text-xl text-gray-600">Real results from real clients. See how we've transformed businesses across industries.</p>
+        </div>
+      </div>
+
+      <div id="case-studies-grid" data-section="case-studies-grid">
+        <FeatureCardThree
+          features={caseStudies}
+          title="Project Showcases"
+          description="Discover the impact we've made for our clients through strategic digital solutions."
+          tag="Case Studies"
+          tagIcon={Sparkles}
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactText
+          text="Ready to Transform Your Business? Let's Create Your Success Story"
+          animationType="entrance-slide"
+          buttons={[
+            { text: 'Get Started', href: 'https://example.com/start' },
+            { text: 'Schedule Consultation', href: 'https://example.com/demo' }
+          ]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Temple AI"
+          copyrightText="© 2025 Temple AI. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: 'https://twitter.com/templeai', ariaLabel: 'Twitter' },
+            { icon: Linkedin, href: 'https://linkedin.com/company/templeai', ariaLabel: 'LinkedIn' },
+            { icon: Globe, href: 'https://templeai.com', ariaLabel: 'Website' }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default CaseStudiesPage;

src/app/faq/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Sparkles, Twitter, Linkedin, Globe } from 'lucide-react';
+
+const FAQPage = () => {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Blog', id: '/blog' },
+    { name: 'Case Studies', id: '/case-studies' },
+    { name: 'FAQ', id: '/faq' },
+    { name: 'Services', id: '/#services' },
+    { name: 'Pricing', id: '/#pricing' },
+  ];
+
+  const faqItems = [
+    {
+      id: '1',
+      title: 'What services does Temple AI offer?',
+      content: 'Temple AI offers a comprehensive suite of digital services including website design and branding, consulting and strategy, advertising services, social media management, AI-powered automation, and bundled enterprise packages. We customize solutions to fit your specific business needs.'
+    },
+    {
+      id: '2',
+      title: 'How much do your services cost?',
+      content: 'Our pricing varies based on the scope and complexity of your project. We offer flexible service plans ranging from $999/month for AI automation to $4,999/month for our complete enterprise bundle. Each package is customizable. Contact our sales team for a personalized quote.'
+    },
+    {
+      id: '3',
+      title: 'What is your typical project timeline?',
+      content: 'Project timelines depend on the scope of work. Website design projects typically take 6-12 weeks, while consulting engagements can begin immediately. We provide detailed timelines during the discovery phase and maintain regular communication throughout the project.'
+    },
+    {
+      id: '4',
+      title: 'Do you offer ongoing support?',
+      content: 'Yes, we offer comprehensive ongoing support with all our services. This includes maintenance, updates, optimization, and 24/7 monitoring for enterprise clients. Our support team is always available to help you succeed.'
+    },
+    {
+      id: '5',
+      title: 'Can you integrate with existing systems?',
+      content: 'Absolutely. We specialize in integrating our solutions with existing business systems and platforms. Our team has expertise with popular tools, CRMs, and custom systems to ensure seamless integration with minimal disruption.'
+    },
+    {
+      id: '6',
+      title: 'How do you measure success?',
+      content: 'We establish clear KPIs at the beginning of each project and provide regular analytics and reporting. Success metrics vary by service (e.g., website traffic, conversion rates, engagement metrics, ROI) and are tracked throughout the engagement.'
+    },
+    {
+      id: '7',
+      title: 'What is your team composition?',
+      content: 'Our team includes experienced strategists, designers, developers, digital marketers, and AI specialists. Each project is assigned a dedicated team with the right expertise to deliver exceptional results.'
+    },
+    {
+      id: '8',
+      title: 'How do I get started?',
+      content: 'Getting started is easy! Simply visit our Get Started page, fill out a brief form about your project, and one of our team members will contact you within 24 hours to discuss your needs and explore how we can help.'
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName="Temple AI"
+          button={{
+            text: 'Get Started',
+            href: 'https://example.com/signup'
+          }}
+        />
+      </div>
+
+      <div id="faq-section" data-section="faq-section">
+        <FaqSplitMedia
+          faqs={faqItems}
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our services, pricing, and process."
+          tag="Help"
+          tagIcon={Sparkles}
+          imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
+          imageAlt="Customer support representative"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          mediaPosition="left"
+          faqsAnimation="slide-up"
+          animationType="smooth"
+          mediaAnimation="none"
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactText
+          text="Still Have Questions? Get in Touch with Our Team"
+          animationType="entrance-slide"
+          buttons={[
+            { text: 'Contact Us', href: 'https://example.com/contact' },
+            { text: 'Schedule Call', href: 'https://example.com/schedule' }
+          ]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Temple AI"
+          copyrightText="© 2025 Temple AI. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: 'https://twitter.com/templeai', ariaLabel: 'Twitter' },
+            { icon: Linkedin, href: 'https://linkedin.com/company/templeai', ariaLabel: 'LinkedIn' },
+            { icon: Globe, href: 'https://templeai.com', ariaLabel: 'Website' }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default FAQPage;

src/app/layout.tsx

@@ -1,11 +1,17 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Nunito_Sans } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+
 
 export const metadata: Metadata = {
-  title: "Mindex AI",  description: "Intelligent marketing automation powered by advanced AI"};
+  title: "Temple AI",  description: "Comprehensive Business Solutions - Digital Services, Web Design, Branding, and AI Automation"};
+
+const nunitoSans = Nunito_Sans({
+  variable: "--font-nunito-sans",
+  subsets: ["latin"],
+});
 
 export default function RootLayout({
   children,
@@ -13,8 +19,23 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+              } else {
+                document.documentElement.classList.remove('dark')
+              }
+            `,
+          }}
+        />
+      </head>
+      <body suppressHydrationWarning className={`${nunitoSans.variable} antialiased`}>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -256,9 +277,7 @@ export default function RootLayout({
   const getElementInfo = (element, assignId = false) => {
     const rect = element.getBoundingClientRect();
     const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
+            
     let className = undefined;
     try {
       if (element.className) {
@@ -286,8 +305,7 @@ export default function RootLayout({
     };
     
     if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
+            info.imageData = {
         src: originalSrc,
         alt: element.alt || undefined,
         naturalWidth: element.naturalWidth,
@@ -298,8 +316,7 @@ export default function RootLayout({
 
     if (tagName === 'video') {
       const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
+            info.imageData = {
         src: resolvedSrc,
         alt: element.getAttribute('aria-label') || undefined,
         isBackground: false,
@@ -312,8 +329,7 @@ export default function RootLayout({
     if (backgroundImage && backgroundImage !== 'none') {
       const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
       if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
+                if (tagName !== 'img') {
           info.imageData = {
             src: originalBgSrc,
             isBackground: true
@@ -325,8 +341,7 @@ export default function RootLayout({
       }
     }
     
-    const elementType = getElementType(element);
-    info.elementType = elementType;
+        info.elementType = elementType;
     
     if (elementType === 'Button') {
       const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -419,13 +434,11 @@ export default function RootLayout({
   };
 
   const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
+        return elementType === 'Text';
   };
 
   const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
+        return elementType === 'Button';
   };
 
   const updateButtonText = (element, newText) => {
@@ -500,8 +513,7 @@ export default function RootLayout({
     };
     
     const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
+            let currentText = element.textContent;
       
       // Ensure there's always at least a space to keep the element editable
       if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -614,8 +626,7 @@ export default function RootLayout({
     }, '*');
     
     if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
+            let finalText = element.textContent;
       
       // Trim the final text and convert space-only to empty string for saving
       if (finalText === ' ' || finalText.trim() === '') {
@@ -744,7 +755,7 @@ export default function RootLayout({
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
 
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+    || e.target;
 
     if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
       return;
@@ -776,8 +787,7 @@ export default function RootLayout({
       hoverOverlay = createHoverOverlay(target);
     }
     
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
+        showElementTypeLabel(target, elementType);
     
     window.parent.postMessage({
       type: 'webild-element-hover',
@@ -819,7 +829,7 @@ export default function RootLayout({
   e.preventDefault();
   e.stopPropagation();
 
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  || e.target;  
   if (!isValidElement(target)) return;
     
     if (selectedElement && selectedElement !== target) {
@@ -864,8 +874,7 @@ export default function RootLayout({
       hoveredElement = null;
     }
     
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
+        selectedElement.dataset.webildSelector = elementInfo.selector;
     showElementTypeLabel(target, elementInfo.elementType);
     
     window.parent.postMessage({
@@ -948,8 +957,7 @@ export default function RootLayout({
       isScrolling = false;
 
       if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
+                if (target && isValidElement(target) && target !== selectedElement) {
           hoveredElement = target;
 
           const computedStyle = window.getComputedStyle(target);
@@ -963,8 +971,7 @@ export default function RootLayout({
           hoveredElement.classList.add(hoverClass);
           hoverOverlay = createHoverOverlay(target);
 
-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
+                    showElementTypeLabel(target, elementType);
 
           window.parent.postMessage({
             type: 'webild-element-hover',
@@ -987,8 +994,7 @@ export default function RootLayout({
 
   const saveChangeToStorage = (change) => {
     try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+            const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
 
       const filteredChanges = existingChanges.filter(c => {
         return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1008,8 +1014,7 @@ export default function RootLayout({
 
   const clearLocalChanges = () => {
     try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
+            localStorage.removeItem(storageKey);
       window.parent.postMessage({
         type: 'webild-local-changes-cleared',
         data: {}
@@ -1058,8 +1063,7 @@ export default function RootLayout({
 
     if (e.data.type === 'webild-cancel-changes') {
       try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
+                const savedChanges = localStorage.getItem(storageKey);
         if (savedChanges) {
           const changes = JSON.parse(savedChanges);
           changes.forEach(change => {
@@ -1081,8 +1085,7 @@ export default function RootLayout({
                 if (isBackground) {
                   element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                 } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
+                                    if (revertTag === 'video' && oldMediaType === 'image') {
                     swapMediaElement(element, 'img', change.oldValue);
                   } else if (revertTag === 'img' && oldMediaType === 'video') {
                     swapMediaElement(element, 'video', change.oldValue);
@@ -1130,8 +1133,7 @@ export default function RootLayout({
               const el = textElements[i];
               if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
                 element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
+                                if (newSelector) {
                   element.dataset.webildSelector = newSelector;
                 }
                 break;
@@ -1222,10 +1224,8 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
+                    if (newMediaType === 'video' && allowMediaTypeSwap) {
+                        if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             element.src = newSrc;
@@ -1233,11 +1233,9 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'video') {
           oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
+                    const sources = element.querySelectorAll('source');
           if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
+                        if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             if (sources.length > 0) {
@@ -1259,8 +1257,7 @@ export default function RootLayout({
         }
 
         if (replaced) {
-          const elementInfo = getElementInfo(element);
-
+          
           let cleanOldValue = oldValue;
           if (oldValue.includes('url(')) {
             const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1331,13 +1328,7 @@ export default function RootLayout({
     }
   }, true);
   
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
+    
   notifyPageChange();
   
   window.webildCleanup = () => {

src/app/page.tsx

@@ -1,222 +1,404 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import TextAbout from '@/components/sections/about/TextAbout';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { CheckCircle, TrendingUp, Users, Zap } from 'lucide-react';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactText from '@/components/sections/contact/ContactText';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import { Sparkles, TrendingUp, Zap, Shield, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Twitter, Linkedin, Globe, Check } from 'lucide-react';
+
+const page = () => {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Services', id: '#services' },
+    { name: 'Gallery', id: '#gallery' },
+    { name: 'Process', id: '#process' },
+    { name: 'Testimonials', id: '#testimonials' },
+    { name: 'Pricing', id: '#pricing' },
+  ];
+
+  const services = [
+    {
+      id: '01',
+      title: 'Website & Branding',
+      description: 'Build a stunning online presence with custom website design and cohesive branding that represents your business.',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=1',
+      imageAlt: 'Website and branding design'
+    },
+    {
+      id: '02',
+      title: 'Consulting & Strategy',
+      description: 'Strategic guidance from industry experts to help you achieve your business goals and maximize growth.',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1',
+      imageAlt: 'Consulting and strategy session'
+    },
+    {
+      id: '03',
+      title: 'Advertising Services',
+      description: 'Targeted advertising campaigns that reach your audience and drive measurable results across multiple channels.',
+      imageSrc: 'http://img.b2bpic.net/free-photo/i-always-feel-relieved-after-session-with-you_637285-9953.jpg?id=26644593',
+      imageAlt: 'Advertising services dashboard'
+    },
+    {
+      id: '04',
+      title: 'Social Media Management',
+      description: 'Engage your audience with compelling content, community management, and strategic social media presence.',
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop&_wi=1',
+      imageAlt: 'Social media management tools'
+    },
+    {
+      id: '05',
+      title: 'AI Call Assistant & Automation',
+      description: 'Streamline your operations with intelligent call handling and automation to improve customer service and efficiency.',
+      imageSrc: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65b?w=800&h=600&fit=crop',
+      imageAlt: 'AI call assistant interface'
+    },
+    {
+      id: '06',
+      title: 'Bundled Packages',
+      description: 'Comprehensive service bundles combining multiple solutions for maximum value and seamless integration.',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Bundled service packages'
+    }
+  ];
+
+  const galleryItems = [
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Website redesign showcase'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1',
+      imageAlt: 'Brand identity project'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Marketing campaign results'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Social media strategy implementation'
+    }
+  ];
+
+  const testimonials = [
+    {
+      id: '1',
+      title: 'Transformed Our Business',
+      quote: 'Temple AI transformed our entire online presence. The website design and branding strategy were exceptional. They truly understood our vision.',
+      name: 'Sarah Mitchell',
+      role: 'CEO of Digital Solutions Inc',
+      imageSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+      imageAlt: 'Sarah Mitchell headshot'
+    },
+    {
+      id: '2',
+      title: 'Outstanding Service Quality',
+      quote: "The consulting and strategy guidance from Temple AI helped us scale our business efficiently. Their expertise is invaluable and their support is exceptional.",      name: 'Marcus Johnson',
+      role: 'Director of Operations at GrowthCo',
+      imageSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+      imageAlt: 'Marcus Johnson headshot'
+    },
+    {
+      id: '3',
+      title: 'Perfect Marketing Partner',
+      quote: 'Our social media presence and advertising campaigns have never been better. Temple AI delivered measurable results and consistent growth in engagement.',
+      name: 'Elena Chen',
+      role: 'Marketing Manager at BrandConnect',
+      imageSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+      imageAlt: 'Elena Chen headshot'
+    }
+  ];
+
+  const pricingPlans = [
+    {
+      id: '1',
+      badge: 'Website & Branding',
+      badgeIcon: Sparkles,
+      price: '$2,999',
+      subtitle: 'Professional website design and complete branding package',
+      buttons: [
+        { text: 'Get Started', href: 'https://example.com/start' },
+        { text: 'Learn More', href: 'https://example.com/docs' }
+      ],
+      features: [
+        'Custom website design',
+        'Brand identity and logo',
+        'Responsive design',
+        'SEO optimization',
+        '3 rounds of revisions'
+      ]
+    },
+    {
+      id: '2',
+      badge: 'Consulting & Strategy',
+      badgeIcon: TrendingUp,
+      price: '$1,999/mo',
+      subtitle: 'Expert consulting and strategic business guidance',
+      buttons: [
+        { text: 'Get Started', href: 'https://example.com/start' },
+        { text: 'Contact Sales', href: 'https://example.com/sales' }
+      ],
+      features: [
+        'Business strategy sessions',
+        'Expert consulting',
+        'Growth planning',
+        'Monthly strategy reviews',
+        'Implementation support'
+      ]
+    },
+    {
+      id: '3',
+      badge: 'Advertising Services',
+      badgeIcon: Zap,
+      price: '$1,499/mo',
+      subtitle: 'Targeted advertising campaigns across multiple channels',
+      buttons: [
+        { text: 'Get Started', href: 'https://example.com/start' },
+        { text: 'View Cases', href: 'https://example.com/cases' }
+      ],
+      features: [
+        'Multi-channel advertising',
+        'Campaign management',
+        'Performance tracking',
+        'Monthly analytics reports',
+        'Ad optimization'
+      ]
+    },
+    {
+      id: '4',
+      badge: 'Social Media Management',
+      badgeIcon: TrendingUp,
+      price: '$1,499/mo',
+      subtitle: 'Complete marketing and social media management',
+      buttons: [
+        { text: 'Get Started', href: 'https://example.com/start' },
+        { text: 'Contact Sales', href: 'https://example.com/sales' }
+      ],
+      features: [
+        'Social media management',
+        'Content creation and posting',
+        'Community engagement',
+        'Monthly analytics reports',
+        'Paid advertising management'
+      ]
+    },
+    {
+      id: '5',
+      badge: 'AI Call Assistant & Automation',
+      badgeIcon: Hexagon,
+      price: '$999/mo',
+      subtitle: 'Intelligent call handling and business automation',
+      buttons: [
+        { text: 'Get Started', href: 'https://example.com/start' },
+        { text: 'Schedule Demo', href: 'https://example.com/demo' }
+      ],
+      features: [
+        'AI call assistant',
+        'Automated workflows',
+        'Call analytics',
+        'Integration support',
+        '24/7 monitoring'
+      ]
+    },
+    {
+      id: '6',
+      badge: 'Bundled Enterprise',
+      badgeIcon: Shield,
+      price: '$4,999/mo',
+      subtitle: 'Complete solution with all Temple AI services',
+      buttons: [
+        { text: 'Schedule Demo', href: 'https://example.com/demo' },
+        { text: 'Contact Us', href: 'https://example.com/contact' }
+      ],
+      features: [
+        'Website & branding',
+        'Consulting & strategy',
+        'Advertising services',
+        'Social media management',
+        'AI call assistant',
+        'Dedicated account manager',
+        '24/7 support'
+      ]
+    }
+  ];
+
+  const processMediaItems = [
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop',
+      imageAlt: 'Step 1: Strategy'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
+      imageAlt: 'Step 2: Implementation'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=600&h=400&fit=crop',
+      imageAlt: 'Step 3: Results'
+    }
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="large"
-      background="blurBottom"
-      cardStyle="outline"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="normal"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "About", id: "about" },
-            { name: "Features", id: "features" },
-            { name: "Services", id: "services" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{ text: "Get Started", href: "contact" }}
-          brandName="Mindex AI"
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName=""
+          button={{
+            text: 'Get Started',
+            href: 'https://example.com/signup'
+          }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Mindex AI"
-          description="Intelligent marketing automation powered by advanced AI. Generate compelling campaigns, optimize performance, and engage customers with unprecedented precision."
+        <HeroCarouselLogo
+          logoText="TEMPLE AI"
+          description="Transform your business with our comprehensive suite of digital services designed to drive growth and innovation."
           buttons={[
-            { text: "Get Free Trial", href: "contact" },
-            { text: "See AI in Action", href: "features" }
+            { text: 'Get Started', href: 'https://example.com/start' },
+            { text: 'View Services', href: '#services' }
+          ]}
+          slides={[
+            { imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop' },
+            { imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2' },
+            { imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop' }
           ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/a-sleek-ai-dashboard-interface-with-clea-1772922867643-9c49e8f2.png"
-          imageAlt="Mindex AI marketing dashboard interface"
-          mediaAnimation="slide-up"
-          frameStyle="card"
-          ariaLabel="Mindex AI hero section"
         />
       </div>
 
-      <div id="about" data-section="about">
-        <TextAbout
-          tag="About Mindex"
-          title="Marketing automation designed for modern teams. Powered by AI you can trust."
-          buttons={[{ text: "Learn More", href: "features" }]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-          ariaLabel="About Mindex section"
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureCardTwentySeven
-          tag="Core Features"
-          title="Intelligent marketing at your fingertips"
-          description="Mindex combines cutting-edge AI with intuitive design to transform how you create and manage marketing campaigns."
-          features={[
-            {
-              id: "1",              title: "AI Content Generation",              description: "Create high-performing copy, email sequences, and social media content in seconds. Our AI learns your brand voice and optimizes every message for maximum impact. Trusted by 10,000+ marketing teams worldwide.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/an-illustration-of-ai-powered-content-wr-1772922867411-058f6b7f.png",              imageAlt: "AI-powered content writing interface"
-            },
-            {
-              id: "2",              title: "Real-Time Analytics",              description: "Track campaign performance with beautiful, actionable dashboards. Get instant insights on engagement, conversions, and ROI to make smarter decisions faster. SOC 2 Type II certified for enterprise security.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/clean-analytics-visualization-showing-ma-1772922870473-7fb1d649.png",              imageAlt: "Analytics dashboard with performance metrics"
-            },
-            {
-              id: "3",              title: "Intelligent Personalization",              description: "Deliver the right message to the right person at the right time. Our AI engine personalizes every customer interaction based on behavior and preferences. Proven to increase conversions by 3.2x on average.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/visual-representation-of-ai-powered-pers-1772922867144-6bf417b1.png",              imageAlt: "Customer personalization engine visualization"
-            }
-          ]}
+      <div id="services" data-section="services">
+        <FeatureCardThree
+          features={services}
+          title="Our Services"
+          description="Complete digital solutions designed to grow your business."
+          tag="Services"
+          tagIcon={Zap}
+          textboxLayout="default"
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "Explore All Features", href: "contact" }]}
-          buttonAnimation="slide-up"
-          ariaLabel="Features section"
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardThree
-          tag="By The Numbers"
-          title="Proven results for forward-thinking teams"
-          description="Mindex is trusted by leading companies to deliver measurable marketing impact."
-          metrics={[
-            { id: "1", icon: Zap, title: "Time Saved", value: "65%" },
-            { id: "2", icon: TrendingUp, title: "Conversions", value: "+3.2x" },
-            { id: "3", icon: Users, title: "Active Users", value: "10,000+" },
-            { id: "4", icon: CheckCircle, title: "Success Rate", value: "98%" }
-          ]}
-          animationType="slide-up"
+      <div id="gallery" data-section="gallery">
+        <HeroBillboardGallery
+          title="Our Work"
+          description="Showcase of our latest projects and creative solutions."
+          tag="Gallery"
+          tagIcon={Sparkles}
+          mediaItems={galleryItems}
+          background={{ variant: 'plain' }}
+          mediaAnimation="none"
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <TimelineHorizontalCardStack
+          title="Our Process"
+          description="Follow our proven step-by-step approach to delivering excellence."
+          tag="How It Works"
+          tagIcon={TrendingUp}
+          textboxLayout="default"
+          mediaItems={processMediaItems}
+        >
+          <div>
+            <h3 className="font-bold text-lg">Strategy & Planning</h3>
+            <p className="text-sm text-gray-600">We understand your goals and create a comprehensive strategy tailored to your needs.</p>
+          </div>
+          <div>
+            <h3 className="font-bold text-lg">Implementation</h3>
+            <p className="text-sm text-gray-600">Our expert team executes the plan with precision and attention to detail.</p>
+          </div>
+          <div>
+            <h3 className="font-bold text-lg">Results & Growth</h3>
+            <p className="text-sm text-gray-600">Measure success through analytics and continuous optimization for sustained growth.</p>
+          </div>
+        </TimelineHorizontalCardStack>
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTen
+          testimonials={testimonials}
+          title="Trusted by Business Leaders"
+          description="See what our clients have to say about Temple AI's services."
+          tag="Testimonials"
+          tagIcon={Shield}
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "See Case Studies", href: "contact" }]}
-          buttonAnimation="slide-up"
-          ariaLabel="Metrics section"
         />
       </div>
 
       <div id="social-proof" data-section="social-proof">
         <SocialProofOne
-          tag="Trusted Partners"
-          title="Partnered with industry leaders"
-          description="Mindex integrates seamlessly with the tools your team already loves."
-          names={["HubSpot", "Salesforce", "Google Analytics", "Microsoft Teams", "Stripe", "Intercom", "Segment"]}
+          title="Trusted by Leading Companies"
+          description="Join hundreds of organizations using Temple AI for business growth."
+          tag="Partners"
           textboxLayout="default"
           useInvertedBackground={false}
+          names={['Tech Innovators', 'Growth Partners', 'Digital Leaders', 'Marketing Experts', 'Brand Builders', 'Success Hub']}
           speed={40}
           showCard={true}
-          ariaLabel="Social proof section"
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTen
-          tag="Customer Stories"
-          title="Trusted by innovative marketing teams"
-          description="See how leading companies are transforming their marketing with Mindex AI."
-          testimonials={[
-            {
-              id: "1",              title: "Time-saving powerhouse for our team",              quote: "Mindex has completely transformed how we approach content creation. What used to take hours now takes minutes, and the quality is consistently excellent. Our team has never been more productive.",              name: "Sarah Mitchell",              role: "VP of Marketing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/professional-headshot-portrait-of-a-conf-1772922866372-6a95b974.png",              imageAlt: "Sarah Mitchell"
-            },
-            {
-              id: "2",              title: "Exceptional AI that truly understands marketing",              quote: "The personalization engine is genuinely impressive. We've seen a 3x improvement in conversion rates since implementing Mindex. The AI actually learns from our campaigns and gets smarter over time.",              name: "David Chen",              role: "Chief Marketing Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/professional-headshot-portrait-of-a-mark-1772922866645-4ed6920a.png",              imageAlt: "David Chen"
-            },
-            {
-              id: "3",              title: "Clean interface, powerful capabilities",              quote: "We were skeptical about AI marketing tools, but Mindex proved us wrong. The interface is intuitive, the support is excellent, and the results speak for themselves. Highly recommended.",              name: "Emma Rodriguez",              role: "Marketing Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/professional-headshot-portrait-of-a-busi-1772922868018-a696136d.png",              imageAlt: "Emma Rodriguez"
-            },
-            {
-              id: "4",              title: "The future of marketing automation",              quote: "Mindex isn't just another marketing tool—it's a game-changer. The AI insights have helped us identify new audience segments and opportunities we never knew existed. ROI has improved dramatically.",              name: "James Wilson",              role: "Growth Lead",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/professional-headshot-portrait-of-a-grow-1772922866622-b913c51b.png",              imageAlt: "James Wilson"
-            }
-          ]}
+      <div id="pricing" data-section="pricing">
+        <PricingCardTwo
+          plans={pricingPlans}
+          title="Flexible Service Plans"
+          description="Choose the perfect package for your business needs."
+          tag="Pricing"
+          tagIcon={CircleDollarSign}
           textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={false}
-          ariaLabel="Testimonials section"
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqDouble
-          tag="FAQ"
-          title="Common questions answered"
-          description="Everything you need to know about Mindex AI and how it can transform your marketing."
-          faqs={[
-            {
-              id: "1",              title: "How does Mindex AI learn my brand voice?",              content: "Mindex uses advanced machine learning to analyze your existing marketing content, brand guidelines, and customer interactions. Our AI engine develops a nuanced understanding of your unique voice and tone, ensuring all generated content aligns perfectly with your brand identity."
-            },
-            {
-              id: "2",              title: "Is my marketing data secure?",              content: "Security is paramount. All data is encrypted end-to-end and stored on secure, compliant servers. We maintain SOC 2 Type II certification and comply with GDPR, CCPA, and other major data protection regulations."
-            },
-            {
-              id: "3",              title: "Can I integrate Mindex with existing tools?",              content: "Yes! Mindex seamlessly integrates with HubSpot, Salesforce, Google Analytics, Microsoft Teams, Stripe, Intercom, Segment, and more. Our API also allows for custom integrations with any platform."
-            },
-            {
-              id: "4",              title: "What kind of support does Mindex offer?",              content: "We provide 24/7 email support for all plans, plus phone and live chat support for premium customers. Every customer gets access to our comprehensive knowledge base, video tutorials, and monthly webinars."
-            },
-            {
-              id: "5",              title: "How quickly will I see results?",              content: "Most customers see measurable improvements within the first 2 weeks. Early wins typically include faster content creation and better email open rates. Long-term benefits like improved conversions and customer lifetime value typically emerge over 2-3 months."
-            },
-            {
-              id: "6",              title: "Is there a free trial available?",              content: "Absolutely! Start with our free trial and get full access to core features for 14 days. No credit card required. Premium features can be accessed during the trial period at no cost."
-            }
-          ]}
-          animationType="smooth"
-          faqsAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          ariaLabel="FAQ section"
+          carouselMode="buttons"
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplitForm
-          title="Ready to transform your marketing?"
-          description="Join thousands of marketing teams using Mindex AI to create better campaigns, faster. Get started today with a free 14-day trial."
-          inputs={[
-            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
-            { name: "workEmail", type: "email", placeholder: "Work Email", required: true },
-            { name: "companyName", type: "text", placeholder: "Company Name", required: true },
-            { name: "teamSize", type: "text", placeholder: "Team Size (e.g., 5-10)" }
+        <ContactText
+          text="Transform Your Business Today—Start Your Journey with Temple AI"
+          animationType="entrance-slide"
+          buttons={[
+            { text: 'Get Started', href: 'https://example.com/start' },
+            { text: 'Schedule Consultation', href: 'https://example.com/demo' }
           ]}
-          textarea={{ name: "message", placeholder: "Tell us about your marketing goals and how Mindex can help", rows: 5, required: false }}
+          background={{ variant: 'plain' }}
           useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdWCGTUmxjPQZM4XzNfED6RccT/minimalist-illustration-of-a-person-work-1772922867378-7e63e6ba.png"
-          imageAlt="Customer support and collaboration illustration"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          buttonText="Start Free Trial"
-          ariaLabel="Contact section"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterLogoReveal
-          logoText="Mindex"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
-          ariaLabel="Site footer"
+        <FooterCard
+          logoText="Temple AI"
+          copyrightText="© 2025 Temple AI. All rights reserved."
+          socialLinks={[
+            { icon: Twitter, href: 'https://twitter.com/templeai', ariaLabel: 'Twitter' },
+            { icon: Linkedin, href: 'https://linkedin.com/company/templeai', ariaLabel: 'LinkedIn' },
+            { icon: Globe, href: 'https://templeai.com', ariaLabel: 'Website' }
+          ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default page;

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #ffffff;
   --card: #f9f9f9;
   --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);