changed nav and footer

2025-06-18 21:21:21 +00:00 · 2021-05-04 12:16:40 -04:00 · 2021-05-04 12:16:40 -04:00 · da90428ed9
commit da90428ed9
parent c82e700143
10 changed files with 169 additions and 74 deletions
--- a/assets/base.scss
+++ b/assets/base.scss
--- a/assets/chrome-bug.scss
+++ b/assets/chrome-bug.scss
--- a/assets/components.scss
+++ b/assets/components.scss
--- a/assets/main.scss
+++ b/assets/main.scss
@ -1,7 +1,7 @@
@tailwind base;
-@import './base.css';
+@import './base.scss';

@tailwind components;
-@import './components.css';
+@import './components.scss';

@tailwind utilities;
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@ -25,40 +25,47 @@ const Footer: FC<Props> = ({ className, pages }) => {
    <footer className={rootClassName}>
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
-          <div className="col-span-1 lg:col-span-2">
+          {/* <div className="col-span-1 lg:col-span-2">
            <Link href="/">
              <a className="flex flex-initial items-center font-bold md:mr-24">
                <span className="rounded-full border border-gray-700 mr-2">
                  <Logo />
                </span>
-                <span>ACME</span>
+                <span>BetterBrand</span>
              </a>
            </Link>
-          </div>
+          </div> */}
          <div className="col-span-1 lg:col-span-2">
            <ul className="flex flex-initial flex-col md:flex-1">
              <li className="py-3 md:py-0 md:pb-4">
                <Link href="/">
                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Home
+                    <h6>Subscribe to newsletter</h6>
                  </a>
                </Link>
              </li>
              <li className="py-3 md:py-0 md:pb-4">
                <Link href="/">
                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Careers
+                    <h6>Instagram</h6>
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
+                    <h6>Facebook</h6>
                  </a>
                </Link>
              </li>
              <li className="py-3 md:py-0 md:pb-4">
                <Link href="/blog">
                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Blog
+                    <h6>Email</h6>
                  </a>
                </Link>
              </li>
-              {sitePages.map((page) => (
+              {/* {sitePages.map((page) => (
                <li key={page.url} className="py-3 md:py-0 md:pb-4">
                  <Link href={page.url!}>
                    <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
@ -66,10 +73,10 @@ const Footer: FC<Props> = ({ className, pages }) => {
                    </a>
                  </Link>
                </li>
-              ))}
+              ))} */}
            </ul>
          </div>
-          <div className="col-span-1 lg:col-span-2">
+          {/* <div className="col-span-1 lg:col-span-2">
            <ul className="flex flex-initial flex-col md:flex-1">
              {legalPages.map((page) => (
                <li key={page.url} className="py-3 md:py-0 md:pb-4">
@ -81,8 +88,8 @@ const Footer: FC<Props> = ({ className, pages }) => {
                </li>
              ))}
            </ul>
-          </div>
-          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+          </div> */}
+          {/* <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
            <div className="flex space-x-6 items-center h-10">
              <a
                aria-label="Github Repository"
@ -93,9 +100,9 @@ const Footer: FC<Props> = ({ className, pages }) => {
              </a>
              <I18nWidget />
            </div>
-          </div>
+          </div> */}
        </div>
-        <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
+        {/* <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
          <div>
            <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
          </div>
@ -114,7 +121,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
              />
            </a>
          </div>
-        </div>
+        </div> */}
      </Container>
    </footer>
  )
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@ -12,10 +12,11 @@ const Navbar: FC = () => (
        <div className="flex items-center flex-1">
          <Link href="/">
            <a className={s.logo} aria-label="Logo">
-              <Logo />
+              {/* <Logo /> */}
+              <h5>BetterBrand</h5>
            </a>
          </Link>
-          <nav className="hidden ml-6 space-x-4 lg:block">
+          {/* <nav className="hidden ml-6 space-x-4 lg:block">
            <Link href="/search">
              <a className={s.link}>All</a>
            </Link>
@ -28,21 +29,21 @@ const Navbar: FC = () => (
            <Link href="/search?q=shoes">
              <a className={s.link}>Shoes</a>
            </Link>
-          </nav>
+          </nav> */}
        </div>

-        <div className="justify-center flex-1 hidden lg:flex">
+        {/* <div className="justify-center flex-1 hidden lg:flex">
          <Searchbar />
-        </div>
+        </div> */}

        <div className="flex justify-end flex-1 space-x-8">
          <UserNav />
        </div>
      </div>

-      <div className="flex pb-4 lg:px-6 lg:hidden">
+      {/* <div className="flex pb-4 lg:px-6 lg:hidden">
        <Searchbar id="mobile-search" />
-      </div>
+      </div> */}
    </Container>
  </NavbarRoot>
 )
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@ -26,11 +26,19 @@ const UserNav: FC<Props> = ({ className }) => {
    <nav className={cn(s.root, className)}>
      <div className={s.mainContainer}>
        <ul className={s.list}>
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          <li className={s.item}>
+            <Link href="/">
+              <a onClick={closeSidebarIfPresent} aria-label="Shop">
+                <h5>Shop</h5>
+              </a>
+            </Link>
          </li>
-          {process.env.COMMERCE_WISHLIST_ENABLED && (
+          <li className={s.item} onClick={toggleSidebar}>
+            {/* <Bag /> */}
+            <h5>Cart</h5>
+            {/* {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>} */}
+          </li>
+          {/* {process.env.COMMERCE_WISHLIST_ENABLED && (
            <li className={s.item}>
              <Link href="/wishlist">
                <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
@ -38,8 +46,8 @@ const UserNav: FC<Props> = ({ className }) => {
                </a>
              </Link>
            </li>
-          )}
-          <li className={s.item}>
+          )} */}
+          {/* <li className={s.item}>
            {customer ? (
              <DropdownMenu />
            ) : (
@ -51,7 +59,7 @@ const UserNav: FC<Props> = ({ className }) => {
                <Avatar />
              </button>
            )}
-          </li>
+          </li> */}
        </ul>
      </div>
    </nav>
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,6 +1,6 @@
-import '@assets/main.css'
-import '@assets/chrome-bug.css'
-import 'keen-slider/keen-slider.min.css'
+import '@assets/main.scss'
+import '@assets/chrome-bug.scss'
+// import 'keen-slider/keen-slider.min.css'

 import { FC, useEffect } from 'react'
 import type { AppProps } from 'next/app'
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -13,7 +13,6 @@ export async function getStaticProps({
  preview,
  locale,
 }: GetStaticPropsContext) {
-  console.log('getStaticProps')
  const config = getConfig({ locale })

  const { products } = await getAllProducts({
@ -44,6 +43,7 @@ export default function Home({
  return (
    <>
      <Grid>
+        {/* main product */}
        {products.slice(0, 3).map((product, i) => (
          <ProductCard
            key={product.id}
@ -55,7 +55,12 @@ export default function Home({
          />
        ))}
      </Grid>
+      {/* <FeaturedIn>Featured In</FeaturedIn> */}
+      {/* <Banana>Banana Comparison</Banana> */}
+      {/* <Nutrition></Nutrition> */}
+      {/* <Mission></Mission> */}
      <Marquee variant="secondary">
+        {/* instagram */}
        {products.slice(0, 3).map((product, i) => (
          <ProductCard
            key={product.id}
@ -68,46 +73,6 @@ export default function Home({
          />
        ))}
      </Marquee>
-      <Hero
-        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
-        description="
-        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
-        ‘Carbon’ iteration, and now release details have been locked in for
-        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
-        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
-        Hebrew. It’s now undergone a name change, and will be referred to as
-        ‘Natural’."
-      />
-      <Grid layout="B">
-        {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            imgProps={{
-              width: i === 0 ? 1080 : 540,
-              height: i === 0 ? 1080 : 540,
-            }}
-          />
-        ))}
-      </Grid>
-      <Marquee>
-        {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            variant="slim"
-            imgProps={{
-              width: 320,
-              height: 320,
-            }}
-          />
-        ))}
-      </Marquee>
-      {/* <HomeAllProductsGrid
-        newestProducts={products}
-        categories={categories}
-        brands={brands}
-      /> */}
    </>
  )
 }
--- a/pages/index2.tsx
+++ b/pages/index2.tsx
@ -0,0 +1,114 @@
+import { Layout } from '@components/common'
+import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
+// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+
+import { getConfig } from '@framework/api'
+import getAllProducts from '@framework/product/get-all-products'
+import getSiteInfo from '@framework/common/get-site-info'
+import getAllPages from '@framework/common/get-all-pages'
+
+export async function getStaticProps({
+  preview,
+  locale,
+}: GetStaticPropsContext) {
+  const config = getConfig({ locale })
+
+  const { products } = await getAllProducts({
+    variables: { first: 12 },
+    config,
+    preview,
+  })
+
+  const { categories, brands } = await getSiteInfo({ config, preview })
+  const { pages } = await getAllPages({ config, preview })
+
+  return {
+    props: {
+      products,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 14400,
+  }
+}
+
+export default function Home({
+  products,
+  brands,
+  categories,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <Grid>
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee variant="secondary">
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            variant="slim"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
+          />
+        ))}
+      </Marquee>
+      <Hero
+        headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
+        description="
+        The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
+        ‘Carbon’ iteration, and now release details have been locked in for
+        this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
+        shoe was originally called ‘Abez’, which translated to ‘Tin’ in
+        Hebrew. It’s now undergone a name change, and will be referred to as
+        ‘Natural’."
+      />
+      <Grid layout="B">
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee>
+        {products.slice(0, 3).map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            variant="slim"
+            imgProps={{
+              width: 320,
+              height: 320,
+            }}
+          />
+        ))}
+      </Marquee>
+      {/* <HomeAllProductsGrid
+        newestProducts={products}
+        categories={categories}
+        brands={brands}
+      /> */}
+    </>
+  )
+}
+
+Home.Layout = Layout