crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-14 13:47:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

home: finish footer (besides cart stickyness)

Browse Source
This commit is contained in:
andr-ew 2023-07-26 20:06:04 -05:00
parent 3dcf6f6041
commit 29c3662daf
7 changed files with 99 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/(home)/layout.js
View File

@ -10,12 +10,10 @@ export default function HomeLayout({ children }) {
<HomeNav />
</nav>
</header>
<main className={styles.main}>
{children}
<footer>
<HomeFooter />
</footer>
</main>
<main className={styles.main}>{children}</main>
<footer>
<HomeFooter />
</footer>
</>
);
}

4
app/(home)/styles.module.scss
View File

@ -1,3 +1,5 @@
@use 'styles/_spacing';
.main {
padding: 0 60px;
padding: 0 spacing.$page-margin-x;
}

36
components/home/index.js
View File

@ -114,19 +114,31 @@ export async function HomeFooter() {
return (
<div className={styles.homeFooter}>
<p>
For additional creative resources, visit the following:
<br />
Moodboard, Soundtrack, Twitter, Instagram.
</p>
<p>
To discuss creative opportunities and potential
<br />
collaborations, visit Aug.Services for more information.
</p>
<div>
<button type='button'>return to top ( ↑ )</button>
<div className={styles.top}>
<p>
For additional creative resources, visit the following:
<br />
{/* Moodboard, Soundtrack, Twitter, Instagram. */}
<>
{footerMenu?.map(item => (
<a href={item?.path} key={item?.path}>
{item?.title}
</a>
))}
</>
</p>
<p>
To discuss creative opportunities and potential
<br />
collaborations, visit{' '}
<a href='https://aug.services'>Aug.Services</a> for more
information.
</p>
<div>
<button type='button'>return to top ( ↑ )</button>
</div>
</div>
<img src='/logo.svg' alt='shop.aug.svcs' />
</div>
);
}

46
components/home/styles.module.scss
View File

