fix home and footer

telerik · Dec 3, 2024 · 24c4f34 · 24c4f34
1 parent f491f35
commit 24c4f34
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 85 deletions.
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Footer.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Footer.tsx
@@ -47,7 +47,7 @@ const Footer: React.FC = () => {
             style={{ marginLeft: "50px" }}
           >
             <a href="/" className="k-d-block k-mb-4 k-text-align-center">
-              <img src="/vilora-logo.png" alt="Logo" />
+              <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
             </a>
             <p className="k-m-0">
               {t.cookiesText}

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx
@@ -63,93 +63,107 @@ const Home: React.FC = () => {
 
   return (
     <LocalizationProvider language={selectedLang}>
-      <BackgroundImage
-        title={t.title}
-        subtitle={t.subtitle}
-        buttonText={t.buttonText}
-        img="/kendo-react/kendo-react-e-commerce-astro-app/model_1.png"
-      />
+      <div className="k-m-auto" style={{ maxWidth: 1280 }}>
+        <BackgroundImage
+          title={t.title}
+          subtitle={t.subtitle}
+          buttonText={t.buttonText}
+          img="/kendo-react/kendo-react-e-commerce-astro-app/model_1.png"
+        />
 
-      {isAdminValue ? (
-        <Layout>
-          <div className="k-mt-8">
-            <AdminView />
-          </div>
-        </Layout>
-      ) : (
-        <>
+        {isAdminValue ? (
           <Layout>
-            <CustomSection>
-              <OrderedImgText
-                title={t.timelessTitle}
-                subtitle={t.timelessSubtitle}
-                contentText={t.timelessContent}
-                img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel2.png"
-                order="first"
-                link={t.buttonText}
-              />
-            </CustomSection>
+            <div className="k-mt-8">
+              <AdminView />
+            </div>
           </Layout>
-          <Layout>
-            <CustomSection>
-              <OrderedImgText
-                title={t.fineJewelryTitle}
-                subtitle={t.fineJewelrySubtitle}
-                contentText={t.fineJewelryContent}
-                img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel3.png"
-                order="last"
-                link={t.buttonText}
-              />
-            </CustomSection>
-          </Layout>
-          <Layout>
-            <CustomSection>
-              <CategoryList
-                colSpan={6}
-                title={t.ringsTitle}
-                subtitle={t.ringsSubtitle}
-                data={translatedRingsData}
-              />
-            </CustomSection>
-          </Layout>
-          <Layout>
-            <CustomSection>
-              <OrderedImgText
-                title={t.watchesTitle}
-                subtitle={t.watchesSubtitle}
-                contentText={t.watchesContent}
-                img="/kendo-react/kendo-react-e-commerce-astro-app/homeWatch1.png"
-                order="first"
-                link={t.buttonText}
-              />
-            </CustomSection>
-          </Layout>
-          <Layout>
-            <CustomSection>
-              <CategoryList
-                title={t.watchesCategoryTitle}
-                subtitle={t.watchesCategorySubtitle}
-                data={translatedWatchData}
-              />
-            </CustomSection>
-          </Layout>
-          <Layout>
-            <CustomSection>
-              <OrderedImgText
-                title={t.servicesTitle}
-                subtitle={t.servicesSubtitle}
-                contentText={t.servicesContent}
-                img="/kendo-react/kendo-react-e-commerce-astro-app/homeServicesImage.png"
-                order="last"
-                link={t.learnMoreText}
-              />
-            </CustomSection>
-          </Layout>
-          <Layout>
-            <Testemonials />
-          </Layout>
-        </>
-      )}
+        ) : (
+          <>
+            <Layout>
+              <section
+                className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
+                style={{ paddingTop: "60px" }}
+              >
+                <CategoryList
+                  title={t.bestsellersTitle}
+                  subtitle={t.bestsellersSubtitle}
+                  data={translatedData}
+                />
+              </section>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <OrderedImgText
+                  title={t.timelessTitle}
+                  subtitle={t.timelessSubtitle}
+                  contentText={t.timelessContent}
+                  img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel2.png"
+                  order="first"
+                  link={t.buttonText}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <OrderedImgText
+                  title={t.fineJewelryTitle}
+                  subtitle={t.fineJewelrySubtitle}
+                  contentText={t.fineJewelryContent}
+                  img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel3.png"
+                  order="last"
+                  link={t.buttonText}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <CategoryList
+                  colSpan={6}
+                  title={t.ringsTitle}
+                  subtitle={t.ringsSubtitle}
+                  data={translatedRingsData}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <OrderedImgText
+                  title={t.watchesTitle}
+                  subtitle={t.watchesSubtitle}
+                  contentText={t.watchesContent}
+                  img="/kendo-react/kendo-react-e-commerce-astro-app/homeWatch1.png"
+                  order="first"
+                  link={t.buttonText}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <CategoryList
+                  title={t.watchesCategoryTitle}
+                  subtitle={t.watchesCategorySubtitle}
+                  data={translatedWatchData}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <CustomSection>
+                <OrderedImgText
+                  title={t.servicesTitle}
+                  subtitle={t.servicesSubtitle}
+                  contentText={t.servicesContent}
+                  img="/kendo-react/kendo-react-e-commerce-astro-app/homeServicesImage.png"
+                  order="last"
+                  link={t.learnMoreText}
+                />
+              </CustomSection>
+            </Layout>
+            <Layout>
+              <Testemonials />
+            </Layout>
+          </>
+        )}
+      </div>
     </LocalizationProvider>
   );
 };