From 6830a79bd9f460eb7f065079e7e8980aa7cf50ce Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Wed, 4 Mar 2026 22:01:46 +0700 Subject: [PATCH] Complete redesign with ALL original services MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes: - Process section connector line overflow bug (z-index fix) - Restored ALL 6 original services from moreminimore.com - Changed 'Digital Transformation' to 'AI Transformation' - Chatbot integrated into AI Automation (not separate) - Migrated original service content to all pages - Updated CSS with proper process-step positioning - All text-base for better readability - Hero images on all pages Services: 1. ที่ปรึกษาองค์กร AI (was Digital Transformation) 2. ที่ปรึกษาการตลาดออนไลน์ 3. บริการตลาดออนไลน์ครบวงจร 4. พัฒนาเว็บไซต์ 5. พัฒนาแอปพลิเคชัน 6. ระบบแชทบอท AI (integrated) Content migrated from original website with AI transformation theme. --- src/pages/ai-automation.astro | 75 ++-- src/pages/ai-transformation-consult.astro | 68 ++++ src/pages/app-development.astro | 59 +++ src/pages/index.astro | 475 ++++++---------------- src/pages/online-marketing-consult.astro | 59 +++ src/pages/website-development.astro | 59 +++ src/styles/global.css | 169 ++------ 7 files changed, 461 insertions(+), 503 deletions(-) create mode 100644 src/pages/ai-transformation-consult.astro create mode 100644 src/pages/app-development.astro create mode 100644 src/pages/online-marketing-consult.astro create mode 100644 src/pages/website-development.astro diff --git a/src/pages/ai-automation.astro b/src/pages/ai-automation.astro index ff9432b..3dd0995 100644 --- a/src/pages/ai-automation.astro +++ b/src/pages/ai-automation.astro @@ -2,19 +2,19 @@ import Layout from '../layouts/Layout.astro' --- - -
+ +
-
+ AI Chatbot
-
⚙️
-

AI Automation

-

ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพด้วย Chatbot, RPA และ Workflow Automation

+
🤖
+

ระบบแชทบอท AI & Automation

+

บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง

@@ -22,33 +22,46 @@ import Layout from '../layouts/Layout.astro'
-

บริการ AI Automation

-
-
-
💬
-

AI Chatbot

-

ตอบคำถามลูกค้าอัตโนมัติ 24/7 ลดงานบริการลูกค้า 40%

+

บริการระบบแชทบอท AI

+
+

+ บริการให้คำปรึกษาในการวางระบบแชทบอท โดยการแนะนำแชทบอทที่เหมาะสมกับลูกค้า นอกจากนี้ เรายังมี Partner กับระบบบอทที่สามารถปิดการขายและชำระเงินได้ด้วยตัวเอง +

+ +

สิ่งที่คุณจะได้รับ

+
    +
  • + + แชทบอทที่เหมาะสม: เลือก AI ที่เหมาะกับธุรกิจคุณ +
  • +
  • + + ปิดการขายอัตโนมัติ: ระบบบอทที่ชำระเงินได้เอง +
  • +
  • + + ประหยัดบุคลากร: ลดงานตอบคำถามซ้ำซ้อน +
  • +
+ +
+

เหมาะสำหรับ

    -
  • • Facebook Messenger, LINE OA
  • -
  • • Website Chat Widget
  • -
  • • AI-powered Responses
  • -
  • • Handover to Human
  • -
-
-
-
🔄
-

Workflow Automation

-

อัตโนมัติกระบวนการทำงาน ลดเวลา ลดข้อผิดพลาด

-
    -
  • • Data Entry Automation
  • -
  • • Email Processing
  • -
  • • Document Generation
  • -
  • • Approval Workflow
  • +
  • • ธุรกิจที่ต้องการตอบคำถามลูกค้าอัตโนมัติ
  • +
  • • องค์กรที่ต้องการลดงานบริการลูกค้า
  • +
  • • ร้านค้าที่ต้องการปิดการขาย 24/7
- +
+ +
+
+

สนใจบริการนี้?

+
diff --git a/src/pages/ai-transformation-consult.astro b/src/pages/ai-transformation-consult.astro new file mode 100644 index 0000000..2499916 --- /dev/null +++ b/src/pages/ai-transformation-consult.astro @@ -0,0 +1,68 @@ +--- +import Layout from '../layouts/Layout.astro' +--- + + +
+
+ AI Transformation +
+
+
+
🏢
+

