diff --git a/src/app/page.tsx b/src/app/page.tsx
index a221e1c..8f44146 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,14 @@
 import Hero from "@/features/landing-page/hero";
 import { ValuePropositionSection } from "@/features/landing-page/value-proposition";
 import { ThreeStepExplainerSection } from "@/features/landing-page/three-step-explainer";
+import { FeaturesGridSection } from "@/features/landing-page/features-grid";
+import { StatsSection } from "@/features/landing-page/stats";
 import { CreateSurvey } from "@/features/landing-page/create-survey";
+import { TrustedBySection } from "@/features/landing-page/trusted-by";
+import { TestimonialsSection } from "@/features/landing-page/testimonials";
+import { PricingSection } from "@/features/landing-page/pricing";
+import { FaqSection } from "@/features/landing-page/faq-section";
+import { CtaBanner } from "@/features/landing-page/cta-banner";
 import Footer from "@/features/landing-page/footer";
 import Navbar from "@/features/landing-page/navbar";
 import SmoothScrollWrapper from "@/components/smooth-scroll-wrapper";
@@ -12,9 +19,16 @@ export default function Home() {
       <div className="min-h-screen bg-bg-dark">
         <Navbar />
         <Hero />
+        <TrustedBySection />
         <ValuePropositionSection />
         <ThreeStepExplainerSection />
+        <FeaturesGridSection />
+        <StatsSection />
         <CreateSurvey />
+        <TestimonialsSection />
+        <PricingSection />
+        <FaqSection />
+        <CtaBanner />
         <Footer />
       </div>
     </SmoothScrollWrapper>
diff --git a/src/features/landing-page/cta-banner.tsx b/src/features/landing-page/cta-banner.tsx
new file mode 100644
index 0000000..9d9affb
--- /dev/null
+++ b/src/features/landing-page/cta-banner.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import Button from "@/components/button";
+import Link from "next/link";
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.7, ease: "easeOut" },
+  },
+};
+
+export const CtaBanner = () => {
+  return (
+    <motion.section
+      className="relative py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 overflow-hidden"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.3 }}
+      variants={containerVariants}
+    >
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: "url('/bg-gradient.svg')",
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+          opacity: 0.4,
+        }}
+      />
+
+      <motion.div
+        className="relative z-10 max-w-[48rem] mx-auto text-center"
+        variants={containerVariants}
+      >
+        <motion.h2
+          className="font-semibold md:font-bold lg:font-extrabold text-2xl sm:text-3xl md:text-4xl lg:text-[3rem] xl:text-[4rem] text-white leading-tight mb-4 sm:mb-6"
+          variants={itemVariants}
+        >
+          Ready to Start{" "}
+          <span className="text-primary-purple">Earning?</span>
+        </motion.h2>
+
+        <motion.p
+          className="font-normal text-sm sm:text-base md:text-lg lg:text-[1.25rem] leading-6 sm:leading-7 md:leading-8 text-text-gray max-w-[39.9375rem] mx-auto mb-8 sm:mb-10"
+          variants={itemVariants}
+        >
+          Join thousands of participants and researchers on the leading
+          decentralized survey platform. Start earning STRK tokens today.
+        </motion.p>
+
+        <motion.div
+          className="flex flex-col sm:flex-row gap-4 justify-center"
+          variants={itemVariants}
+        >
+          <Link href="/">
+            <Button text="Start Earning" className="w-full sm:w-auto" />
+          </Link>
+          <Link href="/">
+            <button className="px-8 py-4 border-2 border-border-light rounded-xl font-bold text-base text-white hover:bg-border-light hover:text-bg-dark transition-colors duration-300 w-full sm:w-auto">
+              Create a Survey
+            </button>
+          </Link>
+        </motion.div>
+      </motion.div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/faq-section.tsx b/src/features/landing-page/faq-section.tsx
new file mode 100644
index 0000000..7932077
--- /dev/null
+++ b/src/features/landing-page/faq-section.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence, type Variants } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+
+const faqs = [
+  {
+    question: "What is Survexa?",
+    answer:
+      "Survexa is a decentralized survey platform built on Starknet. It connects researchers with participants, rewarding respondents with STRK tokens for sharing their opinions and insights.",
+  },
+  {
+    question: "How do I earn STRK tokens?",
+    answer:
+      "Simply browse available surveys, complete them with thoughtful responses, and receive STRK tokens directly to your wallet. The reward amount varies based on survey length and complexity.",
+  },
+  {
+    question: "How do I create a survey?",
+    answer:
+      "Sign up as a researcher, use our intuitive survey builder to create your questions, set your reward budget, and publish. Our platform handles participant matching and token distribution automatically.",
+  },
+  {
+    question: "Is my data secure?",
+    answer:
+      "Yes. Survexa leverages blockchain technology for transparency while keeping individual responses anonymous. Your data is encrypted and you maintain full control over your information.",
+  },
+  {
+    question: "What types of surveys can I create?",
+    answer:
+      "You can create multiple-choice, open-ended, rating scale, and matrix surveys. Our custom templates make it easy to get started quickly for any research need.",
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+export const FaqSection = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <motion.section
+      className="relative py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+    >
+      <div className="max-w-[48rem] mx-auto">
+        <motion.div className="text-center mb-12 sm:mb-16" variants={itemVariants}>
+          <h2 className="font-semibold md:font-bold lg:font-extrabold text-2xl sm:text-3xl md:text-4xl lg:text-[3rem] xl:text-[4rem] text-white leading-tight mb-4 sm:mb-6">
+            Frequently Asked{" "}
+            <span className="text-primary-purple">Questions</span>
+          </h2>
+          <p className="font-normal text-sm sm:text-base md:text-lg lg:text-[1.25rem] leading-6 sm:leading-7 md:leading-8 text-text-gray">
+            Everything you need to know about Survexa.
+          </p>
+        </motion.div>
+
+        <motion.div className="space-y-3 sm:space-y-4" variants={containerVariants}>
+          {faqs.map((faq, index) => (
+            <motion.div
+              key={index}
+              className="rounded-xl border border-border-gray bg-bg-faq-main overflow-hidden hover:border-primary-purple/20 transition-colors duration-300"
+              variants={itemVariants}
+            >
+              <button
+                className="w-full flex items-center justify-between p-4 sm:p-5 text-left cursor-pointer"
+                onClick={() =>
+                  setOpenIndex(openIndex === index ? null : index)
+                }
+                aria-expanded={openIndex === index}
+              >
+                <span className="text-white font-medium text-sm sm:text-base pr-4">
+                  {faq.question}
+                </span>
+                <motion.span
+                  animate={{ rotate: openIndex === index ? 180 : 0 }}
+                  transition={{ duration: 0.3 }}
+                  className="flex-shrink-0"
+                >
+                  <ChevronDown className="w-5 h-5 text-text-gray" />
+                </motion.span>
+              </button>
+              <AnimatePresence>
+                {openIndex === index && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                  >
+                    <div className="px-4 sm:px-5 pb-4 sm:pb-5">
+                      <p className="text-text-gray text-sm sm:text-base leading-relaxed">
+                        {faq.answer}
+                      </p>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/features-grid.tsx b/src/features/landing-page/features-grid.tsx
new file mode 100644
index 0000000..61b1571
--- /dev/null
+++ b/src/features/landing-page/features-grid.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import {
+  BarChart3Icon,
+  ShieldCheckIcon,
+  ZapIcon,
+  UsersIcon,
+  GlobeIcon,
+  BrainCircuitIcon,
+} from "lucide-react";
+
+const features = [
+  {
+    icon: ZapIcon,
+    title: "Lightning Fast Setup",
+    description:
+      "Create and launch surveys in minutes with our intuitive builder. No coding required.",
+  },
+  {
+    icon: BarChart3Icon,
+    title: "Real-Time Analytics",
+    description:
+      "Track responses as they come in with live dashboards, charts, and exportable reports.",
+  },
+  {
+    icon: ShieldCheckIcon,
+    title: "Blockchain Verified",
+    description:
+      "Every response is verified on-chain, ensuring data integrity and preventing fraud.",
+  },
+  {
+    icon: UsersIcon,
+    title: "Targeted Audiences",
+    description:
+      "Reach the right respondents with smart demographic and interest-based targeting.",
+  },
+  {
+    icon: GlobeIcon,
+    title: "Global Reach",
+    description:
+      "Access participants worldwide with multi-language support and localized surveys.",
+  },
+  {
+    icon: BrainCircuitIcon,
+    title: "AI-Powered Insights",
+    description:
+      "Get intelligent summaries and trend analysis powered by advanced machine learning.",
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 30, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+const headerVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: "easeOut" },
+  },
+};
+
+export const FeaturesGridSection = () => {
+  return (
+    <motion.section
+      className="relative py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 overflow-hidden"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+    >
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-12 sm:mb-16"
+          variants={headerVariants}
+        >
+          <h2 className="font-semibold md:font-bold lg:font-extrabold text-2xl sm:text-3xl md:text-4xl lg:text-[3rem] xl:text-[4rem] text-white leading-tight mb-4 sm:mb-6">
+            Everything You Need to{" "}
+            <span className="text-primary-purple">Succeed</span>
+          </h2>
+          <p className="font-normal text-sm sm:text-base md:text-lg lg:text-[1.25rem] leading-6 sm:leading-7 md:leading-8 text-text-gray max-w-[39.9375rem] mx-auto">
+            Powerful features designed to help you create better surveys and
+            gather meaningful insights.
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
+          variants={containerVariants}
+        >
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <motion.div
+                key={index}
+                className="group bg-bg-card/50 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-border-gray hover:border-primary-purple/30 transition-all duration-300"
+                variants={cardVariants}
+                whileHover={{ y: -4, transition: { duration: 0.2 } }}
+              >
+                <div className="w-12 h-12 rounded-xl bg-primary-purple/10 flex items-center justify-center mb-5 group-hover:bg-primary-purple/20 transition-colors duration-300">
+                  <Icon className="w-6 h-6 text-primary-purple" />
+                </div>
+                <h3 className="text-white font-bold text-lg sm:text-xl mb-3">
+                  {feature.title}
+                </h3>
+                <p className="text-text-gray text-sm sm:text-base leading-relaxed">
+                  {feature.description}
+                </p>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/pricing.tsx b/src/features/landing-page/pricing.tsx
new file mode 100644
index 0000000..4c17ade
--- /dev/null
+++ b/src/features/landing-page/pricing.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import { CheckIcon } from "lucide-react";
+import Link from "next/link";
+
+const plans = [
+  {
+    name: "Free",
+    price: "0",
+    period: "forever",
+    description: "Perfect for individuals getting started with surveys.",
+    features: [
+      "Up to 3 active surveys",
+      "50 responses per survey",
+      "Basic analytics",
+      "Community support",
+      "STRK token rewards",
+    ],
+    cta: "Get Started",
+    highlighted: false,
+  },
+  {
+    name: "Pro",
+    price: "29",
+    period: "per month",
+    description: "For teams who need advanced research capabilities.",
+    features: [
+      "Unlimited active surveys",
+      "Unlimited responses",
+      "Advanced analytics & exports",
+      "Priority support",
+      "Enhanced STRK rewards",
+      "Custom branding",
+      "Team collaboration",
+    ],
+    cta: "Start Free Trial",
+    highlighted: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    period: "",
+    description: "Tailored solutions for large organizations.",
+    features: [
+      "Everything in Pro",
+      "Dedicated account manager",
+      "Custom integrations",
+      "SSO & advanced security",
+      "SLA guarantees",
+      "On-premise deployment",
+      "API access",
+    ],
+    cta: "Contact Sales",
+    highlighted: false,
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.6, ease: "easeOut" },
+  },
+};
+
+const headerVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: "easeOut" },
+  },
+};
+
+export const PricingSection = () => {
+  return (
+    <motion.section
+      className="relative py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 overflow-hidden"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+    >
+      <div
+        className="absolute -top-[10%] left-1/2 transform -translate-x-1/2 -translate-y-1/4 w-full h-full pointer-events-none"
+        style={{
+          backgroundImage: "url('/bg-gradient.svg')",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+        }}
+      />
+
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-12 sm:mb-16"
+          variants={headerVariants}
+        >
+          <h2 className="font-semibold md:font-bold lg:font-extrabold text-2xl sm:text-3xl md:text-4xl lg:text-[3rem] xl:text-[4rem] text-white leading-tight mb-4 sm:mb-6">
+            Simple, Transparent{" "}
+            <span className="text-primary-purple">Pricing</span>
+          </h2>
+          <p className="font-normal text-sm sm:text-base md:text-lg lg:text-[1.25rem] leading-6 sm:leading-7 md:leading-8 text-text-gray max-w-[39.9375rem] mx-auto">
+            Choose the plan that fits your research needs. All plans include
+            STRK token rewards for participants.
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 items-stretch"
+          variants={containerVariants}
+        >
+          {plans.map((plan, index) => (
+            <motion.div
+              key={index}
+              className={`relative rounded-2xl p-6 sm:p-8 border transition-colors duration-300 flex flex-col ${
+                plan.highlighted
+                  ? "bg-primary-purple/10 border-primary-purple/50 shadow-lg shadow-primary-purple/10"
+                  : "bg-bg-card/50 backdrop-blur-sm border-border-gray hover:border-primary-purple/30"
+              }`}
+              variants={cardVariants}
+              whileHover={{ y: -4, transition: { duration: 0.2 } }}
+            >
+              {plan.highlighted && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary-purple text-white text-xs font-bold px-4 py-1 rounded-full">
+                  Most Popular
+                </div>
+              )}
+
+              <div className="mb-6">
+                <h3 className="text-white font-bold text-xl sm:text-2xl mb-2">
+                  {plan.name}
+                </h3>
+                <div className="flex items-baseline gap-1 mb-3">
+                  {plan.price !== "Custom" && (
+                    <span className="text-text-gray text-lg">$</span>
+                  )}
+                  <span className="text-white font-extrabold text-4xl sm:text-5xl">
+                    {plan.price}
+                  </span>
+                  {plan.period && (
+                    <span className="text-text-gray text-sm ml-1">
+                      /{plan.period}
+                    </span>
+                  )}
+                </div>
+                <p className="text-text-gray text-sm leading-relaxed">
+                  {plan.description}
+                </p>
+              </div>
+
+              <ul className="space-y-3 mb-8 flex-1">
+                {plan.features.map((feature, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <CheckIcon className="w-5 h-5 text-primary-purple flex-shrink-0 mt-0.5" />
+                    <span className="text-text-gray text-sm">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <Link href="/" className="mt-auto">
+                <button
+                  className={`w-full py-3 px-6 rounded-xl font-bold text-sm sm:text-base transition-all duration-300 ${
+                    plan.highlighted
+                      ? "bg-primary-purple text-white hover:bg-primary-purple/90 shadow-lg shadow-primary-purple/25"
+                      : "bg-white/5 text-white border border-border-gray hover:bg-white/10 hover:border-primary-purple/30"
+                  }`}
+                >
+                  {plan.cta}
+                </button>
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/stats.tsx b/src/features/landing-page/stats.tsx
new file mode 100644
index 0000000..56b2805
--- /dev/null
+++ b/src/features/landing-page/stats.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+
+const stats = [
+  {
+    value: "50K+",
+    label: "Active Participants",
+    description: "Engaged survey respondents earning rewards",
+  },
+  {
+    value: "12K+",
+    label: "Surveys Completed",
+    description: "Research projects successfully delivered",
+  },
+  {
+    value: "98%",
+    label: "Completion Rate",
+    description: "Industry-leading survey finish rate",
+  },
+  {
+    value: "150K+",
+    label: "STRK Distributed",
+    description: "Tokens rewarded to participants",
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 30, scale: 0.9 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+export const StatsSection = () => {
+  return (
+    <motion.section
+      className="relative py-16 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-8"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.3 }}
+      variants={containerVariants}
+    >
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
+          variants={containerVariants}
+        >
+          {stats.map((stat, index) => (
+            <motion.div
+              key={index}
+              className="text-center p-6 sm:p-8 rounded-2xl bg-bg-card/30 border border-border-gray hover:border-primary-purple/20 transition-colors duration-300"
+              variants={itemVariants}
+              whileHover={{ scale: 1.03, transition: { duration: 0.2 } }}
+            >
+              <motion.p
+                className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-primary-purple mb-2"
+                variants={itemVariants}
+              >
+                {stat.value}
+              </motion.p>
+              <p className="text-white font-semibold text-sm sm:text-base mb-1">
+                {stat.label}
+              </p>
+              <p className="text-text-gray text-xs sm:text-sm">
+                {stat.description}
+              </p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/testimonials.tsx b/src/features/landing-page/testimonials.tsx
new file mode 100644
index 0000000..be60320
--- /dev/null
+++ b/src/features/landing-page/testimonials.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import Image from "next/image";
+
+const testimonials = [
+  {
+    name: "Sarah Chen",
+    role: "Product Manager",
+    avatar: "/step-1.jpg",
+    quote:
+      "Survexa transformed how we gather customer feedback. The STRK token rewards drive real engagement from participants.",
+    rating: 5,
+  },
+  {
+    name: "Alex Rodriguez",
+    role: "UX Researcher",
+    avatar: "/step-2.jpg",
+    quote:
+      "The quality of responses we get through Survexa is incredible. Incentivized surveys truly make a difference.",
+    rating: 5,
+  },
+  {
+    name: "Maya Patel",
+    role: "Marketing Director",
+    avatar: "/step-3.jpg",
+    quote:
+      "We cut our research costs by 60% while getting faster, more reliable data. Survexa is a game-changer.",
+    rating: 5,
+  },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.6, ease: "easeOut" },
+  },
+};
+
+const headerVariants: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: "easeOut" },
+  },
+};
+
+export const TestimonialsSection = () => {
+  return (
+    <motion.section
+      className="relative py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 overflow-hidden"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+    >
+      <div
+        className="absolute -top-[10%] left-1/2 transform -translate-x-1/2 -translate-y-1/4 w-full h-full pointer-events-none"
+        style={{
+          backgroundImage: "url('/bg-gradient.svg')",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+        }}
+      />
+
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-12 sm:mb-16"
+          variants={headerVariants}
+        >
+          <h2 className="font-semibold md:font-bold lg:font-extrabold text-2xl sm:text-3xl md:text-4xl lg:text-[3rem] xl:text-[4rem] text-white leading-tight mb-4 sm:mb-6">
+            Trusted by Researchers{" "}
+            <span className="text-primary-purple">Worldwide</span>
+          </h2>
+          <p className="font-normal text-sm sm:text-base md:text-lg lg:text-[1.25rem] leading-6 sm:leading-7 md:leading-8 text-text-gray max-w-[39.9375rem] mx-auto">
+            See what our community has to say about their experience with
+            Survexa.
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8"
+          variants={containerVariants}
+        >
+          {testimonials.map((testimonial, index) => (
+            <motion.div
+              key={index}
+              className="bg-bg-card/50 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-border-gray hover:border-primary-purple/30 transition-colors duration-300"
+              variants={cardVariants}
+              whileHover={{ y: -4, transition: { duration: 0.2 } }}
+            >
+              <div className="flex gap-1 mb-4">
+                {Array.from({ length: testimonial.rating }).map((_, i) => (
+                  <svg
+                    key={i}
+                    className="w-5 h-5 text-primary-purple"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                ))}
+              </div>
+
+              <p className="text-text-gray text-sm sm:text-base leading-relaxed mb-6">
+                &ldquo;{testimonial.quote}&rdquo;
+              </p>
+
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full overflow-hidden bg-primary-purple/20">
+                  <Image
+                    src={testimonial.avatar}
+                    alt={testimonial.name}
+                    width={40}
+                    height={40}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div>
+                  <p className="text-white font-semibold text-sm">
+                    {testimonial.name}
+                  </p>
+                  <p className="text-text-gray text-xs">{testimonial.role}</p>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/features/landing-page/trusted-by.tsx b/src/features/landing-page/trusted-by.tsx
new file mode 100644
index 0000000..d01589a
--- /dev/null
+++ b/src/features/landing-page/trusted-by.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+
+const partners = [
+  { name: "Starknet", abbr: "SN" },
+  { name: "Ethereum", abbr: "ETH" },
+  { name: "OpenAI", abbr: "OA" },
+  { name: "Google Research", abbr: "GR" },
+  { name: "McKinsey", abbr: "MK" },
+  { name: "Deloitte", abbr: "DL" },
+];
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+const headerVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: "easeOut" },
+  },
+};
+
+export const TrustedBySection = () => {
+  return (
+    <motion.section
+      className="relative py-12 sm:py-16 md:py-20 px-4 sm:px-6 lg:px-8 overflow-hidden"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.3 }}
+      variants={containerVariants}
+    >
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <motion.p
+          className="text-center text-text-gray text-sm sm:text-base md:text-lg font-medium mb-8 sm:mb-12 uppercase tracking-widest"
+          variants={headerVariants}
+        >
+          Trusted by leading organizations
+        </motion.p>
+
+        <motion.div
+          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 sm:gap-8 items-center justify-items-center"
+          variants={containerVariants}
+        >
+          {partners.map((partner, index) => (
+            <motion.div
+              key={index}
+              className="flex items-center justify-center w-full h-16 sm:h-20 rounded-xl bg-bg-card/30 border border-border-gray/50 hover:border-primary-purple/20 transition-all duration-300 group cursor-default"
+              variants={itemVariants}
+              whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+            >
+              <div className="flex items-center gap-2">
+                <span className="w-8 h-8 rounded-lg bg-primary-purple/10 flex items-center justify-center text-primary-purple font-bold text-xs group-hover:bg-primary-purple/20 transition-colors duration-300">
+                  {partner.abbr}
+                </span>
+                <span className="text-text-gray text-sm sm:text-base font-medium group-hover:text-white transition-colors duration-300">
+                  {partner.name}
+                </span>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};