From 5d5451a33bbbfb21f5e72d6f13dfdfb4d2153ca7 Mon Sep 17 00:00:00 2001 From: yayunhuang Date: Tue, 13 Aug 2024 17:06:26 +0800 Subject: [PATCH] Update use case page ui --- public/Images/use_case_1.svg | 21 ++++++ public/Images/use_case_2.svg | 7 ++ public/Images/use_case_3.svg | 17 +++++ public/Images/use_case_4.svg | 16 ++++ public/Images/use_case_5.svg | 11 +++ src/pages/use_case.astro | 142 ++++++++++++++++++++++------------- src/styles/use_case.css | 62 +++++++++++++++ 7 files changed, 225 insertions(+), 51 deletions(-) create mode 100644 public/Images/use_case_1.svg create mode 100644 public/Images/use_case_2.svg create mode 100644 public/Images/use_case_3.svg create mode 100644 public/Images/use_case_4.svg create mode 100644 public/Images/use_case_5.svg create mode 100644 src/styles/use_case.css diff --git a/public/Images/use_case_1.svg b/public/Images/use_case_1.svg new file mode 100644 index 0000000..888937b --- /dev/null +++ b/public/Images/use_case_1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Images/use_case_2.svg b/public/Images/use_case_2.svg new file mode 100644 index 0000000..b90367a --- /dev/null +++ b/public/Images/use_case_2.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/Images/use_case_3.svg b/public/Images/use_case_3.svg new file mode 100644 index 0000000..3ea832f --- /dev/null +++ b/public/Images/use_case_3.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/Images/use_case_4.svg b/public/Images/use_case_4.svg new file mode 100644 index 0000000..eea9d61 --- /dev/null +++ b/public/Images/use_case_4.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/Images/use_case_5.svg b/public/Images/use_case_5.svg new file mode 100644 index 0000000..720e4f5 --- /dev/null +++ b/public/Images/use_case_5.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/use_case.astro b/src/pages/use_case.astro index 07c78d7..f464c3f 100644 --- a/src/pages/use_case.astro +++ b/src/pages/use_case.astro @@ -1,5 +1,6 @@ --- import "/src/styles/home.css"; +import "/src/styles/use_case.css"; import BaseLayout from "../layouts/BaseLayout.astro"; --- @@ -9,57 +10,96 @@ import BaseLayout from "../layouts/BaseLayout.astro"; name="description" content="Designers and developers can use MockUPhone to wrap app screenshots in devices. MockUPhone is great for app design presentation and app website and promotion." /> -
-

Use case

-
-
-

- MockUPhone helps you to wrap your app screenshots in your favorite - iOS/ Android/ Win Phone devices with multiple colors and orientations. - Use this tool to help you with things like: -

-

App Design Presentation

-

- Present your web/ app designs using real device canvas, impress your - clients with perfect screenshots generated by this effortless - drag-and-drop tool. -

- -

App Website and Promotion

-

- Display your app screenshots on websites and marketing materials in - real device arts, and provide better visual context for your designs. -

- -

Responsive Design Presentation

-

- Compare the looks of your web/ app designs on different canvas to give - an idea of responsive design in the context of real mobile devices. -

- -

App Concept Design

-

- Showcase your app concept in the frames of real devices, to illustrate - process and workflow in a more realistic and impressive way. -

- -

Share Your App Designs

-

- Show off your creativities and talents in front of your friends! - Embrace the comments and keep improving! -

- -

Still need a reason?

-
    -
  • - IT SAVES YOUR TIME and let you focus on designing and developing - better apps -
    • -
  • - It helps people understand your app works on certain mobile devices -
    • -
  • It impresses your clients & attracts customers
    • -
+
+
+
+
+

Use case

+

+ MockUPhone helps you to wrap your app screenshots in your favorite + iOS/Android/Win Phone devices with multiple colors and orientations. + Use this tool to help you with things like: +

+
+
+
+
+ +
+
+

App Design Presentation

+

+ Present your web/app designs using real device canvas, impress + your clients with perfect screenshots generated by this effortless + drag-and-drop tool. +

+
+
+
+
+ +
+
+

Responsive Design Presentation

+

+ Compare the looks of your web/app designs on different canvas to + give an idea of responsive design in the context of real mobile + devices. +

+
+
+
+
+ +
+
+

App Website and Promotion

+

+ Display your app screenshots on websites and marketing materials + in real device arts, and provide better visual context for your + designs. +

+
+
+
+
+ +
+
+

App Concept Design

+

+ Showcase your app concept in the frames of real devices, to + illustrate process and workflow in a more realistic and impressive + way. +

+
+
+
+
+ +
+
+

Share Your App Designs

+

+ Show off your creativities and talents in front of your friends! + Embrace the comments and keep improving! +

+
+
+
+

Still need a reason?

+
    +
  • + IT SAVES YOUR TIME and let you focus on designing and developing + better apps +
    • +
  • + It helps people understand your app works on certain mobile + devices +
    • +
  • It impresses your clients & attracts customers
    • +
+
diff --git a/src/styles/use_case.css b/src/styles/use_case.css new file mode 100644 index 0000000..90a044e --- /dev/null +++ b/src/styles/use_case.css @@ -0,0 +1,62 @@ +.use-case-page { + .title { + font-size: 32px; + font-weight: bold; + } + + h2 { + font-size: 20px; + font-weight: bold; + margin-bottom: 4px; + } + + p { + margin-bottom: 0; + text-align: left !important; + } + + .col-12 { + padding: 20px !important; + } + + ul { + padding-inline-start: 20px; + } +} + +@media (max-width: 768px) { + .use-case-page { + .col-12 { + padding: 16px !important; + } + } +} + +.use-case-card { + display: flex; + flex-direction: column; + justify-content: start; + + .icon { + width: 100%; + display: flex; + justify-content: start; + margin-bottom: 4px; + + img { + width: 54px; + height: 54px; + } + } +} + +@media (max-width: 768px) { + .use-case-card { + flex-direction: row; + + .icon { + width: 54px; + margin-right: 12px; + } + } +}