version update of next

2025-12-13 20:47:32 +05:30
parent e56ca0537c
commit 684cdbedbf
8 changed files with 345 additions and 385 deletions
--- a/app/(public)/_homeComponents/Testimonials.tsx
+++ b/app/(public)/_homeComponents/Testimonials.tsx
@@ -1,15 +1,9 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import {
-  Star,
-  Quote,
-} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useState } from "react";
 import AnimatedSection from "./Animated";
 import { home } from "@/services/Constants";
+import { Quote, Star } from "lucide-react";

-
-// Testimonials Slider
 const Testimonials = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

@@ -20,6 +14,8 @@ const Testimonials = () => {
    return () => clearInterval(timer);
  }, []);

+  const testimonial = home.testimonials[currentIndex];
+
  return (
    <section id="testimonials" className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4">
@@ -39,58 +35,58 @@ const Testimonials = () => {
        </AnimatedSection>

        <div className="relative max-w-5xl mx-auto">
-          <div className="overflow-hidden">
-            {home.testimonials.map((testimonial, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, x: 100 }}
-                animate={{
-                  opacity: index === currentIndex ? 1 : 0,
-                  x: index === currentIndex ? 0 : 100,
-                  display: index === currentIndex ? "block" : "none",
-                }}
-                transition={{ duration: 0.5 }}
-                className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl p-12 shadow-xl"
-              >
-                <Quote className="w-12 h-12 text-purple-300 mb-6" />
-                <p className="text-2xl text-gray-800 mb-8 leading-relaxed italic">
-                  "{testimonial.content}"
-                </p>
-                <div className="flex items-center gap-4">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-3xl">
-                    {testimonial.image}
-                  </div>
-                  <div>
-                    <h4 className="font-bold text-lg text-gray-800">
-                      {testimonial.name}
-                    </h4>
-                    <p className="text-gray-600">{testimonial.role}</p>
-                    <p className="text-purple-600 font-semibold">
-                      {testimonial.company}
-                    </p>
-                  </div>
-                  <div className="ml-auto flex gap-1">
-                    {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star
-                        key={i}
-                        className="w-5 h-5 fill-yellow-400 text-yellow-400"
-                      />
-                    ))}
-                  </div>
-                </div>
-              </motion.div>
-            ))}
-          </div>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentIndex}
+              initial={{ opacity: 0, x: 60 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -60 }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+              className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl p-12 shadow-xl"
+            >
+              <Quote className="w-12 h-12 text-purple-300 mb-6" />

+              <p className="text-2xl text-gray-800 mb-8 leading-relaxed italic">
+                "{testimonial.content}"
+              </p>
+
+              <div className="flex items-center gap-4">
+                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-3xl">
+                  {testimonial.image}
+                </div>
+
+                <div>
+                  <h4 className="font-bold text-lg text-gray-800">
+                    {testimonial.name}
+                  </h4>
+                  <p className="text-gray-600">{testimonial.role}</p>
+                  <p className="text-purple-600 font-semibold">
+                    {testimonial.company}
+                  </p>
+                </div>
+
+                <div className="ml-auto flex gap-1">
+                  {[...Array(testimonial.rating)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className="w-5 h-5 fill-yellow-400 text-yellow-400"
+                    />
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Dots */}
          <div className="flex justify-center gap-2 mt-8">
            {home.testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentIndex(index)}
-                className={`w-3 h-3 rounded-full transition-all ${
+                className={`h-3 rounded-full transition-all duration-300 ${
                  index === currentIndex
                    ? "bg-purple-600 w-8"
-                    : "bg-gray-300 hover:bg-gray-400"
+                    : "bg-gray-300 w-3 hover:bg-gray-400"
                }`}
              />
            ))}
@@ -100,5 +96,5 @@ const Testimonials = () => {
    </section>
  );
 };
+export default Testimonials;

-export default Testimonials
--- a/app/(public)/about/page.tsx
+++ b/app/(public)/about/page.tsx
@@ -1,7 +1,5 @@
 "use client";
-import { motion } from "framer-motion";
-import { Users, Target, Lightbulb, ShieldCheck, Linkedin } from "lucide-react";
-import Image from "next/image";
+import { Target, Lightbulb } from "lucide-react";
 import Link from "next/link";

 const leaders = [
@@ -32,27 +30,24 @@ export default function AboutUs() {

      {/* HERO */}
      <section className="py-28 bg-gradient-to-b from-white to-blue-50 text-center">
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
+        <h1
+          
          className="text-5xl font-bold mb-6"
        >
          Empowering Businesses with Smart CRM Innovation
-        </motion.h1>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
+        </h1>
+        <p
+          
          className="text-xl max-w-3xl mx-auto"
        >
          We help companies build stronger customer relationships through intelligent automation and seamless workflows.
-        </motion.p>
+        </p>
      </section>

      {/* OUR MISSION / VISION */}
      <section className="py-20 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
+        <div
+          
          className="bg-white p-10 rounded-3xl shadow-xl border"
        >
          <Target className="w-12 h-12 text-blue-600 mb-4" />
@@ -61,11 +56,10 @@ export default function AboutUs() {
            To simplify customer management through powerful yet user-friendly CRM tools,
            enabling businesses of every size to scale faster and smarter.
          </p>
-        </motion.div>
+        </div>

-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
+        <div
+          
          className="bg-white p-10 rounded-3xl shadow-xl border"
        >
          <Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
@@ -74,7 +68,7 @@ export default function AboutUs() {
            To be a global leader in CRM innovation — transforming how teams connect,
            collaborate and grow with their customers.
          </p>
-        </motion.div>
+        </div>
      </section>

      
--- a/app/(public)/blogs/page.tsx
+++ b/app/(public)/blogs/page.tsx
@@ -1,6 +1,4 @@
 "use client";
-
-import { motion } from "framer-motion";
 import { Calendar, ArrowRight, User } from "lucide-react";
 import { Button } from "@/components/ui/button";

@@ -42,15 +40,12 @@ export default function BlogPage() {
    <main className="bg-white">
      {/* HERO */}
      <section className="py-24 px-6 text-center bg-gradient-to-b from-white to-blue-50">
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          className="text-4xl md:text-6xl font-extrabold"
-        >
+        <h1 className="text-4xl md:text-6xl font-extrabold">
          Insights & Resources for Your Growth
-        </motion.h1>
+        </h1>
        <p className="mt-4 text-lg opacity-90 max-w-2xl mx-auto">
-          Explore the latest blogs, guides, and articles to help your business scale smarter.
+          Explore the latest blogs, guides, and articles to help your business
+          scale smarter.
        </p>
      </section>

@@ -58,11 +53,8 @@ export default function BlogPage() {
      <section className="py-20 px-6 max-w-7xl mx-auto">
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
          {BLOGS.map((blog, i) => (
-            <motion.div
+            <div
              key={i}
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.1 }}
              className="rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
            >
              <div>
@@ -102,20 +94,16 @@ export default function BlogPage() {
                  </Button>
                </div>
              </div>
-            </motion.div>
+            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 text-center bg-gray-50 px-6">
-        <motion.h2
-          initial={{ opacity: 0, scale: 0.9 }}
-          whileInView={{ opacity: 1, scale: 1 }}
-          className="text-3xl md:text-4xl font-bold text-gray-900"
-        >
+        <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
          Want More Industry Insights?
-        </motion.h2>
+        </h2>
        <p className="text-gray-600 max-w-2xl mx-auto mt-4">
          Subscribe to our newsletter and stay updated with the latest trends.
        </p>
--- a/app/(public)/careers/page.tsx
+++ b/app/(public)/careers/page.tsx
@@ -1,6 +1,12 @@
 "use client";
 import { motion } from "framer-motion";
-import { Briefcase, Users, Target, HeartHandshake, ArrowRight } from "lucide-react";
+import {
+  Briefcase,
+  Users,
+  Target,
+  HeartHandshake,
+  ArrowRight,
+} from "lucide-react";
 import Link from "next/link";

 const openRoles = [
@@ -33,23 +39,13 @@ const openRoles = [
 export default function Careers() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
-      
      {/* HERO */}
      <section className="py-24 text-center bg-gradient-to-b from-white to-blue-50">
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          className="text-5xl font-bold mb-6"
-        >
-          Build Your Future With Us
-        </motion.h1>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          className="text-xl max-w-2xl mx-auto"
-        >
-          Join a passionate team shaping the future of CRM solutions across the globe.
-        </motion.p>
+        <h1 className="text-5xl font-bold mb-6">Build Your Future With Us</h1>
+        <p className="text-xl max-w-2xl mx-auto">
+          Join a passionate team shaping the future of CRM solutions across the
+          globe.
+        </p>
      </section>

      {/* CULTURE SECTION */}
@@ -57,7 +53,8 @@ export default function Careers() {
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">Life at Our Company</h2>
          <p className="text-gray-600 text-lg max-w-3xl mx-auto">
-            A culture built to encourage creativity, innovation, and collaboration.
+            A culture built to encourage creativity, innovation, and
+            collaboration.
          </p>
        </div>

@@ -79,16 +76,14 @@ export default function Careers() {
              desc: "We focus on employee happiness, growth, and well-being.",
            },
          ].map((item, i) => (
-            <motion.div
+            <div
              key={i}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
              className="bg-white p-8 rounded-2xl shadow-lg text-center"
            >
              <div className="mb-4 flex justify-center">{item.icon}</div>
              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
              <p className="text-gray-600">{item.desc}</p>
-            </motion.div>
+            </div>
          ))}
        </div>
      </section>
@@ -105,10 +100,8 @@ export default function Careers() {

          <div className="grid md:grid-cols-2 gap-10">
            {openRoles.map((role, index) => (
-              <motion.div
+              <div
                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
                className="p-6 rounded-xl shadow-md border bg-gray-50 hover:shadow-xl transition"
              >
                <h3 className="text-2xl font-semibold mb-2">{role.title}</h3>
@@ -124,7 +117,7 @@ export default function Careers() {
                >
                  Apply Now <ArrowRight className="w-4 h-4" />
                </Link>
-              </motion.div>
+              </div>
            ))}
          </div>
        </div>
@@ -132,7 +125,9 @@ export default function Careers() {

      {/* CTA SECTION */}
      <section className="py-24 text-center bg-gradient-to-r from-purple-600 to-blue-600 text-white">
-        <h2 className="text-4xl font-bold mb-6">Didn’t find a suitable role?</h2>
+        <h2 className="text-4xl font-bold mb-6">
+          Didn’t find a suitable role?
+        </h2>
        <p className="text-xl max-w-2xl mx-auto mb-8">
          We are always looking for great talent. Send us your resume!
        </p>
--- a/app/(public)/features/page.tsx
+++ b/app/(public)/features/page.tsx
@@ -1,14 +1,10 @@
 "use client";
-import { motion } from "framer-motion";
 import {
-  Sparkles,
  Layers,
  BarChart3,
  Users,
  CheckCircle2,
  ShieldCheck,
-  Workflow,
-  LineChart,
  WorkflowIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -57,16 +53,12 @@ export default function FeaturesPage() {
    <main className="bg-white">
      {/* HERO */}
      <section className="py-24 text-center px-6 bg-gradient-to-b from-white to-blue-50">
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          className="text-4xl md:text-6xl font-extrabold text-gray-900"
-        >
+        <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900">
          Powerful Features to Turbocharge Your{" "}
          <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            Hiring & CRM
          </span>
-        </motion.h1>
+        </h1>
        <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
          Everything you need to streamline recruitment, manage clients and
          scale your business — all in one platform.
@@ -75,17 +67,10 @@ export default function FeaturesPage() {

      {/* FEATURE GRID */}
      <section className="py-20 px-6 max-w-7xl mx-auto">
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10"
-        >
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
          {FEATURES_DATA.map((feature, i) => (
-            <motion.div
+            <div
              key={i}
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.1 }}
              className="p-8 bg-white rounded-3xl border shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
            >
              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 text-white flex items-center justify-center shadow-md mb-5">
@@ -95,25 +80,24 @@ export default function FeaturesPage() {
                {feature.title}
              </h3>
              <p className="text-gray-600">{feature.description}</p>
-            </motion.div>
+            </div>
          ))}
-        </motion.div>
+        </div>
      </section>

      {/* CTA STRIP */}
      <section className="py-20 bg-gradient-to-r from-blue-700 to-purple-700 text-white text-center px-6">
-        <motion.h2
-          initial={{ opacity: 0, scale: 0.95 }}
-          whileInView={{ opacity: 1, scale: 1 }}
-          className="text-3xl md:text-4xl font-bold mb-4"
-        >
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">
          Experience The Future of Hiring & Client Management
-        </motion.h2>
+        </h2>
        <p className="text-lg max-w-2xl mx-auto opacity-90 mb-8">
          Try Winixco now and transform the way your business grows.
        </p>

-        <Button size="lg" className="text-lg bg-white text-blue-700 hover:bg-blue-100">
+        <Button
+          size="lg"
+          className="text-lg bg-white text-blue-700 hover:bg-blue-100"
+        >
          Book a Live Demo
        </Button>
      </section>