From 1fdc43efe9aef605f42f305cdb9bedabacac04d9 Mon Sep 17 00:00:00 2001 From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com> Date: Tue, 23 Sep 2025 15:59:19 +0300 Subject: [PATCH] fix design --- resources/css/app.css | 126 ++++-- .../js/components/landing/HeroSection.vue | 399 +++++++++++++----- .../js/components/landing/HowSection.vue | 243 ++++++----- .../ShuffleCard/ShuffleCardPresentation.vue | 8 +- resources/js/fonts/Roboto/OFL.txt | 93 ++++ resources/js/fonts/Roboto/README.txt | 118 ++++++ .../Roboto-Italic-VariableFont_wdth,wght.ttf | Bin 0 -> 497124 bytes .../Roboto/Roboto-VariableFont_wdth,wght.ttf | Bin 0 -> 468308 bytes .../js/fonts/Roboto/static/Roboto-Black.ttf | Bin 0 -> 147424 bytes .../Roboto/static/Roboto-BlackItalic.ttf | Bin 0 -> 153780 bytes .../js/fonts/Roboto/static/Roboto-Bold.ttf | Bin 0 -> 146768 bytes .../fonts/Roboto/static/Roboto-BoldItalic.ttf | Bin 0 -> 153104 bytes .../fonts/Roboto/static/Roboto-ExtraBold.ttf | Bin 0 -> 146900 bytes .../Roboto/static/Roboto-ExtraBoldItalic.ttf | Bin 0 -> 153292 bytes .../fonts/Roboto/static/Roboto-ExtraLight.ttf | Bin 0 -> 146044 bytes .../Roboto/static/Roboto-ExtraLightItalic.ttf | Bin 0 -> 151664 bytes .../js/fonts/Roboto/static/Roboto-Italic.ttf | Bin 0 -> 152208 bytes .../js/fonts/Roboto/static/Roboto-Light.ttf | Bin 0 -> 146056 bytes .../Roboto/static/Roboto-LightItalic.ttf | Bin 0 -> 151944 bytes .../js/fonts/Roboto/static/Roboto-Medium.ttf | Bin 0 -> 146132 bytes .../Roboto/static/Roboto-MediumItalic.ttf | Bin 0 -> 152416 bytes .../js/fonts/Roboto/static/Roboto-Regular.ttf | Bin 0 -> 146004 bytes .../fonts/Roboto/static/Roboto-SemiBold.ttf | Bin 0 -> 146760 bytes .../Roboto/static/Roboto-SemiBoldItalic.ttf | Bin 0 -> 153036 bytes .../js/fonts/Roboto/static/Roboto-Thin.ttf | Bin 0 -> 145936 bytes .../fonts/Roboto/static/Roboto-ThinItalic.ttf | Bin 0 -> 151148 bytes .../Roboto/static/Roboto_Condensed-Black.ttf | Bin 0 -> 147148 bytes .../static/Roboto_Condensed-BlackItalic.ttf | Bin 0 -> 153680 bytes .../Roboto/static/Roboto_Condensed-Bold.ttf | Bin 0 -> 146580 bytes .../static/Roboto_Condensed-BoldItalic.ttf | Bin 0 -> 152976 bytes .../static/Roboto_Condensed-ExtraBold.ttf | Bin 0 -> 146812 bytes .../Roboto_Condensed-ExtraBoldItalic.ttf | Bin 0 -> 153324 bytes .../static/Roboto_Condensed-ExtraLight.ttf | Bin 0 -> 146004 bytes .../Roboto_Condensed-ExtraLightItalic.ttf | Bin 0 -> 152120 bytes .../Roboto/static/Roboto_Condensed-Italic.ttf | Bin 0 -> 152248 bytes .../Roboto/static/Roboto_Condensed-Light.ttf | Bin 0 -> 145952 bytes .../static/Roboto_Condensed-LightItalic.ttf | Bin 0 -> 152392 bytes .../Roboto/static/Roboto_Condensed-Medium.ttf | Bin 0 -> 145916 bytes .../static/Roboto_Condensed-MediumItalic.ttf | Bin 0 -> 152424 bytes .../static/Roboto_Condensed-Regular.ttf | Bin 0 -> 145908 bytes .../static/Roboto_Condensed-SemiBold.ttf | Bin 0 -> 146516 bytes .../Roboto_Condensed-SemiBoldItalic.ttf | Bin 0 -> 152660 bytes .../Roboto/static/Roboto_Condensed-Thin.ttf | Bin 0 -> 145920 bytes .../static/Roboto_Condensed-ThinItalic.ttf | Bin 0 -> 151588 bytes .../static/Roboto_SemiCondensed-Black.ttf | Bin 0 -> 147372 bytes .../Roboto_SemiCondensed-BlackItalic.ttf | Bin 0 -> 153832 bytes .../static/Roboto_SemiCondensed-Bold.ttf | Bin 0 -> 146752 bytes .../Roboto_SemiCondensed-BoldItalic.ttf | Bin 0 -> 153148 bytes .../static/Roboto_SemiCondensed-ExtraBold.ttf | Bin 0 -> 146860 bytes .../Roboto_SemiCondensed-ExtraBoldItalic.ttf | Bin 0 -> 153360 bytes .../Roboto_SemiCondensed-ExtraLight.ttf | Bin 0 -> 146100 bytes .../Roboto_SemiCondensed-ExtraLightItalic.ttf | Bin 0 -> 152012 bytes .../static/Roboto_SemiCondensed-Italic.ttf | Bin 0 -> 152304 bytes .../static/Roboto_SemiCondensed-Light.ttf | Bin 0 -> 146064 bytes .../Roboto_SemiCondensed-LightItalic.ttf | Bin 0 -> 152304 bytes .../static/Roboto_SemiCondensed-Medium.ttf | Bin 0 -> 146124 bytes .../Roboto_SemiCondensed-MediumItalic.ttf | Bin 0 -> 152492 bytes .../static/Roboto_SemiCondensed-Regular.ttf | Bin 0 -> 146048 bytes .../static/Roboto_SemiCondensed-SemiBold.ttf | Bin 0 -> 146720 bytes .../Roboto_SemiCondensed-SemiBoldItalic.ttf | Bin 0 -> 152836 bytes .../static/Roboto_SemiCondensed-Thin.ttf | Bin 0 -> 146068 bytes .../Roboto_SemiCondensed-ThinItalic.ttf | Bin 0 -> 151496 bytes resources/js/layouts/app/LandingLayout.vue | 349 ++++++++++----- resources/js/pages/cards/FreeCardResult.vue | 93 +++- resources/js/pages/cards/cardSelection.vue | 2 +- 65 files changed, 1054 insertions(+), 377 deletions(-) create mode 100644 resources/js/fonts/Roboto/OFL.txt create mode 100644 resources/js/fonts/Roboto/README.txt create mode 100644 resources/js/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf create mode 100644 resources/js/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Black.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-BlackItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Bold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-BoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-ExtraBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-ExtraBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-ExtraLight.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-ExtraLightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Italic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Light.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-LightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Medium.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-MediumItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Regular.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-SemiBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-SemiBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-Thin.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto-ThinItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Black.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-BlackItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Bold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-BoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraLight.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraLightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Italic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Light.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-LightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Medium.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-MediumItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Regular.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-SemiBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-SemiBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-Thin.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_Condensed-ThinItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Black.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-BlackItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Bold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-BoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraLight.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraLightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Italic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Light.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-LightItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Medium.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-MediumItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Regular.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-SemiBold.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-SemiBoldItalic.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Thin.ttf create mode 100644 resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ThinItalic.ttf diff --git a/resources/css/app.css b/resources/css/app.css index 277f2bd..6721dae 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -10,7 +10,7 @@ @theme inline { --font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; - --font-accent: 'Citadel Script', cursive; + --font-accent: 'Poppins', cursive; --font-sans: var(--font-body); @@ -93,10 +93,10 @@ } } :root { - /* Brand variables (used by arbitrary values like bg-[var(--c-purple)]) */ + /* Brand variables */ --c-black: #000000; --c-green: #9ACE8A; - --c-purple: #241352; + --c-purple: #7D5BA6; /* softer purple primary */ --c-gold: #F0BA2D; --c-white: #FFFFFF; /* Additional accent stops for hero gradient */ @@ -105,54 +105,100 @@ --c-orange: #f28c2a; --c-blue: #2cc5e5; - /* App theme (Tailwind CSS v4 design tokens) */ - --background: var(--c-black); - --foreground: var(--c-white); + /* Light (default) theme — softer, not too bright */ + --background: #f5effa; + --foreground: #1f1630; - --card: #0b0b0b; - --card-foreground: var(--c-white); + --card: #ffffff; + --card-foreground: #1f1630; - --popover: #0b0b0b; - --popover-foreground: var(--c-white); + --popover: #ffffff; + --popover-foreground: #1f1630; --primary: var(--c-purple); --primary-foreground: var(--c-white); - --secondary: #171717; - --secondary-foreground: var(--c-white); + --secondary: #ede7f5; + --secondary-foreground: #1f1630; - --muted: #0a0a0a; - --muted-foreground: #9ca3af; + --muted: #eee7f7; + --muted-foreground: #5b4b72; - --accent: var(--c-gold); - --accent-foreground: var(--c-black); + --accent: #B89BD6; + --accent-foreground: #1f1630; --destructive: #ef4444; --destructive-foreground: var(--c-white); - --border: #1f2937; - --input: #2d2d2d; + --border: #e2d7f2; + --input: #ded1ef; --ring: var(--c-purple); --chart-1: var(--c-purple); - --chart-2: var(--c-gold); + --chart-2: #B89BD6; --chart-3: var(--c-green); - --chart-4: #6b7280; - --chart-5: #374151; + --chart-4: #7a6b91; + --chart-5: #523f6a; --radius: 0.5rem; /* Sidebar */ - --sidebar-background: #0b0b0b; - --sidebar-foreground: var(--c-white); + --sidebar-background: #faf7ff; + --sidebar-foreground: #1f1630; --sidebar-primary: var(--c-purple); --sidebar-primary-foreground: var(--c-white); - --sidebar-accent: var(--c-gold); - --sidebar-accent-foreground: var(--c-black); - --sidebar-border: #1f2937; + --sidebar-accent: #B89BD6; + --sidebar-accent-foreground: #1f1630; + --sidebar-border: #e2d7f2; --sidebar-ring: var(--c-purple); } +/* Dim dark mode overrides */ +.dark { + --background: #221a2b; + --foreground: #ece6f4; + + --card: #2b2136; + --card-foreground: #f1ecf7; + + --popover: #2b2136; + --popover-foreground: #f1ecf7; + + --primary: var(--c-purple); + --primary-foreground: var(--c-white); + + --secondary: #2e2439; + --secondary-foreground: #eae4f3; + + --muted: #3a2d49; + --muted-foreground: #c8bfe0; + + --accent: #B89BD6; + --accent-foreground: #1f1630; + + --destructive: #ff7676; + --destructive-foreground: var(--c-white); + + --border: #4c3a60; + --input: #4c3a60; + --ring: #9c7ca5; + + --chart-1: var(--c-purple); + --chart-2: #B89BD6; + --chart-3: var(--c-green); + --chart-4: #7a6b91; + --chart-5: #523f6a; + + --sidebar-background: #2b2136; + --sidebar-foreground: #f1ecf7; + --sidebar-primary: var(--c-purple); + --sidebar-primary-foreground: var(--c-white); + --sidebar-accent: #B89BD6; + --sidebar-accent-foreground: #1f1630; + --sidebar-border: #4c3a60; + --sidebar-ring: #9c7ca5; +} + /* Legacy aliases so existing components using old variables keep working */ :root { --midnight-blue: var(--c-white); /* legacy text color now maps to white for dark theme */ @@ -194,6 +240,22 @@ .text-shadow-custom { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } + + /* Gentle hero overlay and background image helper */ + .bg-hero { + background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)), var(--hero-image, url('/images/hero.jpg')); + background-size: cover; + background-position: center; + } + + /* Softer lilac gradient for headings */ + .text-accent-gradient { + background: linear-gradient(45deg, #B89BD6, #7D5BA6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + } } @font-face { @@ -224,9 +286,17 @@ } @font-face { - font-family: 'Montserrat'; - src: url('@/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype'); + font-family: 'Montserrat ExtraBold'; + src: url('@/fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } + +@font-face { + font-family: 'Poppins'; + src: url('@/fonts/Poppins/Poppins-Bold.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue index a261a3a..efc5b43 100644 --- a/resources/js/components/landing/HeroSection.vue +++ b/resources/js/components/landing/HeroSection.vue @@ -1,54 +1,63 @@