import React from 'react'
import { keywordSections } from "../assets/keyword-data";
import { KeywordSection } from "../components/KeywordSection";
import ContainerPage from '../components/shared/ContainerPage';
import HeaderPage from '../components/shared/HeaderPage';


const Keywords = () => {
    return (
        <ContainerPage>
            <HeaderPage title="Keyword Visibility Matrix" buttonShow={true} />

            <div className="flex flex-col">
                {keywordSections.map((section) => (
                    <KeywordSection key={section.id} section={section} />
                ))}
            </div>
        </ContainerPage>
    )
}

export default Keywords