Add article page & blog section

src/components/Article.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export const Article = ({ articleData }) => {
+  const { title, subtitle, date, image, content, footer } = articleData;
+  return (
+    <main className="flex justify-center bg-bgDark2 relative pt-2">
+      <div className="px-4">
+        <article className=" p-8 text-center rounded-3xl max-w-[70vw] my-24">
+          <header className="mb-12">
+            <div className="text-sm text-customGrayText my-4">{date}</div>
+            <h1 className="text-[3.5rem] font-bold text-white mb-4">{title}</h1>
+            <p className="text-lg text-customGrayText mb-4">{subtitle}</p>
+          </header>
+          <img
+            src={image}
+            alt={title}
+            className="rounded-3xl mb-8 w-3/4 mx-auto mt-8"
+          />
+          <section
+            className="text-customGrayText leading-loose text-xl text-justify mx-auto w-2/3 mt-16"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+          <div className="w-2/3 text-right mx-auto mt-8 text-white text-xl">{footer}</div>
+        </article>
+      </div>
+    </main>
+  );
+};

src/components/Blog.jsx

@@ -0,0 +1,93 @@
+import { motion } from "framer-motion";
+
+import blog1 from "../assets/images/blog1.jpg";
+import blog2 from "../assets/images/blog2.jpg";
+import blog3 from "../assets/images/blog3.jpg";
+
+const blogData = [
+  {
+    title: "AI and Machine Learning",
+    subtitle:
+      "Discover insights and trends in the world of data analytics. Delve into how AI and machine learning are revolutionizing industries",
+    image: blog1.src,
+  },
+  {
+    title: "Data-Driven Analytics",
+    subtitle: "Explore the impact of AI and ML on data analytics.",
+    image: blog2.src,
+  },
+  {
+    title: "Real-Time Data Processing",
+    subtitle: "Learn about the importance of processing real-time.",
+    image: blog3.src,
+  },
+];
+
+export const Blog = () => (
+  <section className="w-screen flex justify-center bg-bgDark2 relative ">
+    <div className="absolute -top-16" id="blog" />
+    <div className="pb-0 pt-4 bg-bgDark2 2xl:w-[1200px] lg:w-[1050px] md:w-4/5 ">
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5, delay: 0.2 }}
+      >
+        <div className="container px-4 mb-20">
+          <div className="max-w-2xl text-left mb-16">
+            <span className="block-subtitle">Our Blog</span>
+            <h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
+              Latest Insights
+            </h2>
+            <p className="mb-6 text-customGrayText">
+              Stay updated with the latest trends and insights in our industry.
+            </p>
+          </div>
+          <div className="flex flex-wrap -mx-4 items-start  h-[35rem]">
+            <div className="w-full lg:w-3/5 px-4 mb-8 lg:mb-0  h-full">
+              <a href="/blog/article">
+                <div className="p-10 bg-bgDark3 rounded-3xl h-full hover:bg-bgDark3Hover transition cursor-pointer">
+                  <img
+                    src={blogData[0].image}
+                    alt={blogData[0].title}
+                    className="rounded-3xl mb-6  w-full"
+                  />
+                  <h4 className="mb-4 text-2xl font-bold font-heading text-white">
+                    {blogData[0].title}
+                  </h4>
+                  <p className="text-customGrayText leading-loose">
+                    {blogData[0].subtitle}
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div className="w-full lg:w-2/5 px-4 flex flex-col justify-between h-full">
+              {blogData.slice(1).map((post, index) => (
+                <a
+                  href="/blog/article"
+                  key={`${post.title}-${index}`}
+                  className=" flex  gap-4 p-10 bg-bgDark3 rounded-3xl  min-h-1/2 h-1/2 max-h-[47%]
+                  hover:bg-bgDark3Hover transition cursor-pointer"
+                >
+                  <div className="pt-2">
+                    <h4 className="mb-4 text-xl font-bold font-heading text-white">
+                      {post.title}
+                    </h4>
+                    <p className="text-customGrayText leading-loose">
+                      {post.subtitle}
+                    </p>
+                  </div>
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="rounded-3xl mb-6  w-full"
+                  />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  </section>
+);

src/components/FAQ.jsx

@@ -64,7 +64,7 @@ const FAQBox = ({ defaultOpen, title, content }) => {
 
   return (
     <div
-      className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8  rounded-3xl bg-bgDark3 custom-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer"
+      className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8  rounded-3xl bg-bgDark3 custom-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
       onClick={() => setIsOpen(!isOpen)}
     >
       <div className="flex flex-col p-2  justify-center items-start">

src/components/Navbar.jsx

@@ -5,11 +5,11 @@ import { TailcastLogo } from "../assets/logos/TailcastLogo";
 import { GithubIcon } from "../assets/icons/GithubIcon";
 
 const navbarLinks = [
-  { label: "Home", href: "#home", ariaLabel: "Home" },
-  { label: "Features", href: "#features", ariaLabel: "Features" },
-  { label: "Pricing", href: "#pricing", ariaLabel: "Pricing" },
-  { label: "Feedback", href: "#feedback", ariaLabel: "Feedback" },
-  { label: "FAQ", href: "#FAQ", ariaLabel: "FAQ" },
+  { label: "Home", href: "/#home", ariaLabel: "Home" },
+  { label: "Features", href: "/#features", ariaLabel: "Features" },
+  { label: "Pricing", href: "/#pricing", ariaLabel: "Pricing" },
+  { label: "Feedback", href: "/#feedback", ariaLabel: "Feedback" },
+  { label: "FAQ", href: "/#FAQ", ariaLabel: "FAQ" },
 ];
 
 export const Navbar = () => {
@@ -24,7 +24,7 @@ export const Navbar = () => {
           transition={{ duration: 0.3 }}
           exit={{ opacity: 0 }}
         >
-          <a href="#home" aria-label="Home">
+          <a href="/#home" aria-label="Home">
             <div className="flex justify-start items-center grow basis-0">
               <div className="text-white mr-2 text-6xl">
                 <TailcastLogo />

src/pages/blog/article/index.astro

@@ -0,0 +1,37 @@
+---
+import Layout from '../../../layouts/Layout.astro'
+import { Navbar } from '../../../components/Navbar.jsx'
+import { Article } from '../../../components/Article.jsx'
+import { Footer } from '../../../components/Footer.jsx'
+import blog1 from '../../../assets/images/blog1.jpg'
+import '../../../styles/Theme.css'
+import { ScrollUpButton } from '../../../components/ScrollUpButton'
+
+const articleData = {
+  title: "AI and Machine Learning",
+  subtitle: "Discover insights and trends in the world of data analytics",
+  date: "June 5, 2024",
+  image: blog1.src,
+  content: `
+    <p>AI and Machine Learning are now vital components of contemporary technology. These innovations are revolutionizing industries by offering new insights and automating tasks that were once considered unachievable. In the realms of finance and startups, AI and ML are transforming how businesses analyze data and make strategic decisions.</p>
+    <p>In financing, AI is being leveraged to assess credit risk and enhance investment strategies. For startups, machine learning algorithms are instrumental in understanding customer behavior and optimizing operations. The scope of these technologies is extensive and continues to expand as we create more sophisticated algorithms and advanced computational power.</p>
+    <p>Stay engaged as we delve deeper into the impact of AI and ML on business analytics and financing in our forthcoming articles.</p><br/>
+    <div class="text-white text-2xl mb-4">Machine Learning in Startups</div>
+    <p>Startups are increasingly adopting AI and Machine Learning to gain a competitive edge. These technologies help in automating routine tasks, thereby saving time and resources. For instance, AI-powered chatbots enhance customer service by providing instant responses to queries, while ML algorithms analyze large datasets to extract actionable insights.</p>
+    <p>By integrating AI and ML, startups can better understand market trends, customer preferences, and operational inefficiencies. This integration not only fosters innovation but also drives growth by enabling data-driven decision-making.</p>
+    <p>Join us in our next articles as we uncover more ways AI and ML are revolutionizing the startup ecosystem.</p><br/>
+    <div class="text-white text-2xl mb-4">Future Trends in AI</div>
+    <p>The future of business analytics is poised to be heavily influenced by advancements in AI and Machine Learning. Predictive analytics, powered by these technologies, will enable businesses to foresee market changes and adapt proactively. This predictive capability is crucial for startups and financial institutions aiming to stay ahead of the curve.</p>
+    <p>Moreover, the rise of AI-driven automation will lead to more efficient and accurate data processing, reducing the margin of error and improving overall productivity. As algorithms become more advanced, the potential for AI and ML to uncover hidden patterns and trends will only grow.</p>
+    <p>Stay tuned as we continue to explore the evolving landscape of AI and its transformative impact on business analytics and financing.</p>
+  `,
+  footer: "~ Duncan Idaho"
+}
+---
+
+<Layout title={articleData.title}>
+  <Navbar client:load />
+  <Article articleData={articleData} />
+  <Footer />
+  <ScrollUpButton client:load />
+</Layout>

src/pages/index.astro

@@ -1,32 +1,32 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import { Hero } from "../components/Hero.jsx";
-import { Navbar } from "../components/Navbar.jsx";
-import { Features1 } from "../components/Features1.jsx";
-import { Features2 } from "../components/Features2.jsx";
-import { Testimonials } from "../components/Testimonials.jsx";
-import { FeaturesDiagonal } from "../components/FeaturesDiagonal.jsx";
-import { Pricing } from "../components/Pricing.jsx";
-import { FAQ } from "../components/FAQ.jsx";
-import { Brands } from "../components/Brands.jsx";
-import { Divider } from "../components/Divider";
-import { Footer } from "../components/Footer.jsx";
-import { ScrollUpButton } from "../components/ScrollUpButton";
-import "../styles/Theme.css";
-import "../styles/Diagonals.css";
-
+import Layout from '../layouts/Layout.astro'
+import { Hero } from '../components/Hero.jsx'
+import { Navbar } from '../components/Navbar.jsx'
+import { Features1 } from '../components/Features1.jsx'
+import { Features2 } from '../components/Features2.jsx'
+import { Testimonials } from '../components/Testimonials.jsx'
+import { FeaturesDiagonal } from '../components/FeaturesDiagonal.jsx'
+import { Pricing } from '../components/Pricing.jsx'
+import { FAQ } from '../components/FAQ.jsx'
+import { Brands } from '../components/Brands.jsx'
+import { Blog } from '../components/Blog'
+import { Footer } from '../components/Footer.jsx'
+import { ScrollUpButton } from '../components/ScrollUpButton'
+import '../styles/Theme.css'
+import '../styles/Diagonals.css'
 ---
 
 <Layout title="Tailcast">
   <Navbar client:load />
   <Hero client:load />
   <Features1 client:load />
   <Features2 client:load />
-  <Testimonials client:load />
   <FeaturesDiagonal client:load />
   <Pricing client:load />
   <Brands client:load />
-  <FAQ client:load />
+  <Testimonials client:load />
+  <Blog client:load />
+  <FAQ client:load /> 
   <Footer />
   <ScrollUpButton client:load />
 </Layout>