embed Block into /index page blocks

src/app/page.tsx

@@ -5,7 +5,7 @@ import Projects from '##/index/Projects'
 
 export default function IndexPage() {
   return (
-    <Container className="space-y-12 sm:space-y-10">
+    <Container className="space-y-10">
       <Hero />
       <Works />
       <Projects />

src/components/App/index/Projects.tsx

@@ -2,7 +2,7 @@ import {client} from '@/lib/sanity'
 import {revalidateTime} from '@/lib/utils'
 import {Product} from '@/types/product'
 
-import Text from '#/UI/Text'
+import Block from '#/UI/Block'
 import ProductCard from '#/UI/ProductCard'
 
 export async function getProjects(): Promise<Product[]> {
@@ -29,6 +29,12 @@ export async function getProjects(): Promise<Product[]> {
   return Array.isArray(data) ? data : []
 }
 
+const projectsData = {
+  heading: 'my products',
+  text: "This section showcases my personal products that I create for practice in programming and design, and to solve my own problems and the needs of my friends', as well as my student projects, where we develop ready-to-launch digital products.",
+}
+const {heading, text} = projectsData
+
 export default async function Projects() {
   const projects: Product[] = await getProjects()
 
@@ -39,19 +45,14 @@ export default async function Projects() {
   projects.sort((a, b) => a.id - b.id)
 
   return (
-    <section id="PROJECTS" data-section="projects-index" className="scroll-mt-8 sm:scroll-mt-5 space-y-8">
-      <div className="space-y-4 sm:space-y-3">
-        <Text type="heading">my products</Text>
-        <Text>This section includes my university projects, in which we create ready-to-launch digital products, as well as interesting projects that I do for myself.</Text>
-      </div>
-
+    <Block id="PROJECTS" token={'projects-index'} className="scroll-mt-8 sm:scroll-mt-5" heading={heading} text={text}>
       <div className="flex flex-col gap-5 sm:gap-4">
         {projects
           .filter((project) => project.is_best)
           .map((project, index) => (
             <ProductCard type="project" product={project} key={index} />
           ))}
       </div>
-    </section>
+    </Block>
   )
 }

src/components/App/index/Works.tsx

@@ -2,7 +2,7 @@ import {client} from '@/lib/sanity'
 import {revalidateTime} from '@/lib/utils'
 import {Product} from '@/types/product'
 
-import Text from '#/UI/Text'
+import Block from '#/UI/Block'
 import ProductCard from '#/UI/ProductCard'
 import Button from '#/UI/Button'
 
@@ -30,6 +30,12 @@ export async function getWorks(): Promise<Product[]> {
   return Array.isArray(data) ? data : []
 }
 
+const worksData = {
+  heading: 'my works',
+  text: 'Creating unique websites and designing interfaces is my passion. I oversee the entire process from idea and design to coding and delivering the final product.',
+}
+const {heading, text} = worksData
+
 export default async function Works() {
   const works: Product[] = await getWorks()
 
@@ -40,12 +46,7 @@ export default async function Works() {
   works.sort((a, b) => a.id - b.id)
 
   return (
-    <section data-section="works-index" className="space-y-8 sm:space-y-6">
-      <div className="space-y-4 sm:space-y-3">
-        <Text type="heading">my works</Text>
-        <Text className="sm:hidden">Creating unique websites and designing interfaces is my passion. I oversee the entire process from idea and design to coding and delivering the final product.</Text>
-      </div>
-
+    <Block token={'works-index'} heading={heading} text={text}>
       <div className="flex flex-col gap-5 sm:gap-4">
         {works
           .filter((work) => work.is_best)
@@ -55,6 +56,6 @@ export default async function Works() {
 
         <Button href="/works" text="View All" />
       </div>
-    </section>
+    </Block>
   )
 }

src/components/UI/Block.tsx

@@ -7,11 +7,12 @@ interface Props {
   heading: string
   text?: string
   className?: string
+  id?: string
 }
 
-export default function Block({children, token, heading, text, className}: Props) {
+export default function Block({children, token, heading, text, className, id}: Props) {
   return (
-    <section data-section={token} className={cn('space-y-6', className)}>
+    <section id={id || undefined} data-section={token} className={cn('space-y-6', className)}>
       <div className="space-y-3 group w-fit">
         <Text type="heading" className="flex items-center">
           {heading}