awesome-academy · HoangTruongNam · Sep 4, 2024 · Sep 6, 2024
diff --git a/my-app/.DS_Store b/my-app/.DS_Store
diff --git a/my-app/db.json b/my-app/db.json
@@ -1,16 +1,67 @@
 {
-    "Newgen":[
+    "Headphone":[
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MX2D3?wid=400&hei=400&fmt=jpeg&qlt=90&.v=1713841707336",
+            "new": "New",
+            "title": "Apple Pencil Pro",
+            "price": "3.499.000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MWR53?wid=400&hei=400&fmt=jpeg&qlt=90&.v=1713934300288",
+            "new": "New",
+            "title": "Magic Keyboard cho iPad Pro 13 inch (M4) Đen",
+            "price": "9.799.000đ"
+        }
+    ],
+
+    "Acs":[
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MX2D3?wid=400&hei=400&fmt=jpeg&qlt=90&.v=1713841707336",
+            "new": "New",
+            "title": "Apple Pencil Pro",
+            "price": "3.499.000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MWR53?wid=400&hei=400&fmt=jpeg&qlt=90&.v=1713934300288",
+            "new": "New",
+            "title": "Magic Keyboard cho iPad Pro 13 inch (M4) Đen",
+            "price": "9.799.000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MT4U3?wid=400&hei=400&fmt=jpeg&qlt=90&.v=1693594248668",
+            "new": "New",
+            "title": "Ốp Lưng Vải Tinh Dệt MagSafe cho iPhone 15 Pro - Xanh Lục Thẫm",
+            "price": "1000đ"
+        },
         {
             "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/store-card-40-iphone-15-pro-202309?wid=800&hei=1000&fmt=p-jpg&qlt=95&.v=1692910040844",
-            "subcript": "The future is here.",
+            "new": "New",
             "title": "iPhone 15 Pro",
-            "detail": "Experience the next generation of iPhone with advanced technology and sleek design."
+            "price": "1000đ"
         },
         {
             "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/store-card-40-iphone-15-pro-202309?wid=800&hei=1000&fmt=p-jpg&qlt=95&.v=1692910040844",
-            "subcript": "The future is here.",
-            "title": "iPhone 16 Pro",
-            "detail": "Experience the next generation of iPhone with advanced technology and sleek design."
+            "new": "New",
+            "title": "iPhone 15 Pro",
+            "price": "1000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/store-card-40-iphone-15-pro-202309?wid=800&hei=1000&fmt=p-jpg&qlt=95&.v=1692910040844",
+            "new": "New",
+            "title": "iPhone 15 Pro",
+            "price": "1000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/store-card-40-iphone-15-pro-202309?wid=800&hei=1000&fmt=p-jpg&qlt=95&.v=1692910040844",
+            "new": "New",
+            "title": "iPhone 15 Pro",
+            "price": "1000đ"
+        },
+        {
+            "image":"https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/store-card-40-iphone-15-pro-202309?wid=800&hei=1000&fmt=p-jpg&qlt=95&.v=1692910040844",
+            "new": "New",
+            "title": "iPhone 15 Pro",
+            "price": "1000đ"
         }
     ]
 }
diff --git a/my-app/public/31.svg b/my-app/public/31.svg
diff --git a/my-app/public/32.svg b/my-app/public/32.svg
diff --git a/my-app/public/33.svg b/my-app/public/33.svg
diff --git a/my-app/public/34.svg b/my-app/public/34.svg
diff --git a/my-app/public/35.svg b/my-app/public/35.svg
diff --git a/my-app/public/36.svg b/my-app/public/36.svg
diff --git a/my-app/public/acs.png b/my-app/public/acs.png
diff --git a/my-app/public/airpod.png b/my-app/public/airpod.png
diff --git a/my-app/public/airtag.png b/my-app/public/airtag.png
diff --git a/my-app/public/genius.jpeg b/my-app/public/genius.jpeg
diff --git a/my-app/public/ipad.png b/my-app/public/ipad.png
diff --git a/my-app/public/iphone.png b/my-app/public/iphone.png
diff --git a/my-app/public/mac.png b/my-app/public/mac.png
diff --git a/my-app/public/specialist-helpjpeg.jpeg b/my-app/public/specialist-helpjpeg.jpeg
diff --git a/my-app/public/supportericon.jpeg b/my-app/public/supportericon.jpeg
diff --git a/my-app/public/tv.png b/my-app/public/tv.png
diff --git a/my-app/public/watch.png b/my-app/public/watch.png
diff --git a/my-app/src/.DS_Store b/my-app/src/.DS_Store
diff --git a/my-app/src/App.js b/my-app/src/App.js
@@ -3,16 +3,51 @@ import Navbar from './components/Navbar';
 import LanguageSwitcher from './components/LanguageSwitcher';
 import NewGen from './components/Newgen';
 import StoreTitle from './components/StoreTitle';
