created pages for family resources

src/components/familyResources/FamBlog.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Layout from '../Partials/Layout'
+import SearchCom from '../Helpers/SearchCom'
+import DataIteration from '../Helpers/DataIteration'
+import FamBlogItem from './FamBlogItem'
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
+
+export default function FamBlog() {
+  let blogdata = [1,2,3,4,5,6,7,8]
+  return (
+    <Layout>
+      <>
+        <div className='mb-4'>
+          <CustomBreadcrumb 
+            title='Blog' 
+            breadcrumb = {
+              [
+                { link: "/", title: "Home" },
+                { link: "/fam-blog", title: "Blogs", active: true},
+              ]
+            }
+          />
+        </div>
+        <div className={`w-full`}>
+          <div className="main-container w-full">
+            <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+              {/* filter-search */}
+              <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+                <SearchCom placeholder='Search Blog Items...' />
+              </div>
+            </div>
+
+            <div className="content-section w-full-width">
+              <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+                <DataIteration
+                  datas={blogdata}
+                  startLength={process.env.REACT_APP_ZERO_STATE}
+                  endLength={blogdata.length}
+                >
+                  {({ datas }) => (
+                    <div key={Math.random()}>
+                      <FamBlogItem
+                        datas={datas}
+                        bg={blogdata?.image_url && blogdata.image_url}
+                        className=''
+                        hidden={false}
+                      />
+                    </div>
+                  )}
+                </DataIteration>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    </Layout>
+  )
+}