2026-04-23 22:12:45 +00:00
3 changed files with 57 additions and 79 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Github, Twitter, Linkedin } from 'lucide-react';
+
+export default function About() {
+  const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div className="min-h-[60vh] flex items-center justify-center">
+        <h1>About Us</h1>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="Webild" socialLinks={[{ icon: Github, href: "#", ariaLabel: "Github" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Linkedin, href: "#", ariaLabel: "Linkedin" }]} />
+      </div>
+    </ThemeProvider>
+  );
+}
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Github, Twitter, Linkedin } from 'lucide-react';
+
+export default function Contact() {
+  const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactText text="Get in touch!" background={{ variant: "gradient-bars" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="Webild" socialLinks={[{ icon: Github, href: "#", ariaLabel: "Github" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Linkedin, href: "#", ariaLabel: "Linkedin" }]} />
+      </div>
+    </ThemeProvider>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import AboutMetric from '@/components/sections/about/AboutMetric';
@@ -9,105 +9,38 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Zap, Shield, Star, Globe, Mail } from 'lucide-react';
+import { ArrowRight, Star, Shield, Zap, Globe, Github, Twitter, Linkedin } from 'lucide-react';

 export default function Page() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Contact", id: "/contact" }
-  ];
-
+  const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
  return (
-    <ThemeProvider 
-      defaultButtonVariant="text-stagger" 
-      defaultTextAnimation="entrance-slide" 
-      borderRadius="rounded" 
-      contentWidth="medium" 
-      sizing="medium" 
-      background="circleGradient" 
-      cardStyle="glass-elevated" 
-      primaryButtonStyle="gradient" 
-      secondaryButtonStyle="glass" 
-      headingFontWeight="normal"
-    >
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Webild" />
      </div>
      <div id="hero" data-section="hero">
-        <HeroSplitTestimonial 
-          title="Systems. Strategies. Solutions."
-          description="Webild delivers professional web solutions to elevate your business."
-          background={{ variant: 'radial-gradient' }}
-          testimonials={[]} 
-          mediaAnimation="blur-reveal"
-        />
+        <HeroSplitTestimonial title="Innovation at Scale" description="Empowering businesses to reach their full potential." background={{ variant: "gradient-bars" }} testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Transformed our workflow entirely.", rating: 5 }]} mediaAnimation="slide-up" />
      </div>
      <div id="about" data-section="about">
-        <AboutMetric 
-          title="Our Impact"
-          metrics={[{ icon: Zap, label: "Projects", value: "100+" }, { icon: Shield, label: "Clients", value: "50+" }]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
+        <AboutMetric title="Our Impact" metrics={[{ icon: Zap, label: "Growth Rate", value: "150%" }, { icon: Shield, label: "Security Level", value: "AAA" }]} metricsAnimation="slide-up" useInvertedBackground={false} />
      </div>
      <div id="startups" data-section="startups">
-        <FeatureHoverPattern 
-          title="Core Features"
-          description="Discover the power of our platform."
-          features={[{ icon: Star, title: "Automation", description: "Scale faster with ease." }, { icon: Globe, title: "Global Reach", description: "Reach clients everywhere." }]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+        <FeatureHoverPattern title="Core Features" description="Designed for modern teams." animationType="slide-up" features={[{ icon: Zap, title: "Automation", description: "Save hours daily." }, { icon: Star, title: "Scalability", description: "Grow with confidence." }]} textboxLayout="default" useInvertedBackground={false} />
      </div>
      <div id="content" data-section="content">
-        <ProductCardTwo 
-          title="Catalog"
-          description="Our premium product selection."
-          gridVariant="uniform-all-items-equal"
-          animationType="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          products={[
-            { id: "1", brand: "Webild", name: "Basic Plan", price: "$99", rating: 5, reviewCount: "10", imageSrc: "/placeholder.jpg" },
-            { id: "2", brand: "Webild", name: "Pro Plan", price: "$199", rating: 5, reviewCount: "20", imageSrc: "/placeholder.jpg" },
-            { id: "3", brand: "Webild", name: "Enterprise", price: "$499", rating: 5, reviewCount: "50", imageSrc: "/placeholder.jpg" }
-          ]}
-        />
+        <ProductCardTwo title="Featured Solutions" description="Explore our curated toolkit." gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" products={[{ id: "1", brand: "Core", name: "Basic Plan", price: "$99", rating: 5, reviewCount: "10", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=600" }, { id: "2", brand: "Pro", name: "Advanced Plan", price: "$199", rating: 5, reviewCount: "20", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=600" }, { id: "3", brand: "Enterprise", name: "Custom Plan", price: "$499", rating: 5, reviewCount: "50", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=600" }]} />
      </div>
      <div id="testimonial" data-section="testimonial">
-        <TestimonialCardThirteen 
-          title="What Clients Say"
-          description="Hear from our satisfied partners."
-          showRating={true}
-          animationType="depth-3d"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          testimonials={[{ id: "1", name: "Alice", handle: "@alice", testimonial: "Fantastic service!", rating: 5 }]}
-        />
+        <TestimonialCardThirteen title="Client Success" description="What they say about us." showRating={true} animationType="slide-up" textboxLayout="default" testimonials={[{ id: "t1", name: "Alex", handle: "@alex", testimonial: "Excellent service!", rating: 5 }, { id: "t2", name: "Sam", handle: "@sam", testimonial: "Highly recommended.", rating: 5 }]} />
      </div>
      <div id="blog" data-section="blog">
-        <BlogCardOne 
-          title="Latest Insights"
-          description="Stay updated with our latest industry news."
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          blogs={[]}
-        />
+        <BlogCardOne title="Recent Insights" description="Latest news and updates." animationType="slide-up" textboxLayout="default" blogs={[{ id: "b1", category: "Tech", title: "Innovation 2025", excerpt: "Exploring the future.", imageSrc: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=600", authorName: "Admin", authorAvatar: "", date: "Jan 2025" }, { id: "b2", category: "Design", title: "UI Trends", excerpt: "Minimalism persists.", imageSrc: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=600", authorName: "Admin", authorAvatar: "", date: "Feb 2025" }, { id: "b3", category: "Scale", title: "Scaling Up", excerpt: "Tips for growth.", imageSrc: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=600", authorName: "Admin", authorAvatar: "", date: "Mar 2025" }]} />
      </div>
      <div id="contact" data-section="contact">
-        <ContactText 
-          text="Get in touch with our team today."
-          background={{ variant: 'plain' }}
-          useInvertedBackground={false}
-        />
+        <ContactText text="Ready to start?" background={{ variant: "gradient-bars" }} useInvertedBackground={false} />
      </div>
      <div id="footer" data-section="footer">
-        <FooterCard 
-          logoText="Webild"
-          socialLinks={[{ icon: Mail, href: "mailto:info@webild.com", ariaLabel: "Email Us" }]}
-        />
+        <FooterCard logoText="Webild" socialLinks={[{ icon: Github, href: "#", ariaLabel: "Github" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Linkedin, href: "#", ariaLabel: "Linkedin" }]} />
      </div>
    </ThemeProvider>
  );