From 33c942f26170d6c2b90cba12f7c1b0c662c4cb4c Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Fri, 16 Feb 2024 08:36:04 +0400 Subject: [PATCH] Migrate product content to Markdown format and add new features Product information previously stored in JSON files has been migrated to Markdown format for efficient content management. Additionally, added a new button component for 404 pages to improve navigation and user experience. Defined a new schema for product collections and included GSAP JavaScript library for future animations. --- public/assets/vendor/gsap/gsap.min.js | 11 ++ src/components/ui/buttons/Btn404.astro | 39 +++++ src/components/ui/buttons/ProductTabBtn.astro | 4 +- src/components/ui/images/ImgSmall.astro | 28 ++-- src/components/ui/images/ImgWide.astro | 24 ++- src/content/config.ts | 64 ++++++++ src/content/products/a765.md | 56 +++++++ src/content/products/b203.json | 63 -------- src/content/products/b203.md | 56 +++++++ src/content/products/f303.md | 56 +++++++ src/content/products/t845.md | 56 +++++++ ...ct-main.avif => product-image-3-main.avif} | Bin src/layouts/MainLayout.astro | 2 +- src/pages/404.astro | 9 +- src/pages/prod.astro | 141 +++++++----------- src/pages/products/index.astro | 52 +++---- vercel.json | 2 +- 17 files changed, 458 insertions(+), 205 deletions(-) create mode 100644 public/assets/vendor/gsap/gsap.min.js create mode 100644 src/components/ui/buttons/Btn404.astro create mode 100644 src/content/config.ts create mode 100644 src/content/products/a765.md delete mode 100644 src/content/products/b203.json create mode 100644 src/content/products/b203.md create mode 100644 src/content/products/f303.md create mode 100644 src/content/products/t845.md rename src/images/{product-main.avif => product-image-3-main.avif} (100%) diff --git a/public/assets/vendor/gsap/gsap.min.js b/public/assets/vendor/gsap/gsap.min.js new file mode 100644 index 0000000..14dd0a4 --- /dev/null +++ b/public/assets/vendor/gsap/gsap.min.js @@ -0,0 +1,11 @@ +/*! + * GSAP 3.12.5 + * https://gsap.com + * + * @license Copyright 2024, GreenSock. All rights reserved. + * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com + */ + +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Vt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Mt(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&Ct(t,"onInterrupt"),t}function wb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Wt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(ze,i,_e)}else At.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&St,e&St]:0:zt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),zt[e])p=zt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=c=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(Z(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof $t?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=$t.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||X,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||Z(t)||$(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(Z(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Nt,Gt,Wt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?re:te:Zt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(d=ka(p,n)+(Ya(p)||0))&&0!==d||(n=d))),!f||p!==n||Gt)return isNaN(p*n)||""===n?(c||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ka(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),D.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||Rt.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Gt=1,t.vars[e]="+=0",Qt(t,s),Gt=0,o?R(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ia(r)+Ya(h.e)),h.b&&(h.b=u.s+Ya(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Mt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa($t.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){$t[r]=function(){var t=new Xt,e=kt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Zt=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:Zt},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ae,this.d=s||this,this.set=o||Zt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=$t,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2 + + `; +--- + + \ No newline at end of file diff --git a/src/components/ui/buttons/ProductTabBtn.astro b/src/components/ui/buttons/ProductTabBtn.astro index d431485..3b6e8cd 100644 --- a/src/components/ui/buttons/ProductTabBtn.astro +++ b/src/components/ui/buttons/ProductTabBtn.astro @@ -11,7 +11,7 @@ interface Props { const BUTTON_CLASS = "flex w-full justify-center rounded-xl border border-transparent p-3 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 focus-visible:ring dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:focus:outline-none md:p-5"; - const HEADING_CLASS = "block text-center font-semibold"; + const HEADING_CLASS = "block text-center font-bold"; const INACTIVE_HEADING_CLASS = "text-neutral-800 dark:text-neutral-200"; --- @@ -19,7 +19,7 @@ const BUTTON_CLASS = type="button" class={`${BUTTON_CLASS} ${first ? "active bg-neutral-100 hover:border-transparent dark:bg-white/[.05]" : ""}`} id={id} -data-tab-target={dataTab} +data-target={dataTab} role="tab" >

; +} + +const imageClass = + "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; const AnchorSVG = ` @@ -17,14 +26,14 @@ const AnchorSVG = ` --- @@ -35,7 +44,6 @@ const AnchorSVG = ` {title} - + >{product.data.main.subTitle} + diff --git a/src/components/ui/images/ImgWide.astro b/src/components/ui/images/ImgWide.astro index 70abcf8..2f5a06a 100644 --- a/src/components/ui/images/ImgWide.astro +++ b/src/components/ui/images/ImgWide.astro @@ -3,13 +3,22 @@ import { Image } from "astro:assets"; const { title, src, alt, url } = Astro.props; interface Props { - title?: string; + title: string; src: any; alt: string; url: string; } -const imageClass = "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; +import type { CollectionEntry } from "astro:content"; + +const { product } = Astro.props; + +interface Props { + product: CollectionEntry<"products">; +} + +const imageClass = + "absolute inset-0 h-full w-full object-cover object-center transition duration-[600ms] ease-[cubic-bezier(0.45,0,0.55,1)] group-hover:scale-110"; const AnchorSVG = ` @@ -17,14 +26,15 @@ const AnchorSVG = ` ---
{title} {product.data.main.subTitle} diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..206b938 --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,64 @@ +// https://docs.astro.build/en/guides/content-collections/#defining-collections + +import { z, defineCollection } from 'astro:content'; + +const productCollection = defineCollection({ + type: 'content', + schema: ({ image }) => z.object({ + main: z.object({ + id: z.number(), + title: z.string(), + subTitle: z.string(), + content: z.string(), + imgCard: image(), + imgMain: image(), + imgAlt: z.string(), + }), + tabs: z.array( + z.object({ + id: z.string(), + dataTab: z.string(), + title: z.string(), + }) + ), + description: z.object({ + title: z.string(), + subTitle: z.string(), + btnTitle: z.string(), + btnURL: z.string(), + }), + descriptionList: z.array( + z.object({ + title: z.string(), + subTitle: z.string(), + }) + ), + specificationsLeft: z.array( + z.object({ + title: z.string(), + subTitle: z.string(), + }) + ), + specificationsRight: z.array( + z.object({ + title: z.string(), + subTitle: z.string(), + }) + ).optional(), + blueprints: z.object({ + first: z.string().optional(), + second: z.string().optional(), + }), + }), +}); + +// const blogCollection = defineCollection({ +// type: 'content', +// schema: z.object({}) +// }); + +// 3. Export a single `collections` object to register your collection(s) +export const collections = { + 'products': productCollection, + // 'blog': blogCollection, +}; \ No newline at end of file diff --git a/src/content/products/a765.md b/src/content/products/a765.md new file mode 100644 index 0000000..a5ca457 --- /dev/null +++ b/src/content/products/a765.md @@ -0,0 +1,56 @@ +--- +main: + id: 2 + title: "SF-AB A765" + subTitle: "Assorted Screw Set" + content: | + Introducing the SF-AB A765 Assorted Screw Set – the ultimate solution for your screw fastening needs. This comprehensive set includes a wide variety of screws meticulously curated to tackle various projects with ease and precision. + imgCard: "../../images/product-image-2.avif" + imgMain: "../../images/product-image-3-main.avif" + imgAlt: "Mockup boxes of assorted screw set" +tabs: + - id: "tabs-with-card-item-1" + dataTab: "#tabs-with-card-1" + title: "Description" + - id: "tabs-with-card-item-2" + dataTab: "#tabs-with-card-2" + title: "Specifications" + - id: "tabs-with-card-item-3" + dataTab: "#tabs-with-card-3" + title: "Blueprints" +description: + title: "Versatile Screw Fastening Solutions" + subTitle: | + The SF-AB A765 Assorted Screw Set offers unmatched versatility and convenience, making it the perfect choice for DIY enthusiasts and professionals alike. With a comprehensive selection of screws, you'll always have the right fastener for the job. + btnTitle: "Contact sales to learn more" + btnURL: "#" +descriptionList: + - title: "Wide Variety" + subTitle: "Includes a diverse range of screw types and sizes to accommodate various applications and materials." + - title: "Ease of Use" + subTitle: "Each screw is designed for effortless installation, ensuring hassle-free fastening every time." + - title: "Convenience" + subTitle: "Eliminates the need for multiple trips to the hardware store, saving time and effort on your projects." +specificationsLeft: + - title: "Material" + subTitle: "Constructed from high-quality materials such as stainless steel, ensuring durability and corrosion resistance." + - title: "Assortment" + subTitle: "Contains a generous assortment of screws, including wood screws, machine screws, and sheet metal screws." + - title: "Quantity" + subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks." + - title: "Sizes" + subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility." +specificationsRight: + - title: "Thread Design" + subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects." + - title: "Durability" + subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability." + - title: "Quality Assurance" + subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance." + - title: "Applications" + subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more." +blueprints: + first: "../../images/blueprint-1.avif" + second: "../../images/blueprint-2.avif" +slug: a765 +--- diff --git a/src/content/products/b203.json b/src/content/products/b203.json deleted file mode 100644 index 889f941..0000000 --- a/src/content/products/b203.json +++ /dev/null @@ -1,63 +0,0 @@ -{ - "main": { - "title": "SF-BN B203", - "subTitle": "Tap Bolts and Nuts Set", - "content": "Meet the SF-BN B203 – your reliable companion for professional-grade fastening. This comprehensive box set comes with a versatile selection of tap bolts and nuts, meticulously crafted to provide the strongest hold for your construction and assembly projects.", - "img": "../images/product-main.avif", - "imgAlt": "Mockup boxes of a tap bolts and nuts set" - }, - "tabs": [ - { - "id": "tabs-with-card-item-1", - "dataTab": "#tabs-with-card-1", - "title": "Product Description" - }, - { - "id": "tabs-with-card-item-2", - "dataTab": "#tabs-with-card-2", - "title": "Specifications" - }, - { - "id": "tabs-with-card-item-3", - "dataTab": "#tabs-with-card-3", - "title": "Blueprints" - } - ], - "description": { - "title": "Strength Meets Precision", - "subTitle": "The SF-BN B203 Tap Bolts and Nuts Set offers robust durability and precision for construction professionals, ensuring reliable performance in every application, from house framing to machinery assembly.", - "btnTitle": "Contact sales to learn more", - "btnURL": "#" - }, - "descriptionList": [ - { - "title": "Corrosion Resistance", - "subTitle": "Zinc coating not only provides a polished look but also shields against corrosion, ensuring longevity." - }, - { - "title": "Improved Safety", - "subTitle": "A secure fitting translates to safer structures with reduced risk of component failure." - }, - { - "title": "Convenience", - "subTitle": "This all-in-one set means you have the right size on hand, cutting down on project delays and additional trips to the hardware store." - } - ], - "specifications": [ - { - "id": "tabs-with-card-item-1", - "dataTab": "#tabs-with-card-1", - "title": "Product Description" - }, - { - "id": "tabs-with-card-item-2", - "dataTab": "#tabs-with-card-2", - "title": "Specifications" - }, - { - "id": "tabs-with-card-item-3", - "dataTab": "#tabs-with-card-3", - "title": "Blueprints" - } - ] -} \ No newline at end of file diff --git a/src/content/products/b203.md b/src/content/products/b203.md new file mode 100644 index 0000000..1e2d393 --- /dev/null +++ b/src/content/products/b203.md @@ -0,0 +1,56 @@ +--- +main: + id: 3 + title: "SF-BN B203" + subTitle: "Tap Bolts and Nuts Set" + content: | + Meet the SF-BN B203 – your reliable companion for professional-grade fastening. This comprehensive box set comes with a versatile selection of tap bolts and nuts, meticulously crafted to provide the strongest hold for your construction and assembly projects. + imgCard: "../../images/product-image-3.avif" + imgMain: "../../images/product-image-3-main.avif" + imgAlt: "Mockup boxes of a tap bolts and nuts set" +tabs: + - id: "tabs-with-card-item-1" + dataTab: "#tabs-with-card-1" + title: "Description" + - id: "tabs-with-card-item-2" + dataTab: "#tabs-with-card-2" + title: "Specifications" + - id: "tabs-with-card-item-3" + dataTab: "#tabs-with-card-3" + title: "Blueprints" +description: + title: "Strength Meets Precision" + subTitle: | + The SF-BN B203 Tap Bolts and Nuts Set offers robust durability and precision for construction professionals, ensuring reliable performance in every application, from house framing to machinery assembly. + btnTitle: "Contact sales to learn more" + btnURL: "#" +descriptionList: + - title: "Corrosion Resistance" + subTitle: "Zinc coating not only provides a polished look but also shields against corrosion, ensuring longevity." + - title: "Improved Safety" + subTitle: "A secure fitting translates to safer structures with reduced risk of component failure." + - title: "Convenience" + subTitle: "This all-in-one set means you have the right size on hand, cutting down on project delays and additional trips to the hardware store." +specificationsLeft: + - title: "Material Composition" + subTitle: "Manufactured from high-grade steel, delivering strength and reliability for demanding applications." + - title: "Surface Finish" + subTitle: "Protected with a zinc coating to offer enhanced corrosion resistance and longevity." + - title: "Quantity Per Set" + subTitle: "The set includes a balanced selection of 25 tap bolts and 25 matching nuts." + - title: "Size Assortment" + subTitle: "Features a comprehensive range of sizes to cater to various project requirements, ensuring compatibility and versatility." +specificationsRight: + - title: "Thread Details" + subTitle: "Engineered with precision-cut threads for a secure fit and easy installation." + - title: "Mechanical Properties" + subTitle: "Each bolt and nut is designed to meet specific load rating or strength grades, suitable for structural applications." + - title: "Standards and Certifications" + subTitle: "Complies with relevant industry standards and certifications, ensuring consistent quality and safety." + - title: "Suitable Applications" + subTitle: "Ideal for a wide array of uses, from construction environments to mechanical assemblies that demand strong and secure joints." +blueprints: + first: "../../images/blueprint-1.avif" + second: "../../images/blueprint-2.avif" +slug: b203 +--- diff --git a/src/content/products/f303.md b/src/content/products/f303.md new file mode 100644 index 0000000..0a5a120 --- /dev/null +++ b/src/content/products/f303.md @@ -0,0 +1,56 @@ +--- +main: + id: 4 + title: "SF-FN F303" + subTitle: "Hex Bolts" + content: | + Introducing the SF-FN F303 Hex Bolts – the perfect choice for heavy-duty fastening applications. Crafted with precision and durability in mind, these hex bolts provide the strength and reliability you need for your toughest projects. + imgCard: "../../images/product-image-4.avif" + imgMain: "../../images/product-image-3-main.avif" + imgAlt: "Mockup boxes of hex bolts" +tabs: + - id: "tabs-with-card-item-1" + dataTab: "#tabs-with-card-1" + title: "Description" + - id: "tabs-with-card-item-2" + dataTab: "#tabs-with-card-2" + title: "Specifications" + - id: "tabs-with-card-item-3" + dataTab: "#tabs-with-card-3" + title: "Blueprints" +description: + title: "Heavy-Duty Fastening Solutions" + subTitle: | + The SF-FN F303 Hex Bolts are designed to handle the toughest fastening challenges with ease. Whether you're working on construction projects or heavy machinery, these hex bolts deliver the strength and reliability you need. + btnTitle: "Contact sales to learn more" + btnURL: "#" +descriptionList: + - title: "Strength and Durability" + subTitle: "Constructed from high-quality materials, these hex bolts are built to withstand heavy loads and tough conditions." + - title: "Precision Engineering" + subTitle: "Engineered with precision-cut threads and exact specifications, ensuring a tight and secure fit every time." + - title: "Versatility" + subTitle: "Suitable for a wide range of applications, from construction to machinery, providing versatile fastening solutions." +specificationsLeft: + - title: "Material" + subTitle: "Made from premium-grade steel or alloy, offering exceptional strength and corrosion resistance." + - title: "Thread Design" + subTitle: "Precision-cut threads ensure optimal grip and reliability, even in high-stress environments." + - title: "Quantity" + subTitle: "Each set includes a sufficient quantity of hex bolts to tackle various projects and applications." + - title: "Sizes" + subTitle: "Available in a range of sizes to accommodate different project requirements, ensuring versatility and compatibility." +specificationsRight: + - title: "Finish" + subTitle: "Finished with a protective coating to enhance corrosion resistance and extend service life." + - title: "Load Capacity" + subTitle: "Designed to meet or exceed industry standards for load-bearing capacity, ensuring reliable performance under heavy loads." + - title: "Certifications" + subTitle: "Compliant with relevant industry standards and certifications, guaranteeing quality and reliability." + - title: "Applications" + subTitle: "Ideal for use in construction, machinery, automotive, and other heavy-duty applications that demand strong and reliable fastening." +blueprints: + first: "../../images/blueprint-1.avif" + second: "../../images/blueprint-2.avif" +slug: f303 +--- diff --git a/src/content/products/t845.md b/src/content/products/t845.md new file mode 100644 index 0000000..14850d1 --- /dev/null +++ b/src/content/products/t845.md @@ -0,0 +1,56 @@ +--- +main: + id: 1 + title: "SF-TB T845" + subTitle: "Machine Screws" + content: | + Introducing the SF-TB T845 – your go-to solution for precision fastening in machinery and equipment. This comprehensive set of machine screws is meticulously crafted to meet the stringent demands of industrial applications, ensuring secure and reliable fastening. + imgCard: "../../images/product-image-1.avif" + imgMain: "../../images/product-image-3-main.avif" + imgAlt: "Mockup boxes of machine screws set" +tabs: + - id: "tabs-with-card-item-1" + dataTab: "#tabs-with-card-1" + title: "Description" + - id: "tabs-with-card-item-2" + dataTab: "#tabs-with-card-2" + title: "Specifications" + - id: "tabs-with-card-item-3" + dataTab: "#tabs-with-card-3" + title: "Blueprints" +description: + title: "Precision Fastening Solutions" + subTitle: | + The SF-TB T845 Machine Screws offer unparalleled precision and reliability for industrial applications, ensuring seamless operation and longevity for your machinery and equipment. + btnTitle: "Contact sales to learn more" + btnURL: "#" +descriptionList: + - title: "Durability" + subTitle: "Crafted from high-quality materials, these machine screws are built to withstand the rigors of industrial environments." + - title: "Precision Engineering" + subTitle: "Engineered with precision-cut threads and exact specifications, ensuring a tight and secure fit for every application." + - title: "Versatility" + subTitle: "Suitable for a wide range of machinery and equipment, providing versatile fastening solutions for various industrial needs." +specificationsLeft: + - title: "Material Composition" + subTitle: "Constructed from premium-grade steel or alloy for exceptional strength and durability." + - title: "Surface Finish" + subTitle: "Finished with a protective coating to enhance corrosion resistance and extend service life." + - title: "Quantity Per Set" + subTitle: "Each set contains a comprehensive assortment of machine screws to meet diverse industrial requirements." + - title: "Size Range" + subTitle: "Available in various sizes and lengths to accommodate different machinery and equipment specifications." +specificationsRight: + - title: "Thread Specifications" + subTitle: "Precision-engineered threads ensure optimal grip and reliability, even in high-vibration environments." + - title: "Load Capacity" + subTitle: "Designed to meet or exceed industry standards for load-bearing capacity, ensuring safe and reliable operation." + - title: "Certifications" + subTitle: "Compliant with relevant industry standards and certifications, guaranteeing quality and reliability." + - title: "Applications" + subTitle: "Ideal for use in a wide range of industrial machinery, equipment, and assemblies that demand precise and secure fastening." +blueprints: + first: "../../images/blueprint-1.avif" + second: "../../images/blueprint-2.avif" +slug: t845 +--- diff --git a/src/images/product-main.avif b/src/images/product-image-3-main.avif similarity index 100% rename from src/images/product-main.avif rename to src/images/product-image-3-main.avif diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 948deee..520d216 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -27,6 +27,7 @@ interface Props { document.documentElement.classList.remove("dark"); } + - diff --git a/src/pages/404.astro b/src/pages/404.astro index cf34bb5..b693371 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,7 +1,7 @@ --- // Import section components import MainLayout from "../layouts/MainLayout.astro"; -import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro"; +import Btn404 from "../components/ui/buttons/Btn404.astro"; --- - +
+ diff --git a/src/pages/prod.astro b/src/pages/prod.astro index 89de13e..03891d7 100644 --- a/src/pages/prod.astro +++ b/src/pages/prod.astro @@ -1,7 +1,7 @@ --- // Import section components import MainLayout from "../layouts/MainLayout.astro"; -import productData from "../content/products/b203.json"; +import productData from "../content/products/b203.md"; import ProductTabBtn from "../components/ui/buttons/ProductTabBtn.astro"; import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro"; @@ -28,7 +28,9 @@ import { Image } from "astro:assets"; {productData.main.content}

-
+

- +
- +