ที่ปรึกษาองค์กร AI

+

บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ

+ +
+
+
+ +
+
+

บริการให้คำปรึกษาองค์กร AI

+
+

+ บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ และนำมาใช้ประโยชน์ในการบริหารได้ บริการนี้ เหมาะสำหรับองค์กรที่ต้องการพัฒนาตัวเองให้ทันต่อยุคสมัย +

+ +

สิ่งที่คุณจะได้รับ

+
    +
  • + + ระบบข้อมูลอย่างเป็นระบบ: จัดการข้อมูลองค์กรให้สามารถนำมาใช้ประโยชน์ได้ +
  • +
  • + + การใช้ AI ในการบริหาร: นำ AI มาช่วยในการตัดสินใจทางธุรกิจ +
  • +
  • + + พัฒนาองค์กรให้ทันยุค: ปรับตัวให้ทันกับเทคโนโลยีที่เปลี่ยนไป +
  • +
+ +
+

เหมาะสำหรับ

+
    +
  • • องค์กรที่ต้องการพัฒนาตัวเองให้ทันต่อยุคสมัย
  • +
  • • ธุรกิจที่ต้องการใช้ข้อมูลในการบริหาร
  • +
  • • องค์กรที่ต้องการนำ AI มาใช้
  • +
+
+
+
+
+ +
+
+

สนใจบริการนี้?

+ +
+
+
diff --git a/src/pages/app-development.astro b/src/pages/app-development.astro new file mode 100644 index 0000000..7724848 --- /dev/null +++ b/src/pages/app-development.astro @@ -0,0 +1,59 @@ +--- +import Layout from '../layouts/Layout.astro' +--- + + +
+
+ App +
+
+
+
📲
+

พัฒนาแอปพลิเคชัน

+

บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ

+ +
+
+
+ +
+
+

บริการพัฒนาแอปพลิเคชัน

+
+

+ บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ รวมถึงการแก้ปัญหาเฉพาะด้าน เช่น ระบบการเชื่อมต่อยอดขายระหว่าง SAP กับเว็บไซต์ เป็นต้น +

+ +

บริการของเรา

+
    +
  • + + Mobile App: ทำตลาดจากอุปกรณ์โมบาย +
  • +
  • + + แก้ปัญหาเฉพาะ: เช่น เชื่อม SAP กับเว็บไซต์ +
  • +
  • + + iOS & Android: ครบทุกแพลตฟอร์ม +
  • +
+
+
+
+ +
+
+

สนใจบริการนี้?

+ +
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 8d024e8..204d42c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,407 +2,194 @@ import Layout from '../layouts/Layout.astro' --- - + -
-
-
-
-
+
+
+ AI Transformation +
-
-

- เปลี่ยนองค์กรของคุณด้วย
- AI Transformation +

+ เปลี่ยนองค์กรของคุณด้วย
AI Transformation

-

- เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้ เราพร้อมพาคุณสู่ยุค AI อย่างมั่นใจ +

+ เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้

- -
+ +
-

- เทคโนโลยี AI ที่เรานำมาใช้ -

-

- เราคัดสรรเทคโนโลยี AI ที่ดีที่สุดในโลก มาประยุกต์ใช้กับธุรกิจของคุณ -

+

บริการของเรา

+

เพื่อตอบโจทย์ของลูกค้า

-
- -
-
🤖
-

Machine Learning

-

ทำนายแนวโน้ม วิเคราะห์ข้อมูลเชิงลึก

+
+ +
+
+ AI Transformation +
+
🏢
+
+
+

ที่ปรึกษาองค์กร AI

+

บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ และนำมาใช้ประโยชน์ในการบริหารได้

+ รายละเอียด → +
- - -
-
💬
-

NLP / Chatbot

-

ประมวลผลภาษาธรรมชาติ ตอบคำถามอัตโนมัติ

+ + +
+
+ Online Marketing +
+
📱
+
+
+

ที่ปรึกษาการตลาดออนไลน์

+

บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน

+ รายละเอียด → +
- - -
-
📊
-

Predictive Analytics

-

วิเคราะห์ล่วงหน้า วางแผนแม่นยำ

+ + +
+
+ Full Marketing +
+
📢
+
+
+

บริการตลาดออนไลน์ครบวงจร

+

