Components | Astrae Design

Grayscale Carousel

A sleek carousel showcasing testimonials.

Preview

Code

app/page.tsx

// This is premium content
// Upgrade to Pro or Agency plan to access the full code
// 
// Features included:
// - Complete implementation
// - Advanced animations
// - Performance optimizations
// - TypeScript support
// - Responsive design
// 
// Get access now at /pricing

const PremiumComponent = () => {
    return (
        <div>
            <h1>Premium Content</h1>
            <p>Upgrade to unlock this component</p>
        </div>
    );
};

export default PremiumComponent;

Installation

Initialized a project and installed the necessary dependencies to use this component.

1. Initialize a new Next.js project:

npx create-next-app@latest my-app

2. Install Framer Motion

npm install framer-motion

3. Install Shadcn

npx shadcn@latest init

4. Install Shadcn Carousel Component

npx shadcn@latest add carousel

Add Testimonials Section

src/sections/testimonials.tsx

// This is premium content
// Upgrade to Pro or Agency plan to access the full code
// 
// Features included:
// - Complete implementation
// - Advanced animations
// - Performance optimizations
// - TypeScript support
// - Responsive design
// 
// Get access now at /pricing

const PremiumComponent = () => {
    return (
        <div>
            <h1>Premium Content</h1>
            <p>Upgrade to unlock this component</p>
        </div>
    );
};

export default PremiumComponent;

Add Testimonial Carousel Component

src/components/common/testimonials-carousel.tsx

// This is premium content
// Upgrade to Pro or Agency plan to access the full code
// 
// Features included:
// - Complete implementation
// - Advanced animations
// - Performance optimizations
// - TypeScript support
// - Responsive design
// 
// Get access now at /pricing

const PremiumComponent = () => {
    return (
        <div>
            <h1>Premium Content</h1>
            <p>Upgrade to unlock this component</p>
        </div>
    );
};

export default PremiumComponent;

Add Testimonials Card Component

src/components/common/testimonial-card.tsx

// This is premium content
// Upgrade to Pro or Agency plan to access the full code
// 
// Features included:
// - Complete implementation
// - Advanced animations
// - Performance optimizations
// - TypeScript support
// - Responsive design
// 
// Get access now at /pricing

const PremiumComponent = () => {
    return (
        <div>
            <h1>Premium Content</h1>
            <p>Upgrade to unlock this component</p>
        </div>
    );
};

export default PremiumComponent;

Update Shadcn Carousel Component

src/components/ui/carousel.tsx

// This is premium content
// Upgrade to Pro or Agency plan to access the full code
// 
// Features included:
// - Complete implementation
// - Advanced animations
// - Performance optimizations
// - TypeScript support
// - Responsive design
// 
// Get access now at /pricing

const PremiumComponent = () => {
    return (
        <div>
            <h1>Premium Content</h1>
            <p>Upgrade to unlock this component</p>
        </div>
    );
};

export default PremiumComponent;

Add Constants

src/constants/index.ts

export const allTestimonials = [
  {
    name: "Sofia Papadopoulou",
    title: "CEO of Autism Spectrum Reach",
    src: "/assets/testimonial-1.png",
    testimonial:
      "Orion consistently delivers top-quality work and guided our team on brand implementation. His strategy workshop was engaging and results-driven, and his process was seamless and flexible throughout.",
  },
  {
    name: "Lucas Moretti",
    title: "Head of Product at FinEdge",
    src: "/assets/testimonial-2.png",
    testimonial:
      "Working with Orion was a game changer for our product launch. His attention to detail and creative solutions exceeded our expectations. We saw immediate results in user engagement!",
  },
  {
    name: "Ava Chen",
    title: "Founder of NovaWear",
    src: "/assets/testimonial-3.png",
    testimonial:
      "Orion’s expertise in branding and design helped us stand out in a crowded market. The process was smooth, collaborative, and inspiring from start to finish.",
  },
  {
    name: "David Okafor",
    title: "CTO of EduSpark",
    src: "/assets/testimonial-4.png",
    testimonial:
      "We appreciated Orion’s strategic approach and technical know-how. Our new platform is faster, more intuitive, and our team learned a lot from the experience.",
  },
  {
    name: "Sofia Papadopoulou",
    title: "CEO of Autism Spectrum Reach",
    src: "/assets/testimonial-5.png",
    testimonial:
      "Orion consistently delivers top-quality work and guided our team on brand implementation. His strategy workshop was engaging and results-driven, and his process was seamless and flexible throughout.",
  },
  {
    name: "Lucas Moretti",
    title: "Head of Product at FinEdge",
    src: "/assets/testimonial-6.png",
    testimonial:
      "Working with Orion was a game changer for our product launch. His attention to detail and creative solutions exceeded our expectations. We saw immediate results in user engagement!",
  },
  {
    name: "Ava Chen",
    title: "Founder of NovaWear",
    src: "/assets/testimonial-7.png",
    testimonial:
      "Orion’s expertise in branding and design helped us stand out in a crowded market. The process was smooth, collaborative, and inspiring from start to finish.",
  },
  {
    name: "David Okafor",
    title: "CTO of EduSpark",
    src: "/assets/testimonial-8.png",
    testimonial:
      "We appreciated Orion’s strategic approach and technical know-how. Our new platform is faster, more intuitive, and our team learned a lot from the experience.",
  },
];

Add Styles

src/globals.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(0% 0 0);
  --foreground: oklch(100% 0.00011 271.152);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0% 0 0);
  --foreground: oklch(100% 0.00011 271.152);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Become an Astrae
Affiliate Today

Make referrals, and bring in clients. Keep 50% of your earnings paid out weekly.

Grayscale Carousel

Preview

Code

Installation

Become an Astrae Affiliate Today

Become an Astrae
Affiliate Today