Skip to content

Commit 9424433

Browse files
w3bdesignw3bdesign
authored
Merge pull request #1386 from w3bdesign/develop
Improve design
2 parents 7b54b51 + 4a6b101 commit 9424433

8 files changed

+139
-127
lines changed

‎src/components/Footer/Footer.component.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
* @returns {JSX.Element} - Rendered component
55
*/
66
const Footer = () => (
7-
<footer className="bg-white mb-4 hidden md:block px-4">
8-
<div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 border border-gray-200 rounded lg:max-w-[1490px]">
9-
<div className="text-gray-600 mx-auto">
10-
&copy; {new Date().getFullYear()} Daniel / w3bdesign
7+
<footer className="w-full bg-white border-t border-gray-200 mt-12">
8+
<div className="container mx-auto px-6">
9+
<div className="py-4">
10+
<div className="text-gray-600 text-center">
11+
&copy; {new Date().getFullYear()} Daniel / w3bdesign
12+
</div>
1113
</div>
1214
</div>
1315
</footer>

‎src/components/Header/Header.component.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ const Header = ({ title }: IHeaderProps) => (
2525
key="pagetitle"
2626
/>
2727
</Head>
28-
<Navbar />
28+
<div className="container mx-auto px-6">
29+
<Navbar />
30+
</div>
2931
</>
3032
);
3133

‎src/components/Header/Navbar.component.tsx

+43-46
Original file line numberDiff line numberDiff line change
@@ -16,58 +16,55 @@ import useIsMobile from '@/utils/hooks/useIsMobile';
1616
const Navbar = () => {
1717
const isMobile = useIsMobile();
1818
return (
19-
<header>
20-
<nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
21-
<div className="container flex flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
22-
<div
23-
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
24-
id="menu"
25-
>
26-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
27-
<li>
19+
<header className="border-b border-gray-200">
20+
<nav id="header" className="top-0 z-50 w-full bg-white">
21+
<div className="container mx-auto px-4 sm:px-6 py-4">
22+
{isMobile ? (
23+
// Mobile layout - logo with search below
24+
<div className="flex flex-col space-y-4">
25+
<div className="text-center">
26+
<Link href="/">
27+
<span className="text-lg font-bold tracking-widest text-gray-900">
28+
NETTBUTIKK
29+
</span>
30+
</Link>
31+
</div>
32+
<div className="w-full">
33+
<MobileSearch />
34+
</div>
35+
</div>
36+
) : (
37+
// Desktop layout
38+
<div className="flex items-center justify-between">
39+
<div className="flex items-center space-x-8">
2840
<Link href="/produkter">
29-
<span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
30-
Produkter
41+
<span className="text-base uppercase tracking-wider group relative">
42+
<span className="relative inline-block">
43+
<span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
44+
Produkter
45+
</span>
3146
</span>
3247
</Link>
33-
</li>
34-
<li>
3548
<Link href="/kategorier">
36-
<span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
37-
Kategorier
49+
<span className="text-base uppercase tracking-wider group relative">
50+
<span className="relative inline-block">
51+
<span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
52+
Kategorier
53+
</span>
3854
</span>
3955
</Link>
40-
</li>
41-
</ul>
42-
</div>
43-
<div className="order-1 md:order-2 md:hidden lg:block">
44-
<Link href="/">
45-
<span className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
46-
<svg
47-
className="mr-2 text-gray-800 fill-current"
48-
xmlns="https://www.w3.org/2000/svg"
49-
width="24"
50-
height="24"
51-
viewBox="0 0 24 24"
52-
aria-label="Nettbutikk logo"
53-
>
54-
<path
55-
d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
56-
aria-label="Nettbutikk logo"
57-
/>
58-
</svg>
59-
NETTBUTIKK
60-
</span>
61-
</Link>
62-
</div>
63-
<div
64-
className="flex items-center order-2 md:order-3"
65-
id="nav-content"
66-
>
67-
<AlgoliaSearchBox />
68-
<MobileSearch />
69-
{!isMobile && <Cart />}
70-
</div>
56+
</div>
57+
<Link href="/" className="hidden lg:block">
58+
<span className="text-xl font-bold tracking-widest text-gray-900 hover:text-gray-700 transition-colors">
59+
NETTBUTIKK
60+
</span>
61+
</Link>
62+
<div className="flex items-center space-x-3">
63+
<AlgoliaSearchBox />
64+
<Cart />
65+
</div>
66+
</div>
67+
)}
7168
</div>
7269
</nav>
7370
</header>

‎src/components/Index/Hero.component.tsx

+25-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
14
/**
25
* Renders Hero section for Index page
3-
* @function PageTitle
6+
* @function Hero
47
* @returns {JSX.Element} - Rendered component
58
*/
69
const Hero = () => (
7-
<section
8-
id="hero"
9-
className="flex w-full mx-auto bg-right bg-cover mt-14 md:pt-0 md:items-center bg-hero-background h-[24rem] lg:max-w-[1490px]"
10-
>
11-
<div className="container mx-auto">
12-
<div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
13-
<h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
10+
<section className="relative w-full h-[60vh] overflow-hidden">
11+
<div className="absolute inset-0">
12+
<Image
13+
src="/images/hero.jpg"
14+
alt="Hero image"
15+
fill
16+
priority
17+
className="object-cover object-center"
18+
quality={90}
19+
/>
20+
<div className="absolute inset-0 bg-black bg-opacity-30" />
21+
</div>
22+
23+
<div className="relative h-full container mx-auto flex items-center">
24+
<div className="max-w-xl">
25+
<h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
1426
Stripete Zig Zag Pute Sett
1527
</h1>
16-
17-
<a
18-
className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
19-
href="#"
28+
<Link
29+
href="/produkter"
30+
className="inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-100 transition-colors duration-200"
2031
>
21-
se utvalget
22-
</a>
32+
Se Utvalget
33+
</Link>
2334
</div>
2435
</div>
2536
</section>

‎src/components/Layout/Layout.component.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,16 @@ const Layout = ({ children, title }: ILayoutProps) => {
5757

5858
return (
5959
<div className="flex flex-col min-h-screen w-full mx-auto">
60-
<div className="container min-w-[140vw] sm:min-w-[95vw] md:px-4 lg:px-6 py-2 lg:max-w-[1600px] mx-auto">
61-
<Header title={title} />
62-
<PageTitle title={title} />
63-
<main className="flex-grow">{children}</main>
60+
<Header title={title} />
61+
{title === 'Hjem' ? (
62+
<main className="flex-1">{children}</main>
63+
) : (
64+
<div className="container mx-auto px-6 flex-1">
65+
<PageTitle title={title} />
66+
<main>{children}</main>
67+
</div>
68+
)}
69+
<div className="mt-auto">
6470
<Footer />
6571
<Stickynav />
6672
</div>

‎src/components/Layout/PageTitle.component.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
interface IPageTitleProps {
22
title: string;
3-
marginLeft?: boolean;
43
}
54

65
/**
76
* Renders page title for each page.
87
* @function PageTitle
9-
* @param {boolean} marginLeft - Adds extra margin left if true
108
* @param {string} title - Title for the page. Is set in <title>{title}</title>
119
* @returns {JSX.Element} - Rendered component
1210
*/
13-
const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
14-
<section
15-
className={`container ${
16-
marginLeft ? 'p-4' : 'p-0'
17-
} pl-4 mx-auto mt-24 text-center bg-white`}
18-
>
19-
<span className="py-2 text-2xl font-bold tracking-wide text-center text-gray-800 no-underline uppercase hover:no-underline">
20-
{title}
21-
</span>
11+
const PageTitle = ({ title }: IPageTitleProps) => (
12+
<section className="w-full bg-white border-b border-gray-200">
13+
<div className="container mx-auto py-12 px-6">
14+
<h1 className="text-2xl text-center tracking-wider text-gray-900 uppercase">
15+
{title}
16+
</h1>
17+
</div>
2218
</section>
2319
);
2420

‎src/components/Product/DisplayProducts.component.tsx

+27-33
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ interface IDisplayProductsProps {
4747
*/
4848

4949
const DisplayProducts = ({ products }: IDisplayProductsProps) => (
50-
<section className="container mx-auto bg-white">
50+
<section className="container mx-auto bg-white py-12">
5151
<div
5252
id="product-container"
53-
className="flex flex-wrap items-center mb-[120px] md:mb-0"
53+
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
5454
>
5555
{products ? (
5656
products.map(
@@ -77,67 +77,61 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
7777
}
7878

7979
return (
80-
<div
81-
key={uuidv4()}
82-
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
83-
>
80+
<div key={uuidv4()} className="group">
8481
<Link
8582
href={`/produkt/${encodeURIComponent(
8683
slug,
8784
)}?id=${encodeURIComponent(databaseId)}`}
8885
>
89-
<span>
86+
<div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
9087
{image ? (
9188
<img
9289
id="product-image"
93-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
90+
className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
9491
alt={name}
9592
src={image.sourceUrl}
9693
/>
9794
) : (
9895
<img
9996
id="product-image"
100-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
97+
className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
10198
alt={name}
102-
src={
103-
process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
104-
}
99+
src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
105100
/>
106101
)}
107-
</span>
102+
</div>
108103
</Link>
109104
<Link
110105
href={`/produkt/${encodeURIComponent(
111106
slug,
112107
)}?id=${encodeURIComponent(databaseId)}`}
113108
>
114109
<span>
115-
<div className="flex justify-center pt-3">
116-
<p className="font-bold text-center cursor-pointer text-2xl">
110+
<div className="mt-4">
111+
<p className="text-base font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
117112
{name}
118113
</p>
119114
</div>
120115
</span>
121116
</Link>
122-
{/* Display sale price when on sale */}
123-
{onSale && (
124-
<div className="flex justify-center">
125-
<div className="pt-1 text-gray-900 text-xl">
126-
{variations && filteredVariantPrice(price, '')}
127-
{!variations && salePrice}
117+
<div className="mt-2 text-center">
118+
{onSale ? (
119+
<div className="flex justify-center items-center space-x-2">
120+
<span className="text-red-600">
121+
{variations && filteredVariantPrice(price, '')}
122+
{!variations && salePrice}
123+
</span>
124+
<span className="text-gray-500 text-sm line-through">
125+
{variations && filteredVariantPrice(price, 'right')}
126+
{!variations && regularPrice}
127+
</span>
128128
</div>
129-
<div className="pt-1 ml-2 text-gray-500 line-through text-lg">
130-
{variations && filteredVariantPrice(price, 'right')}
131-
{!variations && regularPrice}
132-
</div>
133-
</div>
134-
)}
135-
{/* Display regular price when not on sale */}
136-
{!onSale && (
137-
<p className="pt-1 text-center text-gray-900 text-xl">
138-
{price}
139-
</p>
140-
)}
129+
) : (
130+
<span className="text-gray-900">
131+
{price}
132+
</span>
133+
)}
134+
</div>
141135
</div>
142136
);
143137
},

‎src/components/Product/SingleProduct.component.tsx

+18-14
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
4242
if (process.browser) {
4343
DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
4444
description,
45-
'text/html'
45+
'text/html',
4646
).body.textContent;
4747
}
4848

@@ -58,17 +58,19 @@ const SingleProduct = ({ product }: IProductRootObject) => {
5858
<div className="container mx-auto px-4 py-8">
5959
<div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
6060
{/* Image Container */}
61-
<div className="mb-6 md:mb-0">
62-
<img
63-
id="product-image"
64-
src={
65-
image?.sourceUrl ||
66-
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
67-
placeholderFallBack
68-
}
69-
alt={name}
70-
className="w-full h-auto object-cover transition duration-500 ease-in-out transform md:hover:scale-105"
71-
/>
61+
<div className="mb-6 md:mb-0 group">
62+
<div className="max-w-xl mx-auto aspect-[3/4] relative overflow-hidden bg-gray-100">
63+
<img
64+
id="product-image"
65+
src={
66+
image?.sourceUrl ||
67+
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
68+
placeholderFallBack
69+
}
70+
alt={name}
71+
className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
72+
/>
73+
</div>
7274
</div>
7375

7476
{/* Product Details Container */}
@@ -126,14 +128,16 @@ const SingleProduct = ({ product }: IProductRootObject) => {
126128
id="variant"
127129
name="variant"
128130
className="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
129-
onChange={(e) => setSelectedVariation(Number(e.target.value))}
131+
onChange={(e) =>
132+
setSelectedVariation(Number(e.target.value))
133+
}
130134
>
131135
{product.variations.nodes.map(
132136
({ id, name, databaseId, stockQuantity }) => (
133137
<option key={id} value={databaseId}>
134138
{name.split('- ').pop()} - ({stockQuantity} på lager)
135139
</option>
136-
)
140+
),
137141
)}
138142
</select>
139143
</div>

0 commit comments

Comments
 (0)