บริการในการทำการตลาดออนไลน์แบบครบวงจร เหมาะสำหรับองค์กรที่ต้องการทีมงานวางกลยุทธ์ และผลิตสื่อพร้อมกัน

+ รายละเอียด → +
- - -
-
👁️
-

Computer Vision

-

วิเคราะห์ภาพ ตรวจสอบอัตโนมัติ

+ + +
+
+ Website +
+
💻
+
+
+

พัฒนาเว็บไซต์

+

บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต

+ รายละเอียด → +
- - -
-
🔄
-

RPA

-

อัตโนมัติกระบวนการทำงาน

+ + +
+
+ App +
+
📲
+
+
+

พัฒนาแอปพลิเคชัน

+

บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ

+ รายละเอียด → +
- - -
-
📈
-

Business Intelligence

-

Dashboard แสดงผลแบบ Real-time

-
- - -
-
🌐
-

Generative AI

-

สร้างเนื้อหา อัตโนมัติด้วย AI

-
- - -
-
☁️
-

Cloud AI

-

บริการ AI บน Cloud ประสิทธิภาพสูง

+ + +
+
+ AI Chatbot +
+
🤖
+
+
+

ระบบแชทบอท (AI)

+

บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง

+ รายละเอียด → +
- -
+ +
-
-

- บริการที่ปรึกษาองค์กร AI -

-

- บริการครบวงจร เพื่อการเปลี่ยนแปลงองค์กรสู่ยุค AI -

-
- -
- -
-
-
🎯
-
-
-

AI Strategy Consulting

-

วางกลยุทธ์ AI ที่สอดคล้องกับเป้าหมายธุรกิจ วิเคราะห์โอกาส และกำหนด Roadmap ที่ชัดเจน

- - ดูรายละเอียด → - -
+
+
+ Strategy
- - -
-
-
⚙️
-
-
-

AI Automation

-

นำ Chatbot, Workflow Automation และ RPA มาใช้ ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพ

- - ดูรายละเอียด → - -
-
- - -
-
-
🎓
-
-
-

AI Training

-

ฝึกอบรมทีมของคุณ ให้ใช้งาน AI Tools เป็น และประยุกต์ใช้ในงานจริง

- - ดูรายละเอียด → - -
-
- - -
-
-
📊
-
-
-

AI Analytics

-

ใช้ AI วิเคราะห์ข้อมูล หาลูกค้าที่มีแนวโน้มซื้อสูง เพิ่มยอดขายอย่างชาญฉลาด

- - ดูรายละเอียด → - -
+
+

เพราะแต่ละธุรกิจ มี
จุดแข็งและจุดอ่อน ที่ไม่เหมือนกัน

+

+ กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า เช่น ระบบที่ทำให้ลูกค้า ประหยัดค่าใช้จ่ายด้านบุคลากร ระบบที่ไม่จำเป็นต้องใช้คนที่มีทักษะสูง และระบบที่ช่วยหาลูกค้าได้ง่ายขึ้น +

+ สนใจติดต่อเรา
- +
-

- กระบวนการทำงาน -

-

- 4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI -

+

กระบวนการทำงาน

+

4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI

-
-
- 1 -
-

วิเคราะห์

-

ศึกษาธุรกิจ ปัจจุบัน วิเคราะห์ปัญหา และหาโอกาสที่ใช้ AI แก้ได้

- +
+
1
+ +

วิเคราะห์

+

ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาสใช้ AI

-
-
- 2 -
-

วางแผน

-

ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน วัดผลได้ เหมาะกับองค์กร

- +
+
2
+ +

วางแผน

+

ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน

-
-
- 3 -
-

ดำเนินการ

-

ติดตั้งระบบ AI ฝึกอบรมทีม และเริ่มใช้งานจริง

- +
+
3
+ +

ดำเนินการ

+

ติดตั้งระบบ AI ฝึกอบรมทีม เริ่มใช้งาน

-
-
- 4 -
-

วัดผล

-

ติดตามผล วิเคราะห์ข้อมูล ปรับปรุงอย่างต่อเนื่อง เพื่อผลลัพธ์สูงสุด

+
+
4
+

วัดผล

+

ติดตามผล ปรับปรุงอย่างต่อเนื่อง

- -
-
-
-

- คำถามที่พบบ่อย -

-

- ข้อสงสัยเกี่ยวกับการนำ AI มาใช้ในองค์กร -