+import Advertise from './components/Advertise';
+import Footer from './components/Footer';
+import Headphone from './components/Headphone';
+import Support from './components/Support';
+import Ad2 from './components/Ad2';
+import Acs from './components/Acs';
+import { useTranslation } from 'react-i18next';
 import './assets/css/global.css';
 import'./assets/scripts/i18n';
 
 function App() {
+  const {t} = useTranslation();
+
   return (
     <div>
       <Navbar />
       <LanguageSwitcher />
       <StoreTitle/>
-      <NewGen/>
+      <Advertise/>
+      <div className="whitespace-nowrap flex mx-36 mt-20 font text-2xl">
+                <p><strong>{t('lastgen')}.</strong><b className="b" >{t('lastgenqote')}</b></p>
+      </div>
+      <div>
+        <NewGen/>
+        <div className="whitespace-nowrap flex mx-36 mt-4 font text-2xl">
+                <p><strong>{t('supporttitle')}.</strong><b className="b" >{t('supporqote')}</b></p>
+        </div>
+        <Support/>
+        <div className="whitespace-nowrap flex mx-36 mt-14 font text-2xl">
+                <p><strong>{t('supporttitle')}.</strong><b className="b" >{t('supporqote')}</b></p>
+        </div>
+        <Ad2/>
+        <div className="whitespace-nowrap flex mx-36 mt-14 font text-2xl">
+                <p><strong>{t('supporttitle')}.</strong><b className="b" >{t('supporqote')}</b></p>
+        </div>
+        <Acs/>
+        <div className="whitespace-nowrap flex mx-36 mt-14 font text-2xl">
+                <p><strong>{t('supporttitle')}.</strong><b className="b" >{t('supporqote')}</b></p>
+        </div>
+        <Headphone/>
+        <div className="border-t-2 mx-40 mt-14">
+          <Footer/>
+        </div>
+
+      </div>
     </div>
   );
 }

diff --git a/my-app/src/assets/css/acs.css b/my-app/src/assets/css/acs.css
@@ -0,0 +1,99 @@
+.acs-new-generation-section {
+    position: relative;
+    width: calc(100% + 600px);
+    margin-left: calc(-50vw + 8%); 
+    margin-right: calc(-50vw + 50%); 
+    overflow: hidden; 
+}
+
+.acs-product {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    border-radius: 12px; 
+    transition: transform 0.4s ease, box-shadow 0.4s ease; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    min-height: 500px;
+    background-color: white;
+    padding-top: 40px;
+}
+
+.acs-product img {
+    width: 65%;
+    height: auto;
+    transition: transform 0.3s ease;
+    border-radius: 12px;
+    transform: translateY(20px);
+}
+
+.acs-product:hover {
+    transform: scale(1.01);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.acs-product-info {
+    position: absolute;
+    left: 200px;
+    transform: translateX(-50%);
+    background-color: transparent;
+    top: 22px;
+}
+
+.acs-product-info h2 {
+    width: 350px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    background-color: transparent;
+    transform: translateY(320px);
+}
+
+.acs-product-info p {
+    width: 350px;
+    margin-bottom: 10px;
+    background-color: transparent;
+    transform: translateY(320px);
+}
+
+.slick-prev {
+    transform: translateX(225px);
+    z-index: 2;
+    scale: 3;
+    color: #858585; 
+    border-radius: 50%;
+    opacity: 0.8;    
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
+}
+
+.slick-next {
+    transform: translateX(-25px);
+    z-index: 2;
+    scale: 3;
+    color: #858585; 
+    border-radius: 50%;
+    opacity: 0.8;     
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.slick-slider {
+    width: 100%; 
+    padding: 8px;
+    overflow: hidden;
+
+}
+
+.slick-slide {
+    display: flex;
+    justify-content: center;
+    margin: 0 10px;
+}
+
+.slick-track {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    overflow: hidden; 
+    display: flex;
+}
+
+.uu-dai {
+    color: #b64400;
+}
diff --git a/my-app/src/assets/css/ad2.css b/my-app/src/assets/css/ad2.css
@@ -0,0 +1,107 @@
+.ad2-new-generation-section {
+    position: relative;
+    width: calc(100% + 600px);
+    margin-left: calc(-50vw + 8%); 
+    margin-right: calc(-50vw + 50%); 
+    overflow: hidden; 
+}
+
+.ad2-product {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    border-radius: 12px; 
+    transition: transform 0.4s ease, box-shadow 0.4s ease; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    max-height: 250px;
+    background-color: white;
+}
+
+.ad2-product img {
+    width: 10%;
+    height: auto;
+    transition: transform 0.3s ease;
+    border-radius: 12px;
+    min-height: 250px;
+    background-color: white;
+    transform: translate(100%, -28%);
+}
+
+.ad2-product:hover {
+    transform: scale(1.01);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.ad2-product-info {
+    position: absolute;
+    left: 200px;
+    transform: translate(-46%, 50%);
+    background-color: transparent;
+    top: 22px;
+
+}
+
+.ad2-product-info h2 {
+    width: 350px;
+    font-size: 24px;
+    margin-bottom: 10px;
+    background-color: transparent;
+}
+
+.ad2-product-info p {
+    width: 350px;
+    margin-bottom: 10px;
+    background-color: transparent;
+}
+
+.slick-prev {
+    transform: translateX(225px);
+    z-index: 2;
+    scale: 3;
+    color: #858585; 
+    border-radius: 50%;
+    opacity: 0.8;    
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
+}
+
+.slick-next {
+    transform: translateX(-25px);
+    z-index: 2;
+    scale: 3;
+    color: #858585; 
+    border-radius: 50%;
+    opacity: 0.8;     
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+
+}
+
+.slick-slider {
+    width: 100%; 
+    padding: 8px;
+    overflow: hidden;
+
+}
+
+.slick-slide {
+    display: flex;
+    justify-content: center;
+    margin: 0 10px; 
+
+}
+
+.slick-track {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    overflow: hidden; 
+    display: flex;
+}
+
+.uu-dai {
+    color: #b64400;
+}
+
+h2 b {
+    background-color: white;
+    font-weight: 700;
+}
diff --git a/my-app/src/assets/css/global.css b/my-app/src/assets/css/global.css
@@ -2,3 +2,8 @@
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity))
 }
+
+.b {
+    font-weight: 700;
+    color: gray;
+}