@ -1,4 +1,5 @@
@use 'styles/_typography';
@use 'styles/_spacing';
@mixin home-grid {
display: grid;
@ -75,15 +76,46 @@
}
.homeFooter {
@include home-grid;
.top {
padding: 0 spacing.$page-margin-x;
padding-top: 20px;
padding-bottom: 30px;
> p {
@include typography.body;
@include home-grid;
grid-column-end: span 10;
}
> p {
@include typography.body;
> *:last-child {
grid-column-end: span 4;
grid-column-end: span 10;
a {
&:not(&:last-of-type)::after {
content: ',\00a0';
text-decoration-line: none;
display: inline-block;
}
&:last-of-type::after {
content: '.';
text-decoration-line: none;
display: inline-block;
}
}
}
> *:last-child {
grid-column-end: span 4;
}
> div {
display: flex;
align-items: flex-end;
}
button {
@include typography.subheader;
text-align: right;
word-wrap: none;
}
}
}

16
public/logo.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="1441" height="754" viewBox="0 0 1441 754" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1440.2" height="753" transform="translate(0 0.5)" fill="white"/>
<path d="M90.4794 485.64C90.9015 520.603 92.6649 548.984 95.7882 570.797C101.725 611.627 112.184 632.037 127.172 632.037C133.888 632.037 140.003 627.571 145.518 618.617C156.192 601.282 161.529 570.246 161.529 525.5C161.529 491.94 159.268 468.035 154.748 453.774C150.142 439.783 142.976 427.615 133.203 417.27L115.213 398.392C103.461 386.094 95.141 372.534 90.2543 357.701C81.8128 331.973 77.5921 293.527 77.5921 242.351C77.5921 186.979 81.7378 141.542 90.0386 106.019C98.33 70.5069 110.083 52.7508 125.277 52.7508C139.262 52.7508 151.146 68.3387 160.929 99.5252C170.711 130.712 175.598 180.55 175.598 249.061H158.143C157.242 216.062 155.338 190.755 152.412 173.139C146.981 140.981 137.761 124.897 124.761 124.897C114.256 124.897 106.715 135.242 102.119 155.944C97.5234 176.645 95.2254 200.69 95.2254 228.09C95.2254 258.295 97.9361 280.388 103.367 294.368C106.922 303.322 114.969 314.497 127.519 327.928L146.147 347.647C155.132 357.162 162.063 370.161 166.95 386.655C175.392 415.457 179.612 457.269 179.612 512.08C179.612 580.311 174.229 629.114 163.452 658.477C152.675 687.84 140.162 702.522 125.896 702.522C109.267 702.522 96.2478 682.954 86.8402 643.795C77.4326 604.928 72.8179 552.21 73.0055 485.651H90.4794V485.64Z" fill="black"/>
<path d="M187.585 68.274H206.344V322.89H276.821V68.274H295.58V684.464H276.821V396.288H206.344V684.464H187.585V68.274Z" fill="black"/>
<path d="M424.679 156.354C433.768 210.884 438.307 280.657 438.307 365.662C438.307 457.669 433.111 534.152 422.719 595.112C410.525 666.697 393.127 702.49 370.541 702.49C349.446 702.49 332.864 671.174 320.792 608.531C310.025 548.132 304.641 471.789 304.641 379.503C304.641 296.17 309.246 224.865 318.457 165.577C330.284 89.5253 347.768 51.4887 370.916 51.4887C395.124 51.4887 413.049 86.4508 424.679 156.354ZM408.303 549.125C415.619 496.374 419.267 435.705 419.267 367.14C419.267 294.649 415.046 236.299 406.624 192.082C398.192 147.864 386.664 125.75 372.042 125.75C357.85 125.75 346.276 147.648 337.319 191.456C328.361 235.253 323.878 299.837 323.878 385.199C323.878 453.494 327.724 511.077 335.405 557.949C343.087 604.831 355.552 628.272 372.792 628.272C389.15 628.261 400.987 601.886 408.303 549.125Z" fill="black"/>
<path d="M446.599 68.274H507.959C520.087 68.274 529.879 83.7324 537.345 114.628C544.802 145.534 548.535 188.942 548.535 244.875C548.535 292.977 545.205 334.853 538.555 370.506C531.896 406.159 521.71 423.99 507.997 423.99H465.18V684.475H446.608V68.274H446.599ZM518.652 152.999C514.572 144.336 508.982 140 501.881 140H465.18V353.505H501.872C510.154 353.505 516.87 345.533 522.029 329.6C527.187 313.656 529.767 285.555 529.767 245.285C529.767 199.978 526.062 169.223 518.652 152.999Z" fill="black"/>
<path d="M510.529 593.019H530.039V684.464H510.529V593.019Z" fill="black"/>
<path d="M588.82 68.274H609.82L659.569 684.464H639.216L625.315 499.901H571.083L556.245 684.464H537.205L588.82 68.274ZM619.341 431.951L598.528 159.719L576.401 431.951H619.341Z" fill="black"/>
<path d="M673.723 68.274V449.147C673.723 493.893 675.608 531.088 679.369 560.721C684.95 605.467 694.357 627.841 707.592 627.841C723.462 627.841 734.248 603.655 739.96 555.273C743.037 528.995 744.566 493.612 744.566 449.147V68.274H763.325V414.335C763.325 490.117 761.045 548.423 756.487 589.254C748.121 663.644 732.316 700.829 709.093 700.829C685.86 700.829 670.093 663.644 661.792 589.254C657.234 548.423 654.954 490.117 654.954 414.335V68.274H673.723Z" fill="black"/>
<path d="M903.276 593.019H922.785V684.464H903.276V593.019Z" fill="black"/>
<path d="M943.992 485.64C944.414 520.603 946.177 548.984 949.301 570.797C955.238 611.627 965.696 632.037 980.684 632.037C987.4 632.037 993.515 627.571 999.03 618.617C1009.7 601.282 1015.04 570.246 1015.04 525.5C1015.04 491.94 1012.78 468.035 1008.26 453.774C1003.67 439.794 996.507 427.625 986.734 417.28L968.744 398.402C956.992 386.105 948.672 372.545 943.785 357.712C935.344 331.984 931.123 293.538 931.123 242.362C931.123 186.99 935.269 141.553 943.57 106.03C951.861 70.5177 963.614 52.7616 978.818 52.7616C992.803 52.7616 1004.69 68.3495 1014.47 99.536C1024.25 130.723 1029.14 180.561 1029.14 249.072H1011.68C1010.78 216.073 1008.88 190.765 1005.95 173.15C1000.52 140.992 991.302 124.908 978.302 124.908C967.797 124.908 960.256 135.253 955.66 155.954C951.064 176.655 948.766 200.701 948.766 228.101C948.766 258.306 951.477 280.398 956.907 294.379C960.462 303.333 968.51 314.508 981.059 327.939L999.687 347.658C1008.67 357.173 1015.6 370.172 1020.49 386.666C1028.93 415.468 1033.15 457.28 1033.15 512.091C1033.15 580.322 1027.77 629.124 1016.99 658.488C1006.22 687.851 993.703 702.533 979.437 702.533C962.807 702.533 949.788 682.964 940.381 643.806C930.973 604.939 926.358 552.221 926.546 485.662H943.992V485.64Z" fill="black"/>
<path d="M1047.39 68.274L1086.78 593.029L1125.71 68.274H1146.52L1096.49 684.464H1076.8L1026.86 68.274H1047.39Z" fill="black"/>
<path d="M1278.04 485.64C1278.46 520.603 1280.23 548.984 1283.35 570.797C1289.29 611.627 1299.75 632.037 1314.73 632.037C1321.45 632.037 1327.56 627.571 1333.08 618.617C1343.75 601.282 1349.09 570.246 1349.09 525.5C1349.09 491.94 1346.83 468.035 1342.31 453.774C1337.72 439.794 1330.56 427.625 1320.78 417.28L1302.79 398.402C1291.04 386.105 1282.72 372.545 1277.84 357.712C1269.39 331.984 1265.17 293.538 1265.17 242.362C1265.17 186.99 1269.32 141.553 1277.62 106.03C1285.91 70.5177 1297.66 52.7616 1312.87 52.7616C1326.85 52.7616 1338.74 68.3495 1348.52 99.536C1358.3 130.723 1363.19 180.561 1363.19 249.072H1345.73C1344.83 216.073 1342.93 190.765 1340 173.15C1334.57 140.992 1325.35 124.908 1312.35 124.908C1301.85 124.908 1294.31 135.253 1289.71 155.954C1285.11 176.655 1282.82 200.701 1282.82 228.101C1282.82 258.306 1285.53 280.398 1290.96 294.379C1294.51 303.333 1302.56 314.508 1315.11 327.939L1333.74 347.658C1342.72 357.173 1349.65 370.172 1354.54 386.666C1362.98 415.468 1367.2 457.28 1367.2 512.091C1367.2 580.322 1361.82 629.124 1351.04 658.488C1340.27 687.851 1327.75 702.533 1313.49 702.533C1296.86 702.533 1283.84 682.964 1274.43 643.806C1265.02 604.939 1260.41 552.221 1260.6 485.662H1278.04V485.64Z" fill="black"/>
<path d="M1237.49 485.64C1235.75 513.839 1233.46 537.496 1230.61 556.525C1223.57 603.785 1213.34 627.409 1199.89 627.409C1185.28 627.409 1174.3 604.95 1166.92 560.031C1159.56 515.112 1155.87 456.547 1155.87 384.335C1155.87 296.18 1159.95 230.755 1168.11 188.069C1176.27 145.393 1186.99 124.045 1200.25 124.045C1211.13 124.045 1219.57 135.652 1225.59 158.856C1231.4 181.229 1235.32 211.348 1237.4 249.039H1255.62C1254.39 198.457 1249.19 153.128 1239.98 113.128C1230.51 72.0172 1217.19 51.4671 1200.03 51.4671C1179.92 51.4671 1164.15 83.0959 1152.7 146.321C1142.12 204.53 1136.83 279.104 1136.83 370.042C1136.83 489.815 1143.88 578.38 1157.97 635.737C1168.67 679.113 1181.89 700.796 1197.64 700.796C1215.91 700.796 1230.43 674.378 1241.19 621.519C1248.88 583.925 1253.84 538.585 1256.12 485.608H1237.49V485.64Z" fill="black"/>
<path d="M835.124 423.979H878.064C877.876 496.126 873.805 548.348 865.842 580.646C857.879 612.943 847.834 629.092 835.706 629.092C819.845 629.092 808.412 606.093 801.405 560.085C794.389 514.087 790.881 454.454 790.881 381.186C790.881 296.45 795.13 232.696 803.628 189.913C812.126 147.13 822.593 125.728 835.031 125.728C845.507 125.728 854.193 136.008 861.077 156.558C867.652 176.192 872.07 207.108 874.359 249.05H892.808C889.619 171.736 881.525 117.227 868.431 85.8791C859.173 63.5167 848.199 52.3301 835.509 52.3301C816.985 52.3301 801.902 81.4238 790.244 139.579C777.975 200.55 771.841 282.621 771.841 385.803C771.841 489.276 778.116 570.646 790.666 629.933C802.174 677.193 815.915 700.818 831.898 700.818C844.26 700.818 854.456 690.473 862.475 669.782C867.249 657.765 872.727 636.222 878.908 605.187L883.391 684.464H895.341V354.767H835.124V423.979Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

1
styles/_spacing.scss Normal file
View File

@ -0,0 +1 @@
$page-margin-x: 60px;

12
styles/_typography.scss
View File

@ -37,6 +37,18 @@
font-weight: 300;
line-height: 30px; /* 120% */
letter-spacing: -0.75px;
a,
a:visited,
a:hover {
font-family: var(--font-dia);
font-weight: 100;
letter-spacing: -0.25px;
text-decoration-line: underline;
text-decoration-thickness: 3%;
text-underline-offset: 7%;
}
}
@mixin list {