-
- -
- -
- - AI Transformation คืออะไร? - + - -
- AI Transformation คือกระบวนการเปลี่ยนแปลงองค์กร โดยการนำ AI มาใช้ในทุกด้าน เพื่อเพิ่มประสิทธิภาพ ลดต้นทุน และสร้างโอกาสทางธุรกิจใหม่ -
-
- - -
- - ธุรกิจของฉันพร้อมสำหรับ AI หรือยัง? - + - -
- ธุรกิจส่วนใหญ่พร้อมใช้ AI แล้ว! เราช่วยวิเคราะห์ความพร้อม และเริ่มต้นจากจุดเล็กๆ ก่อนขยายผล -
-
- - -
- - ใช้เวลานานแค่ไหนที่จะเห็นผล? - + - -
- โดยทั่วไปจะเริ่มเห็นผลภายใน 1-3 เดือน สำหรับโครงการเล็กๆ และ 6-12 เดือน สำหรับโครงการใหญ่ -
-
- - -
- - ลงทุนเท่าไหร่? - + - -
- ขึ้นอยู่กับขอบเขตโครงการ เรามีทั้งโครงการเริ่มต้นหลักหมื่น ไปจนถึงโครงการใหญ่หลักล้าน คุยรายละเอียดได้ฟรี! -
-
- - -
- - พนักงานจะถูกแทนที่ด้วย AI หรือไม่? - + - -
- ไม่! AI เป็นเครื่องมือช่วยงาน ไม่ใช่แทนที่คน เราฝึกอบรมให้พนักงานใช้ AI ทำงานได้ดีขึ้น -
-
-
-
-
- - -
-
-
-

- เรื่องน่ารู้เกี่ยวกับ AI -

-

- อัปเดตความรู้ AI ล่าสุด เพื่อธุรกิจของคุณ -

-
- -
- - - - - - - - -
- - -
-
- -
+
-

- พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง? -

-

- ปรึกษาผู้เชี่ยวชาญฟรี เราพร้อมช่วยคุณวางกลยุทธ์ AI ที่วัดผลได้ -

+

พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?

+

ปรึกษาผู้เชี่ยวชาญฟรี

diff --git a/src/pages/online-marketing-consult.astro b/src/pages/online-marketing-consult.astro new file mode 100644 index 0000000..cf770ac --- /dev/null +++ b/src/pages/online-marketing-consult.astro @@ -0,0 +1,59 @@ +--- +import Layout from '../layouts/Layout.astro' +--- + + +
+
+ Marketing +
+
+
+
📱
+

ที่ปรึกษาการตลาดออนไลน์

+

บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน

+ +
+
+
+ +
+
+

บริการที่ปรึกษาการตลาดออนไลน์

+
+

+ บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน บริการนี้ เหมาะสำหรับองค์กรที่มีทีมการตลาดในการสร้างสื่ออยู่แล้ว +

+ +

สิ่งที่คุณจะได้รับ

+
    +
  • + + กลยุทธ์ที่วัดผลได้: วางแผนการตลาดโดยใช้ข้อมูลจริง +
  • +
  • + + ประหยัดต้นทุน: เน้นประสิทธิภาพและการประหยัด +
  • +
  • + + เพิ่มโอกาสขาย: ระบบช่วยหาลูกค้าได้ง่ายขึ้น +
  • +
+
+
+
+ +
+
+

สนใจบริการนี้?

+ +
+
+
diff --git a/src/pages/website-development.astro b/src/pages/website-development.astro new file mode 100644 index 0000000..f067512 --- /dev/null +++ b/src/pages/website-development.astro @@ -0,0 +1,59 @@ +--- +import Layout from '../layouts/Layout.astro' +--- + + +
+
+ Website +
+
+
+
💻
+

พัฒนาเว็บไซต์

+

บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต

+ +
+
+
+ +
+
+

บริการพัฒนาเว็บไซต์

+
+

+ บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต เช่น การเชื่อมข้อมูลสินค้าและยอดขายกับระบบบัญชี เป็นต้น +

+ +

คุณสมบัติ

+
    +
  • + + UX/UI ดี: ออกแบบให้ใช้งานง่าย สวยงาม +
  • +
  • + + เชื่อมต่อระบบ: เชื่อมข้อมูลกับระบบบัญชีและอื่นๆ +
  • +
  • + + E-Commerce: ขายออนไลน์ได้ทันที +
  • +
