בנייה מחדש של האתר מאפס, כולל תצוגות חומרה אינטראקטיביות ואנימציות SVG מתקדמות
לקוח
פלוקסורה
תעשייה
פתרונות תשלום ונקודות מכירה (POS)
שירותים
עיצוב מחדש של אתרים, מעבר ל-Framer, רכיבי קוד מותאמים אישית, ואנימציות SVG
ארסנל טכנולוגי
Framer, אנימציות SVG מותאמות אישית, רכיבים אינטראקטיביים, מערכות ניהול תוכן (CMS)
שנה
2026
ראו כיצד סטודיו AGR עיצב מחדש מאפס את אתר ה-POS של Fluxora עם תצוגות חומרה אינטראקטיביות, אנימציות SVG מותאמות אישית, והעביר את הכל ל-Framer.
Fluxora מספקת חומרת נקודות מכירה (POS) ופתרונות סליקת תשלומים לקמעונאות, מסעדות ועסקי שירותים. האתר הקיים שלהם היה בנוי על פלטפורמה מיושנת ולא הצליח להציג את ליין החומרה שלהם או לתקשר את העומק והיכולות של תשתית התשלומים שלהם.
הבריף היה שאפתני: לעצב מחדש את הכל מאפס, להעביר את האתר ל-Framer, ולייצר חוויה אינטראקטיבית שבה בעלי עסקים יכולים לחקור מכשירי קופה, להבין את יכולות התשתית ולמצוא פתרונות מותאמים אישית לתעשייה שלהם – כאשר הכל מכוון ומניע להשארת פרטים לקבלת הצעת מחיר וייעוץ מומחה.
מחקר שוק
חקרנו כיצד בעלי עסקים באמת מעריכים מערכות קופה (POS). ההחלטה היא לא רק לגבי חומרה, היא עוסקת באמון, אמינות והתאמה לתחום הפעילות. האתרים של המתחרים היו טכניים מדי (פנו למפתחים) או גנריים מדי (תמונות מאגר של קופאים מחייכים). פלוקסורה (Fluxora) הייתה חייבת לפנות בנימה אחרת: מקצועית, ברורה וממוקדת מוצר.
ארכיטקטורת מידע
עמוד הבית נבנה כמסע מונחה דרך 8 אזורים ייעודיים, שכל קטע בהם נותן מענה לשלב אחר בתהליך קבלת ההחלטות של העסק: מהצעת הערך הראשונית (הירו), דרך יצירת אמינות (שורת לוגואים וחוות דעת), היכרות עם המוצר (הצגת החומרה), התאמה לסוג העסק (רשת פתרונות), תשתית מוצר מעמיקה (עמודי תווך), אפשרויות מימון (Clover Capital), יתרונות תחרותיים (Benefits), ועד להנעה לפעולה (CTA סופי).
תצוגת מוצר אינטראקטיבית
גולת הכותרת של העיצוב מחדש היא אזור הדגשת החומרה האינטראקטיבי. במקום תמונות מוצר סטטיות, סוחרים יכולים לחקור כל מכשיר קופה (POS) באמצעות לוחות תוכן דינמיים המתעדכנים בהתאם לאינטראקציה, ומציגים תכונות, מפרטים ומקרי בוחן עבור כל מכשיר. פתרון זה הופך גלישה פסיבית לחוויית גילוי אקטיבית.
מערכת SVG מותאמת אישית
פיתחנו מערכת הנפשת SVG מותאמת אישית עבור אזור התשתית, שבה שלושה עמודי תווך לחיצים חושפים את שכבות מערך התשלומים של Fluxora. כל עמוד מונפש בעת אינטראקציה, כאשר לוחות תוכן מחליקים פנימה כדי להסביר את תהליכי סליקת התשלומים, מנגנוני האבטחה ויכולות האינטגרציה. ההנפשות הן קלות משקל, מבוססות האצת חומרה (GPU) ומרגישות כחלק אינטגרלי מהפלטפורמה.
ארכיטקטורת רכיבים
כל אזור נבנה כרכיב עצמאי וסגור עם ניהול מצב (state) משלו. פרויקטור החומרה (hardware spotlight) משתמש במכונת מצבים כדי לעקוב אחר המכשיר הפעיל, תוך עדכון תמונות, תכונות והנעות לפעולה (CTAs) בסנכרון מלא. עמודי התווך של התשתית מנהלים את מצבי הפתיחה/סגירה שלהם בעזרת מעברי CSS חלקים.
כרטיסי הפתרונות התעשייתיים משתמשים בגריד של 3 עמודות עם חשיפת תוכן המופעלת בריחוף (hover). כל כרטיס מקושר לתצוגה מסוננת של מקרי מבחן ואינטגרציות רלוונטיות, מה שיוצר נתיבי תוכן עמוקים מבלי להעמיס על דף הבית.
ביצועים
למרות האינטראקטיביות הגבוהה, העמוד מקבל ציון מעל 90 ב-Lighthouse. אנימציות SVG משתמשות ב-requestAnimationFrame לרינדור חלק, תמונות מוגשות בפורמט WebP עם טעינה עצלה (lazy loading), וניהול המצב מבוסס על vanilla JS - ללא תקורה של פריימוורקים.
u05d0u05d9u05deu05e4u05e7u05d8
u05d4u05d0u05eau05e8 u05d4u05deu05e2u05d5u05e6u05d1 u05deu05d7u05d3u05e9 u05e9u05d9u05e0u05d4 u05dcu05d7u05dcu05d5u05d1u05d9u05df u05d0u05ea u05d4u05e0u05d5u05dbu05d7u05d5u05ea u05d4u05d3u05d9u05d2u05d9u05d8u05dcu05d9u05ea u05e9u05dc Fluxora u2013 u05deu05d0u05eau05e8 u05eau05d3u05deu05d9u05ea u05deu05d9u05d5u05e9u05df u05dcu05d7u05dcu05d5u05df u05e1u05e0u05e9u05e6u05d9u05d5u05e0u05dcu05d9 u05d5u05d0u05d9u05e0u05d2u05d9u05d9u05d2'u05d9u05e0u05d2u05d9 u05dcu05d4u05e6u05d3u05ea u05d4u05deu05d5u05e6u05e8u05d9u05dd. u05d4u05deu05e2u05d5u05e8u05d1u05d5u05ea u05e9u05dc u05e1u05d5u05d7u05e8u05d9u05dd u05d1u05d0u05d6u05d5u05e8 u05d4u05d7u05d5u05deu05e8u05d4 u05d4u05d9u05e2u05d5u05d3u05d9 u05e2u05d1u05e8u05d4 u05d0u05ea u05dbu05dc u05d4u05eau05d4u05d6u05d9u00adu05d5u05ea, u05e2u05dd u05d6u05deu05df u05e9u05d4u05d9u05d9u05d4 u05deu05deu05d5u05e6u05e2 u05d1u05e2u05deu05d5u05d3 u05e9u05e6u05deu05d7 u05d1u05d0u05d5u05e4u05df u05d3u05e8u05deu05d8u05d9 u05d1u05d4u05e9u05d5u05d5u05d0u05d4 u05dcu05d0u05eau05e8 u05d4u05e7u05d5u05d3u05dd. u05d1u05e0u05d5u05e1u05e3, u05dbu05deu05d5u05ea u05d1u05e7u05e9u05d5u05ea u05d4u05e6u05e2u05d5u05ea u05d4u05deu05d7u05d9u05e8 u05d3u05e8u05da u05d4u05dbu05e4u05eau05d5u05e8u05d9 u05d4u05d4u05e0u05e2u05d4 u05dcu05e4u05e2u05d5u05dcu05d4 (CTA) u05d4u05d2u05d3u05d9u05dcu05d4 u05d1u05d0u05d5u05e4u05df u05deu05d5u05d1u05d4u05e7 u05d5u05deu05d3u05d9u05d3 u05dbu05d1u05e8 u05d1u05d7u05d5u05d3u05e9 u05d4u05e3 u05d0u05d7u05e8u05d9 u05d4u05d4u05e9u05e7u05d4.
8
אזורים אינטראקטיביים
90+
ציון Lighthouse
12
רכיבים מותאמים אישית
