Add Lottie Animation Showcase

src/components/LottieCard.js

@@ -0,0 +1,43 @@
+import React from "react"
+import Card from "react-bootstrap/Card"
+import LottiePlayerSSR from "./LottiePlayerSSR"
+
+const LottieCard = ({ title, author, authorUrl, animationData, className = "", style = {} }) => {
+  return (
+    <Card className={`h-100 ${className}`} style={style}>
+      <Card.Body className="d-flex flex-column p-3">
+        <div className="flex-grow-1 d-flex align-items-center justify-content-center mb-3">
+          <LottiePlayerSSR
+            animationData={animationData}
+            loop={true}
+            style={{ width: "120px", height: "120px" }}
+          />
+        </div>
+        <Card.Footer className="bg-transparent border-0 p-0 mt-auto">
+          <div className="text-center">
+            <h6 className="mb-1 fw-semibold">{title}</h6>
+            {author && (
+              <small className="text-muted">
+                by{" "}
+                {authorUrl ? (
+                  <a 
+                    href={authorUrl} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-decoration-none"
+                  >
+                    {author}
+                  </a>
+                ) : (
+                  author
+                )}
+              </small>
+            )}
+          </div>
+        </Card.Footer>
+      </Card.Body>
+    </Card>
+  )
+}
+
+export default LottieCard

src/data/faqData.js

@@ -0,0 +1,29 @@
+export const faqData = {
+  title: "Frequently Asked Questions",
+  items: [
+    {
+      question: "What file extension should I use for Lottie animations?",
+      answer: "You should use either `.json` or `.lot`. While `.json` has been historically common, the Internet Assigned Numbers Authority (IANA) has officially recognized `.lot` as the standard file extension with the MIME type `video/lottie+json`. Using the `.lot` extension is encouraged to align with this official standard."
+    },
+    {
+      question: "How do I create a Lottie animation?",
+      answer: "Lottie animations can be created using a wide range of tools, platforms, or plugins. A popular method is designing animations in Adobe After Effects and exporting them with a specialized plugin. For a detailed list of creation tools and resources, please visit our [Implementations page.](https://lottie.github.io/implementations/)"
+    },
+    {
+      question: "How do I use a Lottie animation in my project?",
+      answer: "To play a Lottie animation in your website or application, you need to use a Lottie player library or renderer compatible with your project's platform (e.g., web, iOS, Android, React Native). Many excellent players are available. You can find a comprehensive list of [supported libraries.](https://lottie.github.io/implementations/)"
+    },
+    {
+      question: "What is the difference between Lottie and dotLottie?",
+      answer: "Lottie refers to the open-source, JSON-based animation format that is being standardized by the LAC. In contrast, dotLottie (`.lottie`) is a superset format developed by LottieFiles. It is a different format built upon Lottie that acts as a compressed archive, capable of bundling the core Lottie JSON file with other assets like images or fonts into a single, smaller file. More details can be found on the [dotLottie specifications website.](https://dotlottie.io)"
+    },
+    {
+      question: "Why are some Lottie features missing from the LAC specification?",
+      answer: "Lottie has been in use for a long time and evolved organically with a rich feature set developed by the community, long before the LAC was established. The LAC's mission is to refine and formalize this powerful format into a stable, official standard. As such, we are progressively integrating existing features into the specification. You can continue to use all Lottie features available in current players. For documentation on features that are not yet part of the formal specification, the [Lottie format documentation from LottieFiles](https://lottiefiles.github.io/lottie-docs/) is an excellent resource."
+    },
+    {
+      question: "How can I or my organization get involved with the LAC?",
+      answer: "The LAC is an open and collaborative project, and we welcome contributions from everyone in the community. You can help shape the future of Lottie by contributing to the specification, participating in discussions, or improving tooling. To get started, please visit our [contribution page](https://lottie.github.io/contribute/)"
+    }
+  ]
+}

src/data/homeContent.js

@@ -0,0 +1,42 @@
+export const homeContent = {
+  intro: {
+    title: "Lottie is an open format for animated vector graphics",
+    body: "​​Lottie is an open-source vector graphics animation file format. It was first created in 2015 by Hernan Torrisi as an export format for the export and playback of animations from Adobe After Effects. It is now a highly popular animation format used on the web, mobile applications and other systems with multiple independent renderer implementations and creation support.",
+  },
+  whyLottie: {
+    title: "What is Lottie?",
+    body: "Lottie animations are typically created using Adobe After Effects, and they can include complex animations, motion graphics, and interactive elements. Once an animation is created, it can be exported as a Lottie JSON file. This JSON file contains all the information needed to recreate the animation, including keyframes, easing curves, and layer information.",
+    list: [
+      {
+        title: "Vector Graphics",
+        body: "Vector Graphics are resolution-independent images created from geometric shapes like curves and lines rather than a grid of pixels",
+      },
+      {
+        title: "Tweening",
+        body: "Tweening is the process of animating graphics where the animator defines shape properties at specific keyframes and the frames between those are interpolated automatically.",
+      },
+      {
+        title: "Rich Ecosystem",
+        body: "A mature and robust ecosystem of players, creation tools, libraries and free assets. Trusted and used by thousands of companies to enrich their user experience.",
+      },
+      {
+        title: "Open file format",
+        body: "Lottie is an open standard based on the JSON format, allowing for ease of transfer over the web and manipulation with existing tools.",
+      },
+    ],
+  },
+  community: {
+    title: "About Lottie Animation Community",
+    list: [
+      {
+        body: "Lottie Animation Community (LAC), a non-profit open source project hosted by The Linux Foundation, dedicated to establishing the Lottie File Format as an efficient, scalable and cross-platform animated vector graphics technology and open file format.",
+      },
+      {
+        body: "LAC was founded by a community of pioneers in recognition of that need. LAC aims to develop a formal Lottie format specification for implementation across renderers and other tools, and works towards the promotion and widespread adoption of the Lottie file format as an industry standard.",
+      },
+      {
+        body: "LAC operates as a project under the governance of the Joint Development Foundation, guaranteeing an open, collaborative approach to our standardization efforts. Our work is deeply rooted in transparency, ensuring that everyone in our community has a voice in the development and refinement of the Lottie File Format.",
+      },
+    ],
+  },
+}

src/data/sampleAnimations.js

@@ -0,0 +1,149 @@
+import BurgerAnimation from "../assets/samples/Burger.json"
+import BusinessmanAnimation from "../assets/samples/Businessman looks through the telescope on a rocket.json"
+import ColorfulTurkeyAnimation from "../assets/samples/Colorful Thanksgiving Turkey.json"
+import DeathDanceAnimation from "../assets/samples/Death Dance.json"
+import FireAnimation from "../assets/samples/Fire.json"
+import HealthyFoodAnimation from "../assets/samples/Healthy food for diet & fitness.json"
+import IsometricAnimation from "../assets/samples/Isometric animation for UIUX design landing page..json"
+import LevelUpBadgesAnimation from "../assets/samples/Level Up Badges.json"
+import LoaderCatAnimation from "../assets/samples/Loader cat.json"
+import LoadingLoopAnimation from "../assets/samples/Loading loop animation.json"
+import PropertySearchAnimation from "../assets/samples/Property Search House Morph 01.json"
+import SandyLoadingAnimation from "../assets/samples/Sandy Loading.json"
+import ScooterAnimation from "../assets/samples/Scooter.json"
+import SolarHouseAnimation from "../assets/samples/Solar Powered House.json"
+import StackAnimation from "../assets/samples/Stack Animation.json"
+import RunningPigeonAnimation from "../assets/samples/running pigeon.json"
+
+export const sampleAnimations = [
+  {
+    id: "burger",
+    title: "Burger",
+    author: "Nuraskar Esenamanov",
+    authorUrl: "https://lottiefiles.com/Nuraskar2611",
+    animationData: BurgerAnimation,
+    featured: true,
+  },
+  {
+    id: "fire",
+    title: "Fire",
+    author: "Mohsen Zamani",
+    authorUrl: "https://lottiefiles.com/twlt1o42jpm59mva",
+    animationData: FireAnimation,
+    featured: true,
+  },
+  {
+    id: "scooter",
+    title: "Scooter",
+    author: "Buryastorm",
+    authorUrl: "https://lottiefiles.com/buryastorm",
+    animationData: ScooterAnimation,
+    featured: true,
+  },
+  {
+    id: "businessman-telescope",
+    title: "Businessman With Telescope",
+    author: "Abdul Latif",
+    authorUrl: "https://lottiefiles.com/animoox",
+    animationData: BusinessmanAnimation,
+    featured: false,
+  },
+  {
+    id: "colorful-turkey",
+    title: "Colorful Thanksgiving Turkey",
+    author: "Abel Cabrerizo",
+    authorUrl: "https://lottiefiles.com/abelcabrerizo",
+    animationData: ColorfulTurkeyAnimation,
+    featured: false,
+  },
+  {
+    id: "death-dance",
+    title: "Death Dance",
+    author: "jignesh gajjar",
+    authorUrl: "https://lottiefiles.com/jigneshgajjar",
+    animationData: DeathDanceAnimation,
+    featured: false,
+  },
+  {
+    id: "healthy-food",
+    title: "Healthy Food for Diet & Fitness",
+    author: "Haikal G",
+    authorUrl: "https://lottiefiles.com/rworr4rgm9d6h0bz",
+    animationData: HealthyFoodAnimation,
+    featured: false,
+  },
+  {
+    id: "isometric-design",
+    title: "Isometric UI/UX Design Landing",
+    author: "Abdul Latif",
+    authorUrl: "https://lottiefiles.com/animoox",
+    animationData: IsometricAnimation,
+    featured: false,
+  },
+  {
+    id: "level-up-badges",
+    title: "Level Up Badges",
+    author: "Abdul Latif",
+    authorUrl: "https://lottiefiles.com/animoox",
+    animationData: LevelUpBadgesAnimation,
+    featured: false,
+  },
+  {
+    id: "loader-cat",
+    title: "Loader Cat",
+    author: "Diane Picchiottino",
+    authorUrl: "https://lottiefiles.com/diane_soko",
+    animationData: LoaderCatAnimation,
+    featured: true,
+  },
+  {
+    id: "loading-loop",
+    title: "Loading Loop",
+    author: "Aneesh Ravi",
+    authorUrl: "https://lottiefiles.com/aneeshravi",
+    animationData: LoadingLoopAnimation,
+    featured: false,
+  },
+  {
+    id: "property-search",
+    title: "Property Search House Morph",
+    author: "Andrew Malcolm",
+    authorUrl: "https://lottiefiles.com/4hfe2jlqki",
+    animationData: PropertySearchAnimation,
+    featured: false,
+  },
+  {
+    id: "sandy-loading",
+    title: "Sandy Loading",
+    author: "Parsa Navaei",
+    authorUrl: "https://lottiefiles.com/m7ooeuaby6",
+    animationData: SandyLoadingAnimation,
+    featured: false,
+  },
+  {
+    id: "solar-house",
+    title: "Solar Powered House",
+    author: "Jeffrey Christopher",
+    authorUrl: "https://lottiefiles.com/zeffchris",
+    animationData: SolarHouseAnimation,
+    featured: false,
+  },
+  {
+    id: "stack-animation",
+    title: "Stack Animation",
+    author: "Toonlab Studio",
+    authorUrl: "https://lottiefiles.com/vqgpw3dl7ylx5bgc",
+    animationData: StackAnimation,
+    featured: false,
+  },
+  {
+    id: "running-pigeon",
+    title: "Running Pigeon",
+    author: "Christina Bublyk",
+    authorUrl: "https://lottiefiles.com/creatopotato",
+    animationData: RunningPigeonAnimation,
+    featured: false,
+  },
+]
+
+export const featuredAnimations = sampleAnimations.filter(animation => animation.featured)

src/pages/demos.js

@@ -0,0 +1,58 @@
+import * as React from "react"
+
+import Container from "react-bootstrap/Container"
+import Row from "react-bootstrap/Row"
+import Col from "react-bootstrap/Col"
+
+import Layout from "../components/layout"
+import Seo from "../components/seo"
+import LottieCard from "../components/LottieCard"
+
+import { sampleAnimations } from "../data/sampleAnimations"
+import { Link } from "gatsby"
+
+const Demos = () => {
+  return (
+    <Layout>
+      <Container className="py-5">
+        <Row>
+          <Col md={{ span: 8, offset: 2 }} className="text-center mb-5">
+            <h2 className="h3 mb-3">Lottie Demo Gallery</h2>
+            <p className="text-muted">
+              Explore a collection of Lottie animations showcasing the format's capabilities
+            </p>
+          </Col>
+        </Row>
+
+        <Row className="g-4">
+          {sampleAnimations.map((animation) => (
+            <Col lg={4} md={6} key={`sample-animation-${animation.id}`}>
+              <LottieCard
+                title={animation.title}
+                author={animation.author}
+                authorUrl={animation.authorUrl}
+                animationData={animation.animationData}
+                className="shadow border-0"
+              />
+            </Col>
+          ))}
+        </Row>
+
+        <Row className="mt-5">
+          <Col>
+            <Link 
+              to="/#demos"
+              className="text-decoration-none fw-semibold text-primary"
+            >
+              ← Back to Home
+            </Link>
+          </Col>
+        </Row>
+      </Container>
+    </Layout>
+  )
+}
+
+export default Demos
+
+export const Head = () => <Seo title="Demos" />