+
+
+
+ +
+
+

สนใจบริการนี้?

+ +
+
+
diff --git a/src/styles/global.css b/src/styles/global.css index 0949a51..908fe76 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,183 +1,96 @@ @import "tailwindcss"; @theme { - /* Primary Colors */ --color-primary: #fed400; --color-primary-hover: #e5c000; --color-primary-light: #fff4b3; - - /* Secondary Colors */ --color-secondary: #000000; --color-secondary-light: #1a1a1a; - - /* AI/Tech Accent Colors */ --color-accent-blue: #2563eb; --color-accent-blue-hover: #1d4ed8; --color-accent-purple: #7c3aed; --color-accent-purple-hover: #6d28d9; --color-accent-teal: #0891b2; - - /* Neutral Colors */ --color-gray-light: #f9fafb; --color-gray: #6b7280; --color-gray-dark: #374151; --color-text: #0f0f0f; --color-white: #ffffff; - - /* Fonts */ --font-sans: 'Noto Sans Thai', system-ui, sans-serif; --font-display: 'Kanit', var(--font-sans); } @layer base { - html { - scroll-behavior: smooth; - } - + html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--color-text); - line-height: 1.6; + line-height: 1.7; background: var(--color-white); + font-size: 1.125rem; } - h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; } - - /* Smooth animations */ - * { - transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; - } + p { margin-bottom: 1.25em; font-size: 1.0625rem; } + * { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } } @layer components { - /* Glass Morphism */ - .glass { - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); - } - - .glass-dark { - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); - } - - /* Card Hover Effects */ - .card-hover { - transition: transform 0.3s ease, box-shadow 0.3s ease; - } - - .card-hover:hover { - transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - } - - /* Gradient Backgrounds */ - .gradient-primary { - background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); - } - - .gradient-ai { - background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%); - } - - .gradient-hero { - background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%); - } - - /* Button Styles */ - .btn-primary { - background-color: var(--color-primary); - color: var(--color-secondary); - padding: 0.75rem 2rem; - border-radius: 9999px; - font-weight: 700; - transition: all 0.3s ease; - } - - .btn-primary:hover { - background-color: var(--color-primary-hover); - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3); - } - - .btn-secondary { - background-color: var(--color-secondary); - color: var(--color-white); - padding: 0.75rem 2rem; - border-radius: 9999px; - font-weight: 700; - transition: all 0.3s ease; - } - - .btn-secondary:hover { - background-color: var(--color-secondary-light); - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); - } - - .btn-accent { - background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple)); - color: var(--color-white); - padding: 0.75rem 2rem; - border-radius: 9999px; - font-weight: 700; - transition: all 0.3s ease; - } - - .btn-accent:hover { - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); - } + .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } + .glass-dark { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } + .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } + .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } + .gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); } + .gradient-ai { background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%); } + .gradient-hero { background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%); } + .btn-primary { background-color: var(--color-primary); color: var(--color-secondary); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; } + .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3); } + .btn-secondary { background-color: var(--color-secondary); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; } + .btn-secondary:hover { background-color: var(--color-secondary-light); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } + .btn-accent { background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple)); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; } + .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); } } @layer utilities { - /* Text Colors */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-accent-blue { color: var(--color-accent-blue); } .text-accent-purple { color: var(--color-accent-purple); } - - /* Background Colors */ .bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-accent-blue { background-color: var(--color-accent-blue); } .bg-accent-purple { background-color: var(--color-accent-purple); } .bg-gray-light { background-color: var(--color-gray-light); } - - /* Hover Effects */ .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); } - - /* Animation Utilities */ - .animate-float { - animation: float 6s ease-in-out infinite; - } - - .animate-float-delayed { - animation: float 6s ease-in-out 3s infinite; - } + .animate-float { animation: float 6s ease-in-out infinite; } + .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; } } @keyframes float { - 0%, 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-20px); - } + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } } -/* Parallax Effect Class */ -.parallax { - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-size: cover; +/* Process Section - Fixed connector line positioning */ +.process-step { + position: relative; } +.process-step-number { + position: relative; + z-index: 2; +} +.process-step-connector { + position: absolute; + top: 2.5rem; + left: calc(100% + 1rem); + width: calc(100% - 6rem); + height: 2px; + background: linear-gradient(to right, var(--color-primary), transparent); + z-index: 1; + pointer-events: none; +} + +.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }