Skip to content

Commit

Permalink
Add gallery for reviews
Browse files Browse the repository at this point in the history
  • Loading branch information
canmingir committed Feb 11, 2024
1 parent 4573098 commit c6d4561
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 8 deletions.
8 changes: 0 additions & 8 deletions src/_mock/_caseStudies.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,6 @@ The runtime that tracks given statements in JavaScript and creates relationships
<br/>
<p>The symbolic component of Neuro-Symbolic AI focuses on logic, rules, and symbolic representations of knowledge. Unlike neural networks that learn from data, symbolic AI uses predefined rules and knowledge bases to perform reasoning, make inferences, and understand relationships between entities. This aspect of AI is transparent, interpretable, and capable of explaining its decisions and reasoning processes in a way that humans can understand.</p>
<br/>
<br/>
<h5>Declarative Logic in Symbolic Reasoning</h5>
<br/>
<p>Declarative logic is a subset of declarative programming, a style of building programs that expresses the logic of a computation without describing its control flow. In declarative logic, you state the facts and rules that define the problem domain. The runtime environment or the system itself figures out how to satisfy those conditions or how to apply those rules to reach a conclusion. This contrasts with imperative programming, where the developer writes code that describes the exact steps to achieve a goal.</p>
<br/>
<p>Symbolic reasoning refers to the process of using symbols to represent problems and applying logical rules to manipulate these symbols and derive conclusions or solutions. In AI and computer science, it involves using symbolic representations for entities and actions, enabling the system to perform logical inferences, decision making, and problem-solving based on the rules and knowledge encoded in the symbols.</p>
<br/>
<p>By integrating Nucleoid into Neuro-Symbolic AI, the system benefits from enhanced interpretability and reliability. The declarative logic and rules defined in Nucleoid provide clear explanations for the AI's decisions, making it easier for users to understand and trust the system's outputs. Furthermore, the explicit reasoning capabilities help ensure that decisions are made based on logical principles, adding a layer of reliability and consistency to the AI's behavior.</p>
`;

export const _caseStudies = TITLE.map((_, index) => {
Expand Down
3 changes: 3 additions & 0 deletions src/pages/landing.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import MarketingLandingHero from "../sections/marketing-landing-hero";
import MarketingLandingFaqs from "../sections/marketing-landing-faqs";
import MarketingServicesInclude from "../sections/marketing-services-include";
import MarketingCaseStudyDetails from "../sections/marketing-case-study-details";
import MarketingCaseStudyDetailsGallery from "../sections/marketing-case-study-details-gallery";

export default function MarketingLandingPage() {
return (
Expand All @@ -24,6 +25,8 @@ export default function MarketingLandingPage() {

<HelloWorld />

<MarketingCaseStudyDetailsGallery />

<MarketingServices />

<MarketingCaseStudyDetails />
Expand Down
121 changes: 121 additions & 0 deletions src/sections/marketing-case-study-details-gallery.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { useEffect } from "react";
import { m } from "framer-motion";
import PropTypes from "prop-types";

import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { Container } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";

import Image from "src/components/image";
import { varHover, varTranHover } from "src/components/animate";
import Lightbox, { useLightbox } from "src/components/lightbox";
import Carousel, { useCarousel, CarouselArrows } from "src/components/carousel";

// ----------------------------------------------------------------------

function shuffleArray(array) {
// eslint-disable-next-line no-plusplus
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

const images = shuffleArray([
"https://cdn.nucleoid.com/media/review1.png",
"https://cdn.nucleoid.com/media/review2.png",
"https://cdn.nucleoid.com/media/review3.png",
"https://cdn.nucleoid.com/media/review4.png",
"https://cdn.nucleoid.com/media/review5.png",
"https://cdn.nucleoid.com/media/review6.png",
"https://cdn.nucleoid.com/media/review7.png",
"https://cdn.nucleoid.com/media/review8.png",
]);

export default function MarketingCaseStudyDetailsGallery() {
const theme = useTheme();

const slides = images.map((slide) => ({
src: slide,
}));

const lightbox = useLightbox(slides);

const carousel = useCarousel({
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
responsive: [
{
breakpoint: theme.breakpoints.values.md,
settings: { slidesToShow: 2 },
},
{
breakpoint: theme.breakpoints.values.sm,
settings: { slidesToShow: 1 },
},
],
});

useEffect(() => {
if (lightbox.open) {
carousel.onTogo(lightbox.selected);
}
}, [carousel, lightbox.open, lightbox.selected]);

return (
<Container sx={{ mt: 10, mb: 10 }}>
<Stack
direction="row"
justifyContent="space-between"
sx={{ mt: 3, mb: 5 }}
>
<Typography variant="h4">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</Typography>
<Typography variant="h4">Join the Community</Typography>
<CarouselArrows
spacing={2}
onNext={carousel.onNext}
onPrev={carousel.onPrev}
/>
</Stack>

<Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
{slides.map((slide) => (
<Box
key={slide.src}
component={m.div}
whileHover="hover"
sx={{ px: 1 }}
onClick={() => lightbox.onOpen(slide.src)}
>
<Box
sx={{ borderRadius: 0.5, overflow: "hidden", cursor: "pointer" }}
>
<m.div variants={varHover(1)} transition={varTranHover()}>
<Image alt={slide.src} src={slide.src} />
</m.div>
</Box>
</Box>
))}
</Carousel>

<Lightbox
index={lightbox.selected}
slides={slides}
open={lightbox.open}
close={lightbox.onClose}
onGetCurrentIndex={(index) => lightbox.setSelected(index)}
/>
</Container>
);
}

MarketingCaseStudyDetailsGallery.propTypes = {
images: PropTypes.array,
};

0 comments on commit c6d4561

Please sign in to comment.